经典原型链、继承解析

yiliang 发布于2019-08-21 18:25 / 1012人阅读

摘要：原型我们知道任何一个函数都存在一个属性，他是个对象，这个对象我们就叫他原型对象这个原型对象本身也自带两个属性和这个属性是指向创建此对象的构造函数的引用，构造函数的实例化对象，也可以通过属性来访问构造它的那个函数这个属性指向创建此对象的构造函

原型

我们知道任何一个函数都存在一个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

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

超融合服务器专线服务原型链继承 js原型链的继承原型继承原型原型链

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/90456.html

前端面试经典题目汇总（持续更新中）

摘要：只要没有被覆盖的话对象原型的属性就能在所有的实例中找到，若整个原型链未找到则返回如何实现继承构造继承原型继承实例继承拷贝继承原型机制或和方法去实现较简单，建议使用构造函数与原型混合方式。 HTML相关问题 1.XHTML和HTML有什么区别 HTML是一种基本的WEB网页设计语言，XHTML是一个基于XML的标记语言最主要的不同：XHTML 元素必须被正确地嵌套。XHTML 元素必须被...

BigNerdCoding 2019-08-29 11:32 评论0 收藏0
前端面试经典题目汇总（持续更新中）

摘要：只要没有被覆盖的话对象原型的属性就能在所有的实例中找到，若整个原型链未找到则返回如何实现继承构造继承原型继承实例继承拷贝继承原型机制或和方法去实现较简单，建议使用构造函数与原型混合方式。 HTML相关问题 1.XHTML和HTML有什么区别 HTML是一种基本的WEB网页设计语言，XHTML是一个基于XML的标记语言最主要的不同：XHTML 元素必须被正确地嵌套。XHTML 元素必须被...

Warren 2019-08-20 12:18 评论0 收藏0
前端面试经典题目汇总（持续更新中）

摘要：只要没有被覆盖的话对象原型的属性就能在所有的实例中找到，若整个原型链未找到则返回如何实现继承构造继承原型继承实例继承拷贝继承原型机制或和方法去实现较简单，建议使用构造函数与原型混合方式。 HTML相关问题 1.XHTML和HTML有什么区别 HTML是一种基本的WEB网页设计语言，XHTML是一个基于XML的标记语言最主要的不同：XHTML 元素必须被正确地嵌套。XHTML 元素必须被...

Tony_Zby 2019-08-01 15:57 评论0 收藏0
JavaScript六种非常经典的对象继承方式

摘要：就是这个原理直接将某个对象直接赋值给构造函数的原型。五寄生式继承重点创建一个仅用于封装继承过程的函数，该函数在内部以某种方式来增强对象，最后返回构造函数。一、原型链继承重点：利用原型让一个引用类型继承另外一个引用类型的属性和方法。构造函数，原型，实例之间的关系：每个构造函数都有一个原型对象，原型对象包含一个指向构造函数的指针，而实例都包含一个指向原型对象的内部指针。 functio...

sunnyxd 2019-08-23 11:40 评论0 收藏0
JavaScript系列--浅析原型链与继承

摘要：综上所述有原型链继承，构造函数继承经典继承，组合继承，寄生继承，寄生组合继承五种方法，寄生组合式继承，集寄生式继承和组合继承的优点于一身是实现基于类型继承的最有效方法。一、前言继承是面向对象（OOP）语言中的一个最为人津津乐道的概念。许多面对对象（OOP）语言都支持两种继承方式:：接口继承和实现继承。接口继承只继承方法签名,而实现继承则继承实际的方法。由于js中方法没有签名...

draveness 2019-08-23 18:06 评论0 收藏0