专栏首页前端之旅深入理解原型和继承

深入理解原型和继承

这几天在掘金上阅读到了一篇关于原型的文章,角度较之前看到的几篇博客都不一样,顿时感觉我对于原型的知识点还没有完全吃透。鉴于本篇文章很可能会进行不定期的修订和拓展,故在此附上更新日志,以简单记录我在学习上的认知更新。

2019.2.24

  • js继承的几种实现方式

2019.2.19

  • 完善关于constructor属性的介绍
  • 比对new和Object.create()的本质区别
  • 纠正隐式原型的错误写法(之前没看仔细,一直写错,今天报错才发现)

1.创建对象的方法

在了解原型链之前,首先先了解一下创建对象的几种方式,为后面做个铺垫。介绍以下三种。

代码:

    <script type="text/javascript">
    // 第一种方式:字面量
    var o1 = {name: 'o1'}
    var o2 = new Object({name: 'o2'})
    // 第二种方式:构造函数
    var M = function (name) { this.name = name; }
    var o3 = new M('o3')
    // 第三种方式:Object.create
    var p = {name: 'p'}
    var o4 = Object.create(p)

    console.log(o1)
    console.log(o2)
    console.log(o3)
    console.log(o4)

    </script>

打印结果:

2.构造函数、实例、原型、原型链

先来一张图简单了解一下

2.1 原型、实例、构造函数

首先是代码

    var M = function (name) { this.name = name; }
    var o3 = new M('o3')
  • 实例就是通过new一个构造函数生成的对象。在本例中o3就是实例,M就是构造函数。
  • 每个函数都有prorotype属性,每个对象都有proto 属性(隐式原型,读作dunder prototype)
  • 从上图中可以知道,实例的protpo指向原型对象。
  • 从上图中可以知道,实例的构造函数的prototype也是指向原型对象。
  • 原型对象的construor指向构造函数。 再来通过下面这个图来理解一下

2.2 原型链

简单理解就是原型组成的链,实例的proto就是原型,而原型也是一个对象,也有proto属性,它会指向另一个原型…………就这样可以一直通过proto向上找,这就是原型链,当向上找找到Object这个构造函数的原型(即null)时,这条原型链就算到头了。也就是说,原型链的尽头是null 。

2.3 原型的作用

原型的存在是为了帮助实现继承。我们先来思考一个问题:假如现在通过一个构造函数创建了多个实例,想要给它们添加同一个方法,该怎么做呢?

1.给每个实例去添加。太过麻烦,并不是一个明智的选择; 2.在构造函数的内部添加方法。这样做的话在每次用构造函数创建实例时都会大量产生方法的副本,这些方法副本功能一样,实际却是不同的。这会影响性能,且不利于代码复用; 3.这时,就该用上原型了。只要给构造函数的原型添加一个方法,那么构造函数的所有实例便都有了这个方法。接着上面的例子继续演示:

    function M(name) {this.name = name;}
    var o3 = new M('o3')
    var o5 = new M('o5')
    M.prototype.say=furnction(){
    console.log('hello world')}
     o3.say()
     o5.say()

     console.log(o3.say()==o5.say());   //  true

打印结果

按照JS引擎的分析方式,在访问一个实例的方法时,首先在实例本身中找,如果找到了就说明其构造函数先前是有定义这个方法的(this);如果没找到就去实例的原型中找,还没找到就再沿着原型链往上找,直到找到。当然,不止方法,属性也是可以继承自原型的。

那么怎么判断属性是实例本身具有的还是继承的?对实例用 hasOwnProperty( )方法即可。那么实例为何有这个方法?同样是继承来的。 由于所有的对象的原型链都会找到追溯到Object.prototype,因此所有的对象都会有Object.prototype的方法,其中就包括 hasOwnProperty( )方法 。

2.4 访问原型

可以用obj.prototypeobj.__proto__,或者obj.getPrototypeOf()。这里重点说后面两个。 __proto__属性在 ES6 时才被标准化,以确保 Web 浏览器的兼容性,但是不推荐使用,更不推荐通过这种方式修改实例的原型,除了标准化的原因之外还有性能问题。 为了更好的支持,推荐使用 Object.getPrototypeOf()。

2.5 原型、构造函数、实例、Function、Object的关系

前面我们给出了一幅图简单梳理了一下关系,但想追本溯源,光靠那张图是不够的。下面我们给出另一张更详细的图。请先记住,Function和Object 是特殊的构造函数。

首先从构造函数Foo(或任意一个普通构造函数)出发,它创建了实例f1和f2等,而实例的__proto__指向了Foo.prototype这个原型,该原型的__proto__向上再次指向其他构造函数的原型,一直向上,最终指向Object这个构造函数的原型,即Object.prototype。而Object.prototype的 __proto__指向了null,这时我们说到达了原型链的终点null。回过头看,该原型又被Object构造函数的实例的__proto__指向,而函数的实例就是我们通常通过字面量创建的那些对象,也即是图中的o1,o2。那么,普通构造函数(这里指Foo)和特殊构造函数Object又来自于哪里?答案是,来自于另一个特殊构造函数Function。

