经典原型链、继承解析

原型

我们知道任何一个函数都存在一个prototype属性,他是个对象,这个对象 我们就叫他原型对象
这个原型对象本身也自带两个属性:constructor 和 proto

constructor: 这个属性是指向创建此对象的构造函数的引用,构造函数的实例化对象,也可以通过constuctor属性来访问构造它的那个函数

_proto_: 这个属性指向创建此对象的构造函数的prototype原型对象的引用

  例子:
//我的家族姓莫
function Parent(){
    this.name = 'mo'
}
//我家族是音乐世家
 Parent.prototype.work = function(){
     return 'musicing'
 }
 
 //爸妈生了我
 var me = new Parent()

 //我也要唱歌
 console.log(me.work())   //=>musicing

 //爸爸妈妈又生了二胎
 var myBrother = new Parent()

 //他也会唱歌
 console.log(myBrother.work())  //=>musicing

 //证明我两是否是亲生的
 console.log(me.work() === myBrother.work())  //=>true

解释一波:
    me 和 myBrother 是构造函数Parent()new出来的的一个实例,me 和 myBrother 都有一个隐式属性_proto_,引用Parent() 的prototype属性来得到继承

原型链

在访问 me 的 work 方法时,找不到, 就会顺着_protp_属性往上在构造函数的prototype找,找到了就停止,没找到继续往上到Object.prototype找,再没找到就到null了,自然也找不到就只能返回undifined,这种链式的引用就是原型链,通过原型链实现继承还是很方便的

万一原型链断链呢?

原因:如果对 构造函数 或者 原型链 修改一些方法或者属性的时候,导致函数的constructor不等于创建它的构造函数,那就会断链

如果 先实例再通过 字面量添加或修改,那么后新定义的方法就对先继承的方法或属性就会不在生效,就会断链,这是因为字面量来修改原型时,constructor发生了改变,也就是说该函数指向的创建该函数的构造函数发生了改变,字面量默认的constructor的值是Object(),所以为了避免断链,尽量不要使用字面量重新赋值,修改

 例子:
 //创建一个构造函数Car
function Car(){
 this.brand = '大奔';
}
//大奔 80万
Car.prototype.price = '80';

//我来买一个大奔 先实例
var benCar1 = new Car();
console.log(benCar1.price)  //=>80

//我希望我的大奔 带有翅膀的 能飞
Car.prototype = {
 hasWing: true,
 hasFlying: function(){
     console.log('flying...')
 }
}

var benCar = new Car()

(1) 正常情况下 
console.log(benCar1.brand,benCar1.price,benCar1.hasWing,benCar1.hasFlying,benCar1.constructor)
 //=> 大奔 80 undefined undefined  ƒ Car(){}

(2)字面量添加属性方法时
console.log(benCar.brand,benCar.price,benCar.hasWing,benCar.hasFlying,benCar.constructor) 
//=> 大奔 undefined true ƒ (){} ƒ Object() { [native code] }

继承的几种方式

(1) 原型链继承

原型链继承是通过 new实例化构造函数 赋给子类的原型, 其实实例的子类本身是完全的空对象,所有的属性方法都需要去原型链上找。
例子:

function Grandpa(){
    this.name = 'mo'
}
Grandpa.prototype.work = function(){
     return 'musicing'
 }
 function Parent(){

}
Parent.prototype = new Grandpa()

 var me = new Parent()
 console.log(me.work())   //=>musicing 我找啊找啊原来是Grandpa会musicing
 var myBrother = new Parent()
 console.log(myBrother.work())  //=>musicing

 console.log(me.work() === myBrother.work())  //=>true

(2) 构造函数继承

构造函数继承 通过apply去调用父类的构造函数,达到继承父类的实例属性,对,只能继承属性,要想继承方法 采用寄生组合继承
例子
function Grandpa(firstname){
    this.name = 'mo ' + firstname
}
Grandpa.prototype.work = function(){
     return 'musicing'
 }
 function Parent(firstname){
    Grandpa.apply(this, arguments)
}
Parent.prototype = new Grandpa()

 var me = new Parent('alice')
 console.log(me.work())   //=>musicing
 var myBrother = new Parent('bob')
 console.log(myBrother.work())  //=>musicing

 console.log(me.work() === myBrother.work())  //=>true
 console.log(me.name, myBrother.name,me.name === myBrother.name)//=>mo alice ,mo bob ,false

(3) 寄生组合继承

寄生组合继承是我们经常要用到的,组合了原型和构造函数,结合Object.create(obj),方法对传入的对象进行浅拷贝,这样可以实现对实例属性和原型属性分别进行继承

浅拷贝:仅仅是指向被拷贝的内存地址,如果原地址中对象被改变了,那么浅拷贝出来的对象也会相应改变

例子:
// 寄生组合继承
function Grandpa(firstname){
    this.name = 'mo ' + firstname
}
Grandpa.prototype.work = function(){
     return 'musicing'
 }
 function Parent(firstname){
    Grandpa.apply(this, arguments)
}
// Parent.prototype = new Grandpa()
//改成
Parent.prototype = Object.create(Grandpa.prototype); // Object.create()将父级对象的属性和方法进行引用
Parent.prototype.constructor = Parent;  //将该函数的construnctor指向parent构造函数
console.log(Parent.prototype)

 var me = new Parent('alice')
 var myBrother = new Parent('bob')

 console.log(me.work() === myBrother.work())  //=>true
console.log(me.name, myBrother.name,me.name === myBrother.name)//=>mo alice ,mo bob ,false

好了,有时间还会补充...

你可能感兴趣的:(javascript)