前阵子跟一个同事说: 创建对象时, 原型上只定义方法就行, 属性定义在构造函数里面. 他问了句: 为什么? 我居然思索了半天, 知识有时真的不用就会忘, 通过写作能加深印象, 我们来看下面的例子:
- 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' ], 问题是不是就解决了? 这种方法被称作 "借用构造函数"(有时也称为伪造对象或者经典继承).
温故而知新, 有时东西工作时写成了习惯, 就会忘记原理.
来源: https://juejin.im/post/5c5657ec6fb9a049ae085638