实际上,所有的函数都是由Function函数创建的实例,而构造函数当然也是函数,所以也来自于Function。从图中可以看到,实例Foo的__proto__和实例Object的__proto__ 都指向了 Function的prototype,即Function.prototype 。

既然所有的函数都是由Function函数创建的实例,那么Function又是怎么来的?答案是,Function自己创造了自己。它既作为创造其他实例函数的构造函数而存在,也作为实例函数而存在,所以可以在图上看到作为实例的Function的__proto__ 指向了作为构造函数的Function的prototype,

Function.__proto__ ===Function.prototype

正如我们前面所说的,Function.prototype的__proto__也像其他构造函数.prototype的__proto__一样,最终指向Object.porototype,而Object.porototype的__proto__最终指向null,原型链结束。

可以发现,经过简单梳理,这几者的关系没有我们想象的那么复杂。一句话,看懂这幅图就够了。

3.instanceof的原理

instanceof 沿着 实例—> proto —> …….. 这条线来找,同时沿着 实例的构造函数的prototype—>proto —> …….. 这条线来找,如果两条线能找到同一个引用,即同一个对象,那么就返回true。如果找到终点还未重合,则返回false。如下图,很显然 f1 instanceof Object 成立

注意:正因为 instanceof 的原理如上所述,因此实例的instanceof在比较的时候,与原型链上向上找的的构造函数相比都是true。

继续上面的代码

那怎么判断实例是由哪个构造函数生成的呢?这时候就要用到constructor了。 实例的原型的构造函数, obj.proto.constructor

4.constructor属性

4.1 定义:

构造函数的prototype属性指向它的原型对象,在原型对象中有一个constructor属性,指向该构造函数。值类型(除了null和undefined,这两者不具有这个属性)的constructor是只读的,不可修改,引用类型的constructor是可修改的,例如5.2提到的修复指向。

4.2 修复constructor的指向:

为了实现从父类到子类方法的继承,一般会重写构造函数的原型,如:

function Person(){
    .........
}
function Student(){
    .........
}
Student.prototype = new Person()
var student = new Obj()

这将使得实例student具有构造函数Person的方法,但同时也会导致constructor的指向出现问题,造成继承链的紊乱,因此为了修复这个错误指向,需要显式指定obj.prototype.constructor = obj 。拿下面例子说明:

未重写原型对象之前,实例化了一个dog;第6行重写了原型对象,使其指向另一个实例(等式右边是字面量,因此可以看作是由Object构造函数实例化出来的一个对象),之后实例化了一个cat。

查看dog和cat的constructor:

    console.log(dog.constructor);        //function Animal()
    console.log(cat.constructor);         //function Object()
    dog.say();   //wan
    cat.say();    //miao

首先,构造函数没有constructor属性,这导致了它构造的实例也没有constructor属性,所以,实例将沿着原型链(注意,构造函数不算在原型链里)向上追溯对应的原型对象的constructor属性。dog.constructor可以指向原来的构造函数,说明原来的原型对象还存在;而cat.constructor 指向另一个构造函数,是因为Animal( )的原型被重写,并且作为Object( )构造函数的一个实例而存在,那么由cat实例出发,向上进行constructor属性追溯的时候,最终会找到Object( ) 构造函数。同样的,正因为原型重写前后创建的实例分别对应了初始原型和新的原型,所以我们可以对旧实例调用初始原型的方法、对新实例调用新的原型的方法,放在本例子中,就表现为dog依然可以调用say( )方法发出wan,而cat也可以调用say( )方法发出miao 。

总结: 重写原型对象之后,会切断构造函数与最初原型之间的连接,使新构造的实例对象的原型指向重写的原型,而先前构造的实例对象的原型还是指向最初原型。在这种情况下,先前的实例对象可以使用最初原型的方法,新的实例对象可以使用重写的原型的方法。

5. new 和 Object.create():

这里,让我们回到文章开头提到的创建对象的三种方式。重点介绍后两种。

5.1 new

new一个构造函数时,实际发生的过程是:

var o={};
o.__proto__=M.prototype
M.call(o)
  • 第一步,创建一个空对象o;
  • 第二步,令空对象的proto指向构造函数M的prototype;
  • 第三步,令构造函数M中的this指针指向o,使得o具有M的属性或方法,如果M无返回值或返回的不是对象,则最后会返回o 。

在这里要注意下面这个坑:

var Base = function(){
this.a = 2;
};
console.log(Base.a);    

