JS继承
原型链
- 概念
- 了解构造,实例,原型之间的关系,构造和实例的prototype指向原型,原型的constructor指向构造
- 子类需要重复利用父类的方法和属性
- 将子类构造的prototype指向父类的一个实例,子类便可以通过这个实例来访问父类的属性和方法
- 将此关系层层递进就形成了原型链
- 实现
function Super(name) {
this.name = "name";
this.superproperty = true;
}
Super.prototype.getSuperName = function () {
return this.name;
}
Super.prototype.getSuperproperty = function () {
return this.superproperty;
}
function Sub(name) {
this.name = name;
this.subproperty = false;
}
//继承
Sub.prototype = new Super();
Sub.prototype.getSubName = function () {
return this.name;
}
Sub.prototype.getSubproperty = function () {
return this.subproperty;
}
var instance = new Sub("ctc");
console.log(instance.getSuperproperty());//true
console.log(instance.getSubproperty());//false
console.log(instance.getSuperName());//ctc
console.log(instance.getSubName());//ctc
最后俩输出都是ctc的过程,当instance遇到“.”操作符时会执行 1)搜索实例,2)搜索sub.prototype ,3)搜索super.prototype
所以最后结果展示的是这个样子
- 注意的问题
每一个实例都是有默认的原型Object所以刚刚的super.prototype.prototype指向的是Object的prototype
定义的时候需要谨慎
//继承
Sub.prototype = new Super();
继承时重写?此时sub.prototype的constructor指向了谁?
此句一定要放在,
添加新方法和覆盖就方法代码之前
Sub.prototype.getSubName = function () {
return this.name;
}
Sub.prototype.getSubproperty = function () {
return this.subproperty;
}
- 缺点
父类的实例属性变成了子类的原型属性被共享;
创建子类实例的时候,无法在不影响所有实例的情况下,给父类传递参数。
借用构造函数
function Super(name) {
this.name = name;
}
Super.prototype.getSuperName = function () {
return this.name;
}
function Sub(name) {
Super.call(this,name);
this.name = name;
}//继承Sub.prototype = new Super();Sub.prototype.getSubName = function () { return this.name;}
主要是借用了Super构造的代码,来实现sub自己的属性的定义,
但是这样写就可以让每一个实例都有自己的属性和方法,同时也就失去了方法函数的复用性
组合继承
用来解决方法复用的问题
在父类的构造函数中使用动态原型构造或者组合构造的方式,让构造函数中只有属性的赋值定义,方法的定义在原型上
然后在子类中,将子类的prototype指向一个父类的实例,子类的构造函数中借用父类的构造,这样子类每一个实例都有自己的属性,而方法却是共享的。
function Super(name) {
this.name = name;
this.superproperty = true;
}
Super.prototype.getSuperName = function () {
return this.name;
}
function Sub(name) {
Super.call(this,arguments);
this.name = name;
this.subproperty = false;
}
//继承
Sub.prototype = new Super();
// Sub.prototype.constructor = Sub;//如果此处未绑定,上一句重写了原型,Super的实例的constructor指向的自然是Super
Sub.prototype.getSubName = function () { return this.name;}var instance = new Sub("ctc");
原型式继承
另一种继承的实现,只是借助原型可以基于已有对象创建新对象
function object(o) {
function F() {
}
F.prototype = o;
return F;
}
理解:F是一个函数也是一个对象,其原型指向了object()接受的o,返回的F是一个原型指向o的对象。
令:Object.creat()规范化了上述的函数,即Object.creat(o)同样实现了上述代码
寄生式继承
在原型式继承的基础之上,强化增强了这个对象
function creatAnother(o) {
var clone = Object.create(o);
clone.name = "ctc";
clone.sayname = function () {
console.log(this.name);
}
return clone;
}
为对象增加了属性方法等
寄生组合式继承
目的是为了解决组合继承的问题,在组合继承中有起码两次调用Super(),1. Super.call(this,arguments) 2. Sub.prototype = new Super()
其实我们只是想子类的原型继承父类的方法(一般都在父类原型上,因为不会每一个实例都有自己的方法空间)
所以我们可以用原型式继承来只将子类的原型继承父类的原型
function inherit(SubType,SuperType) {
var prototype = Object.create(SuperType);
prototype.constructor = SubType;
SubType.prototype = prototype;
}
将组合继承的
Sub.prototype = new Super();
换成
inherit(Sub,Super);