JS对象继承时,对引用属性的处理
栏目: JavaScript · 发布时间: 6年前
内容简介:前阵子跟一个同事说:上述代码,输出都是一样的:[ '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对象继承时,对引用属性的处理》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:- [译]继承 JavaScript 类中的静态属性
- CCS2.1 - 属性赋值,层叠(Cascading)和继承
- ruby-on-rails – 在Rails中编写可继承的属性与基本赋值
- 028.Python面向对象继承(单继承,多继承,super,菱形继承)
- PHP类继承、接口继承关系概述
- 面向对象:理解 Python 类的单继承与多继承
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
Wireshark网络分析实战
[以色列 Yoram Orzach / 古宏霞、孙余强 / 人民邮电出版社 / 2015-1 / 79.00元
本书采用步骤式为读者讲解了一些使用Wireshark来解决网络实际问题的技巧。 本书共分为14章,其内容涵盖了Wireshark的基础知识,抓包过滤器的用法,显示过滤器的用法,基本/高级信息统计工具的用法,Expert Info工具的用法,Wiresahrk在Ethernet、LAN及无线LAN中的用法,ARP和IP故障分析,TCP/UDP故障分析,HTTP和DNS故障分析,企业网应用程序行......一起来看看 《Wireshark网络分析实战》 这本书的介绍吧!
HTML 压缩/解压工具
在线压缩/解压 HTML 代码
HEX HSV 转换工具
HEX HSV 互换工具