实现继承主要是依靠原型链来实现的。函数
基本思想是:利用原型 让一个引用类型继承另外一个引用类型的属性和方法。this
原型链继承spa
有两个构造函数 A 和 B,若是,让A的原型对象等于B的实例,结果会是怎么样呢?prototype
此时 A 的原型对象将包含一个指向 B 的原型的指针,相应地,B 的原型中也可包含着指向 C 的指针。假如 C 的原型又是 D 的实例,那么上述关系依然成立,如此层层递进,就构成了实例与原型的链条。这就是原型链的基本概念。指针
继承实现的本质,就是重写原型对象,代之以一个新类型的实例。code
function A(){ //... } A.prototype.getA = function(){ //... } function B(){ //... } B.prototype = new A() //继承了A B.prototype.getB = function(){ //... } var o = new B(); console.log(o.getA()) //在B构造函数建立的对象o中,执行A构造函数的方法
调用o.getA()会经历三搜索步骤:对象
全部函数的默认原型都是Object的实例,所以默认原型都会包含一个内部指针,指向Object.prototype。blog
instanceof 操做符 确认实例 是否 原型链中出现过的构造函数的实例继承
o instanceof Object //true o instanceof A //true o instanceof B //true
isPrototypeOf()方法ip
Object.prototype.isPrototypeOf(o) //true A.prototype.isPrototypeOf(o) //true B.prototype.isPrototypeOf(o) //true
给原型添加方法的代码,必定要放在替换原型的语句以后。
function A(){} A.prototype.getA = function(){} function B(){} B.prototype = new A() //继承了A //新增的方法 B.prototype.getB = function(){} //重写超类中的方法 B.prototype.getA = function(){} var o = new B(); console.log(o.getA()) //重写的方法会屏蔽超类中的方法
经过原型链实现继承时,不能使用对象字面量建立原型方法。由于这样会重写原型链。
function A(){} A.prototype.getA = function(){} function B(){} B.prototype = new A() //继承了A B.prototype = { getB:function(){}, getOther:function(){} } var o = new B(); console.log(o.getA()) //报错
缺点:
构造函数继承
基本思想是:在子类型构造函数的内部调用超类型构造函数。
function A(){ this.arr = [1,2,3] } function B(){ A.call(this) //继承了A } var o1 = new B(); o1.arr.push(3); console.log(o1.arr) //1,2,3,4 var o2 = new B() console.log(o2.arr) //1,2,3
能够在子类型构造函数中向超类型构造函数传递参数
function A(name){ this.name = name; } function B(){ A.call(this,'adhehe') //继承了A,同时传递参数 this.age = 23; } var o = new B(); console.log(o.name) //adhehe console.log(o.age) //23
缺点:
组合继承(原型链继承 与 构造函数继承 组合)
基本思想是:使用原型链实现对原型属性和方法的继承,使用构造函数实现对实例属性的继承。
组合继承避免了原型链和构造函数的缺陷,融合了它们的优势,是JavaScript中最经常使用的继承模式。而且,instanceof和isPrototypeOf()也可以用于识别基于组合继承建立的对象。
function A(name){ this.name = name; this.arr = [1,2,3]; } A.prototype.getName = function(){} function B(name,age){ A.call(this,name) //继承属性 this.age = age; } //继承方法 B.prototype = new A(); B.ptototype.constructor = B; B.ptototype.getAge = function(){} var o1 = new B('adhehe',23); o1.arr.push(4) o1.arr //1,2,3,4 o1.getName() //adhehe o1.getAge() //23 var o2 = new B('Jhone',45); o2.arr //1,2,3 o2.getName() //Jhone o2.getAge() //45
缺点:不管在什么状况下,都会调用两次超类型构造函数。一次是建立子类型原型的时候,一次是在子类型构造函数内部。
原型式继承
借助原型能够基于已有的对象建立新对象,同时还没必要所以建立自定义类型。
这种原型式继承,要求必须有一个对象能够做为另外一个对象的基础。
function Object(o){ function F(){} F.prototype = o; return new F(); }
var person = { name:'adhehe', colors:['red','blue','yellow'] } var o1 = object(person); o1.name = 'Greg'; o1.colors.push('pink'); var o2 = object(person); o2.name = 'Linda'; o2.colors.push('gray'); console.log(person.colors) //'red','blue','yellow','pink','gray'
ECMAScript5新增Object.create()方法规范化了原型式继承
var person = { name:'adhehe', colors:['red','blue','yellow'] } var o1 = Object.create(person) o1.name = 'Greg'; o1.colors.push('pink'); var o2 = Object.create(person); o2.name = 'Linda'; o2.colors.push('gray'); console.log(person.colors) //'red','blue','yellow','pink','gray'
Object.create()方法的第二个参数 与 Object.defineProperties()方法的第二个参数格式相同:每一个属性都是经过本身的描述符定义的。以这种方式指定的任何属性都会覆盖原型对象上的同名属性。、
var person = { name:'adhehe', colors:['red','blue','yellow'] } var o = Object.create(person,{ name:{ value:'Greg' } }) console.log(o.name) //Greg
寄生式继承
与寄生构造函数和工厂模式相似,即建立一个仅用于封装继承过程的函数,该函数在内部以某种方式来加强对象,最后再返回对象。
function object(o){ function F(){} F.prototype = o; return new F(): } function createPreson(arg){ var clone = object(arg); clone.sayHi = function(){} return clone; } var preson = { name:'adhehe', colors:['red','blue','yellow'] } var o = createPerson(person); o.sayHi();
任何可以返回新对象的函数都适用于此模式。
寄生组合式继承
经过借用构造函数来继承属性,经过原型链的混成形式来继承方法。
基本思想是:没必要为了指定子类型的原型而调用超类型的构造函数,咱们须要的无非是超类型原型的一个副本而已。
function person(sub,sup){ var ptototype = object(sup.prototype); //建立对象 prototype.constructor = sub; //加强对象 sub.prototype = prototype; //指定对象 } //第一步,建立超类型原型的一个副本 //第二步,为建立的副本添加constructor属性,弥补因重写原型而失去的默认的constructor属性 //最后一步,将新建立的对象赋值给子类型的原型
function Sup(name){ this.name = name; this.colors = ['red','blue','yellow'] } Sup.prototype.sayName = function(){} function Sub(name,age){ Sup.call(this,name) this.age = age; } person(sub,sup); sub.prototype.sayAge = function(){}