构造函数就好比印钞机,而它创建的实例就好比钞票。构造函数中的this.xxxx都是为了实例而准备的属性和方法,这些this在构造函数内,但并不指向构造函数,而是在new构造函数执行的时候转而指向新实例。构造函数自身没有这些属性和方法,像上面那样调用Base的a属性是会报错的,Base根本没有a属性。

手动实现new(方法一):

下面根据new的工作原理通过代码手动实现一下new运算符

    var new2 = function (func) {
    //创建一个空对象,并链接到原型    
    var o = Object.create(func.prototype); 
    //改变func中的this指向,把func的结果赋给k   
    var k = func.call(o);         
    //判断func是否显式返回对象
    return typeof k === 'object' ? k : o;

验证

不难看出,我们手动编写的new2和new运算符的作用是一样的。

手动实现new(方法二):

考虑到构造函数本身需要传参,这里提供第二种手写new的方法

function new3(){
    // 获得构造函数func(arguments的第一个参数)
    var func = [].shift.call(arguments);
    // 创建一个空对象,并链接到原型
    var o = Object.create(func.prototype);
    // 改变func中的this指向,把func的结果赋给k 
    var k = func.call(o,arguments);
    // 判断func是否显式返回对象
    return k instanceof Object ? k : o;
};

function M(){....}
// 使用内置new
var m = new M(....)
// 使用手写new
var m = new3(M,.....)

这里要注意数组的shift()方法,它可以删去数组的第一个元素并返回该元素。但是arguments是类数组的对象,无法直接使用这个方法,所以我们使用[].shift.call(arguments),意思是从参数列表(包括构造函数、构造函数的参数)中删去并返回第一个参数(构造函数),将其赋给func,之后的arguments将只包含构造函数func的参数。

5.2 Object.create()

Object.create()方法创建一个新对象(实例),并使用现有的对象(参数)作为新创建的对象的proto 也就是说,这个方法可以起到指定原型的作用。

执行Object.create() 时,实际发生的过程是:

Object.create =  function (o) {
    var F = function () {};
    F.prototype = o;
    return new F();
};
  • 第一步,创建空的构造函数;
  • 第二步,令构造函数的prototype指向传入的对象; 实际上也相当于 令新实例的proto指向传入的对象
  • 第三步,实例化一个对象并返回

这里,如果Object.create()接受的参数是null,即var obj = Object.create(null),则obj是真正意义上的空对象,不具有hasOwnProperty(),toString()等方法或属性。

6 继承的7种方式

6.1.原型链继承

  • 核心:重写子类原型,代之以父类的实例
function Person(){
    this.age=[6,12,24];
}
function Worker(){}
Worker.prototype = new Person();
  • 缺点: 创建子类实例时,无法向父类构造函数传参; 对一个子类实例的引用类型属性的操作将会影响其他子类实例,即引用属性共享
var worker1 = new Worker()
var worker2 = new Worker()
worker1.age.push(48)
alert(worker1.age)   //[6,12,24,48]
alert(worker2.age)    //[6,12,24,48]

6.2.借用构造函数继承

又称为冒充继承、经典继承、伪造对象继承

  • 核心:使用父类的构造函数来增强子类实例,等同于复制父类的实例属性给子类(不使用原型)
function Person(name){
    this.age=[6,12,24];
    this.name=name;
}
function Worker(name){
    Person.call(this,name);
}
var worker1 = new Worker()
var worker2 = new Worker()
worker1.age.push(48)
alert(worker1.age)   //[6,12,24,48]
alert(worker2.age)    //[6,12,24]
  • 缺点:虽然消除了原型链继承的缺点,但是不利于实现函数复用,每个子类都有父类实例函数的副本,影响性能。

6.3.组合继承

  • 核心:原型链继承+借用构造函数继承。即使用原型链实现对原型属性和方法的继承,通过借用构造函数来实现对实例属性的继承.
function Person(){
    this.age=[6,12,24];
}
Person.prototype.shout=function(){
    alert("Ahhhhhh");
}
function Worker(){
    Person.call(this);
    ...其余新增属性。。。
}
Worker.prototype=new Person()
Worker.prototype.constructor=Worker  //别忘记修正constructor的指向
var worker1 = new Worker()
  • 缺点:很常用的继承方式,但也有缺点,就是代码第11、13行合计调用了两次父类函数,造成了不必要的消耗。

6.4.原型式继承

用到了object(),规范化之后即为Object.create()

  • 核心:利用Object.create()对传入其中的对象进行浅拷贝
var Person = {
    age: [6,12,24]
}
var worker1 = Object.create(Person)
var worker2 = Object.create(Person)
  • 缺点:和原型链继承一样,存在引用属性共享的问题。
worker1.age.push(48)
alert(worker1.age)   //[6,12,24,48]
alert(worker2.age)   //[6,12,24,48]

原因很好解释,因为worker1无age属性,因此向它的原型查找,它的原型恰好就是Person对象。因此实际上是在改动Person的age属性。

6.5.寄生继承

  • 核心:创建一个函数用于封装继承的过程,在函数内部增强对象,最后将其返回
var Person = {
    age: [6,12,24]
}
function createAnother(Person){
    var worker0 = Object.create(Person);
    worker0.shout = function(){
        alert("Ahhhhh");
    };
    return worker0;
}
var worker1 = createAnother(Person)
worker1.shout()
  • 缺点:和原型链继承一样,存在引用属性共享的问题;和经典继承一样,无法实现函数复用

6.6.寄生组合继承

  • 核心:结合寄生式继承和组合继承的优点,避免为了指定子类的原型而二次调用父类的构造函数
//封装函数。功能:在避免二次调用父类函数的前提下令子类原型指向父类实例

function inheritPrototype(subType, superType){
   var obj = Object.create(superType.prototype);   
   subType.prototype = obj; 
   subType.prototype.constructor = subType;  //修正constructor的指向
}

// 父类初始化实例属性和原型属性
function Person(){
  this.age=[6,12,24]
}
Person.prototype.shout = function(){
  alert("Ahhhhhh");
};

// 借用构造函数传递增强子类实例属性(支持传参和避免篡改)
function Worker(){
  Person.call(this);
}

// 调用函数,令子类原型指向父类实例
inheritPrototype(Worker, Person);
  • 优点:基本完美的继承方式,无任何缺点,也是目前库实现的方式。

6.7.extends类继承

// 父类
class Person {
    constructor(name,age) {    
        this.name = name;
        this.age = age;
    }
    shout() {
        alert("Ahhhhhh");
    }
}
//子类继承父类
class Worker extends Person{
    constructor(name,age,job){
        super(name,age);  
        this.job = job;
    }
    work() {
        alert("I am working");
    }
}
  • 解释:可以看作是ES6新增的语法糖,使得js中继承的写法更趋向于传统的面向对象语言。super是关键字,代表父类构造函数,只有在子类的构造函数中调用super()函数,才能让父类构造出this给子类去丰富。

参考: http://www.cnblogs.com/wangfupeng1988/p/3978131.html https://www.cnblogs.com/chengzp/p/prototype.html https://juejin.im/post/5c6a9c10f265da2db87b98f3 https://www.cnblogs.com/94pm/p/9113434.html https://segmentfault.com/a/1190000016891009

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 操作系统学习笔记-9:调度

    调度研究的问题是:面对有限的资源,如何处理任务执行的先后顺序。对于处理机调度来说,这个资源就是有限的处理机,而任务就是多个进程。故处理机调度研究的问题是:面对有...

    Chor
  • Vue 组件(三):关于单向数据流的简单理解

    虽然 v-model 是双向绑定,但 Vue 实际上是单向数据流。我们看一个例子: 假设现在想要用子组件的 prop 做一个双向绑定,那么我们的代码可能会这么写...

    Chor
  • DOM Core 与 HTML-DOM

    DOM(文档对象模型)是由W3C制定的一套访问和操作XML(eXtensible Markup Language)文档的标准,即API。比如DOM告诉JavaS...

    Chor
  • 图解原型和原型链

    原型和原型链是 JS 中不可避免需要碰到的知识点?,本文使用图片思维导图的形式缕一缕原型、原型链、实例、构造函数等等概念之间的关系?

    JS菌
  • 秒懂JS对象、构造器函数和原型对象之间的关系

    学习JS的过程中,想要掌握面向对象的程序设计风格,对象模型(原型和继承)是其中的重点和难点,拜读了各类经典书籍和各位前辈的技术文章,感觉都太过高深,花费了不少时...

    小古哥
  • 小程序和App开发的区别和共同点

    齿轮易创说互联网
  • GO语言常用的文件读取方式

    本文实例讲述了GO语言常用的文件读取方式。分享给大家供大家参考。具体分析如下: Golang 的文件读取方法很多,刚上手时不知道怎么选择,所以贴在此处便后速查。...

    李海彬
  • GO语言常用的文件读取方式

    本文实例讲述了GO语言常用的文件读取方式。分享给大家供大家参考。具体分析如下: Golang 的文件读取方法很多,刚上手时不知道怎么选择,所以贴在此处便后速查。...

    李海彬
  • 前端之 JavaScript 知识点小结

    当你需要有跨域的请求操作时发送请求给后端,让后端帮你代为请求,然后最后将获取的结果发送给你。

    IT技术小咖
  • Android P-Slices特性实践

      在2018年谷歌I/O开发者大会上,谷歌发布了万众期待的Android最新版本-Android P。Slice作为Android P版本更新的一大功能,其使...

    Android架构

扫码关注云+社区

领取腾讯云代金券