珠峰培训

javascript中常用的继承

作者:tx

2016-08-31 20:11:39

159

原型继承

function A(){
this.x = 100;
}
A.prototype.getX = function (){}
function B(){}
B.prototype = new A(); //这一行是核心代码,B这个类的原型指向A类的实例。这样所有B类的实例都可以通过__proto__属性找到B原型上的方法。由于B的原型已经是A的一个实例,这样A实例上的所有私有的属性都变成B实例的公有属性。而A类原型上的方法相对于B类的实例来说更是公有的公有。
B.prototype.constructor = B; // 由于原型的更改会导致原型上默认属性constructor丢失问题,所以需要主动添加
var b = new B();
console.dir(b);

call继承

function A(){
this.x = 100;
}
A.prototype.getX = function (){}
function B(){
A.call(this); //核心代码,把A构造函数中的this修改为当前的this,而当前的this是B类的实例。也就是把A类中的this修改为B类的实例,那么在A类中通过this给实例添加的私有属性就都添加到B类实例上了。这样就完成了从A类私有到B类私有的一个过程
}
var b = new B();
console.dir(b);

冒充对象继承

function A(){}
A.prototype.getX = function (){}
function B(){
var a = new A();
for(var key in a){
this[key] = a[key]; //核心代码 使用for in遍历a这个实例对象,for in 可以遍历出a实例所有的私有属性和A类原型上所有主动添加的属性(也就是除了默认的constructor和__proto__属性).这个循环执行结束后会在this上添加了和a实例相同的能遍历出来的属性。
}
}

混合继承

function A(){
this.x = 100;
}
A.prototype.getX = function (){}
//混合继承 原型+call
function B(){
B.call(this);
}

B.prototype = new A();
B.prototype.constructor = B;

var b = new B();
console.dir(b);
//混合继承:通过call继承可以把A类的私有属性继承,原型继承可以把A类的私有和公有属性继承当作B类公有继承

中间件继承

function A(){
this.x = 100;
}
A.prototype.getX = function (){}
function B(){}
B.prototype.__proto__ = A.prototype; //核心代码 B.prototype.__proto__默认应该指向Object.prototype.这样去指向A类的原型就可以通过圆形链继承A类原型上的公有属性。A.prototype.__proto__仍然会指向Object.prototype所以不会破坏原有指向关系
var b = new B();
console.dir(b);

继承指的就是子类继承父类的方法,子类的实例可以任意调用父类上的属性和方法。