JavaScript基础概念之----面向对象----继承(深刻)

实现继承主要是依靠原型链来实现的。函数

基本思想是:利用原型 让一个引用类型继承另外一个引用类型的属性和方法。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()会经历三搜索步骤:对象

  • 搜索实例o
  • 搜索B.prototype
  • 搜索A.prototype

全部函数的默认原型都是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(){}
相关文章
相关标签/搜索