JS对象继承时，对引用属性的处理

栏目: JavaScript · 发布时间: 7年前

内容简介：前阵子跟一个同事说：上述代码，输出都是一样的：[ 'peter', 'nina' ]，很明显，两个不同的子类之间的数据相互混杂在一起了。那我们试试将属性移到构造函数里面：执行发现，结果并没有变化，两个不同的子类虽然复制了自己的staffs，但staffs是个引用类型，他们只复制了引用地址而已，指向的具体数据还是同一份，那么怎么解决呢？做下变通：

前阵子跟一个同事说：创建对象时，原型上只定义方法就行，属性定义在构造函数里面。他问了句：为什么？我居然思索了半天，知识有时真的不用就会忘，通过写作能加深印象，我们来看下面的例子：

function SuperCompany() {}

SuperCompany.prototype.staffs = [];

SuperCompany.prototype.addStaff = function(name) {
	this.staffs.push(name);
}

SuperCompany.prototype.printStaff = function() {
	console.log('staffs:', this.staffs);	
}


function Company() {}
Company.prototype = new SuperCompany();

let companyA = new Company();
companyA.addStaff('peter');

let companyB = new Company();
companyB.addStaff('nina');

companyA.printStaff();
companyB.printStaff();

复制代码

上述代码，输出都是一样的：[ 'peter', 'nina' ]，很明显，两个不同的子类之间的数据相互混杂在一起了。那我们试试将属性移到构造函数里面：

function SuperCompany() {
	this.staffs = [];
}

SuperCompany.prototype.addStaff = function(name) {
	this.staffs.push(name);
}

SuperCompany.prototype.printStaff = function() {
	console.log('staffs:', this.staffs);	
}


function Company() {}
Company.prototype = new SuperCompany();

let companyA = new Company();
companyA.addStaff('peter');

let companyB = new Company();
companyB.addStaff('nina');

companyA.printStaff();
companyB.printStaff();
复制代码

执行发现，结果并没有变化，两个不同的子类虽然复制了自己的staffs，但staffs是个引用类型，他们只复制了引用地址而已，指向的具体数据还是同一份，那么怎么解决呢？做下变通：

function SuperCompany() {
	this.staffs = [];
}

SuperCompany.prototype.addStaff = function(name) {
	this.staffs.push(name);
}

SuperCompany.prototype.printStaff = function() {
	console.log('staffs:', this.staffs);	
}


function Company() {
	SuperCompany.call(this);
}
Company.prototype = new SuperCompany();

let companyA = new Company();
companyA.addStaff('peter');

let companyB = new Company();
companyB.addStaff('nina');

companyA.printStaff();
companyB.printStaff();

复制代码

再看下输出，[ 'peter' ]、[ 'nina' ]，问题是不是就解决了？这种方法被称作” 借用构造函数 “（有时也称为 伪造对象 或者 经典继承 ）。

以上所述就是小编给大家介绍的《JS对象继承时，对引用属性的处理》，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对码农网的支持！

查看所有标签

猜你喜欢:

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍

迎接互联网的明天

邹静 / 电子工业 / 2011-6 / 55.00元

《迎接互联网的明天-玩转3D Web(附盘)》，全书共5章，第1章主要阐述了国内外空前繁荣的3D互联网技术领域，以及这些领域透射出来的潜在商机；第2章主要用当下比较流行的Flash编程语言ActionScript 3，来向大家介绍面向对象编程语言的思想概念，以及一些3D渲染技术的入门知识；第3章注重建模知识的运用，主要运用WireFusion和3ds Max来制作3D网页；第4章主要介绍3D游戏编......一起来看看《迎接互联网的明天》这本书的介绍吧!

码农工具

JS对象继承时，对引用属性的处理

迎接互联网的明天

URL 编码/解码

UNIX 时间戳转换

RGB CMYK 转换工具