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