经由过程范例继续深切明白原型继续

2019年8月27日 260次阅读 来源: crossea

基于类的继续是大多数人所熟习的，也是比较轻易明白的。当我们构成范例继续的头脑定势后，再次打仗原型继续可能会以为有些新鲜并难以明白。你更可能会吐槽，原型继续基础就不能叫做继续，一点都不面向对象。本人最初也是如许以为的，但深切细致的对照后发明，二者实在并没有实质的差异，只是外表有点不一样罢了。且看下面的剖析。

范例继续

先看一个范例继续的例子，代码以下：

public class A {
    //...
}

public class B extends A {
    //...
}

public class C extends B {
    //...
}

C c = new C();

A、B、C为三个继续关联的类，末了将类C实例化。下面这张图形貌了类和实例的对应关联。左侧为类，右侧为其对应实例。

《经由过程范例继续深切明白原型继续》

我们看到，类C实例化后，内存中不仅存在c对象，同时另有a、b两个对象。由于在java中，当我们在实行new C()操纵时，jvm中会发作以下历程：

  1. 建立A的实例a。

  2. 建立B的实例b，并将实例b的super指针指向a。

  3. 建立C的实例c，并将实例c的super指针指向b。

历程1和历程2对用户是通明的，不须要人工干预，引擎会根据“蓝图”把这两个历程完成。经由过程上图右半部份我们可以看到，super指针将a、b、c三个实例串起来了，这里是完成继续的症结。当我们在运用实例c的某个属性或要领时，若实例c中不存在则会沿着super指针向父类对象查找，直到找到，找不到则失足。这就是继续可以到达复用目标内部机制。看到这里人人也许已联想到原型链了，super所串起来的这个链险些和原型链一样，只是叫法不一样罢了。下面我们就来看看原型继续。

原型继续

《经由过程范例继续深切明白原型继续》

上面是原型继续的示意图。先看图的右半部份，__proto__指针构成的对象链就是原型链。__proto__是一个私有属性，只能看不准接见(某些浏览器看也不给看)。__proto__的作用和前面的super是一样的，原型链完成复用的机制和范例继续也险些是一样的，这里不再反复。有一点不一样就是原型继续中的属性写操纵只会转变当前对象并不会影响原型链上的对象。

怎样去组织原型链呢？看上去要轻微贫苦一些。原型继续内里没有类的观点，我们须要经由过程代码，手动完成这个历程。上图中的A、B、C在原型继续称作组织器。组织器就是一个一般的函数，然则将new操纵符用到组织器上时，它会实行一个叫[[construct]]的历程。大抵以下：

  1. 建立一个空对象obj。

  2. 设置obj的内部属性[[Class]]为Object。

  3. 设置obj的内部属性[[Extensible]]为true。

  4. 设置obj的[[__proto__]]属性：假如函数对象prototype的值为对象则直接赋给obj，不然给予Object的prototype值。

  5. 挪用函数对象的[[Call]]要领并将结果赋给result。

  6. 假如result为对象则返回result,不然返回obj。

从第4条可以看到，组织器天生的对象的__proto__属性会指向组织器的prototype值，这就是我们组织原型链的症结。下面的代码是上图原型链的组织历程。

function A(){
    //...
}

function B(){
    //...
}

function C(){
    //...
}

var a = new A();
B.prototype = a;
var b = new B();
C.prototype = b;
var c = new C();

上述代码虽然能到达目标，但有点烦琐，我们可以将这个历程封装一下。backbone的完成是如许的：

var extend = function(protoProps, staticProps) {
    var parent = this;
    var child;
    if (protoProps && _.has(protoProps, 'constructor')) {
      child = protoProps.constructor;
    } else {
      child = function(){ return parent.apply(this, arguments); };
    }    
    _.extend(child, parent, staticProps);
    child.prototype = _.create(parent.prototype, protoProps);
    child.prototype.constructor = child;
    child.__super__ = parent.prototype;
    return child;
  }

个中_.extend(child, parent, staticProps)是将staticProps和parent对象的属性复制给child。_.create要领的完成也许以下。

_.create = function(prototype, protoProps){
    var F = function(){};
    F.prototype = prototype;
    var result = new F();
    return _.extend(result, protoProps);
}

有了extend要领，我们的代码就可以写成：

    A.extend = extend;
    var B = A.extend({
        //...
    );
    var C = B.extend({
        //...
    );
    var c = new C();

这段代码和范例继续的代码十分相似，经由过程原型继续我们也可以到达范例继续的结果。然则经由过程前面的比较我们发明，继续的实质就实在就是对象的复用。原型继续自身就是以对象为起点斟酌的，所以大多时刻我们并不一定要根据范例继续的头脑斟酌问题。而且js是弱范例，对象的操纵也极为自在，上述的_.create要领多是js内里完成继续的一个更简朴有用的要领。

总结

前面议论了两种继续体式格局，可以看到，继续的实质实在就是对象的复用。本人以为原型继续越发的简朴和明白，它直接就是从对象的角度斟酌问题。固然，假如你须要一个异常壮大的继续系统，你也可以组织出一个相似范例继续的形式。相对来说，本人以为原型继续更天真和自在些，也是异常奇妙和奇特的。

    原文作者：crossea
    原文地址: https://segmentfault.com/a/1190000003879113
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