摘要：該方法實(shí)際上就做了我們上面寄生組合繼承中的工作后面的參數(shù)是給原型對(duì)象添加屬性可選屬性非必填即把自身作為新創(chuàng)建對(duì)象的構(gòu)造函數(shù)。

如何準(zhǔn)確判斷一個(gè)變量是數(shù)組

寫一個(gè)原型鏈繼承的例子

繼承實(shí)現(xiàn)的其他方式

es6 實(shí)現(xiàn)繼承的底層原理是什么

描述new一個(gè)對(duì)象的過程

zepto及其他源碼中如何使用原型鏈

特點(diǎn)：以大寫字母開頭

function Foo(name,age){
    //var obj = {}
    //this = {}
    this.name = name;
    this.age = age;
    this.class = "class1"
    // return this
}

var f1 = new Foo("liming",19);

擴(kuò)展

var o = {} 是 var o = new Object() 的語法糖

var a = [] 是 var a = new Array() 的語法糖

function Foo(){} 相當(dāng)于 var Foo = new Function(){}

五條規(guī)則：

1.所有引用類型（對(duì)象，數(shù)組，函數(shù)）都具有對(duì)象特性，即可以自由擴(kuò)展屬性

2.所有引用類型（對(duì)象，數(shù)組，函數(shù)）都具有一個(gè)__proto__（隱式原型）屬性，是一個(gè)普通對(duì)象

3.所有的函數(shù)都具有prototype（顯式原型）屬性，也是一個(gè)普通對(duì)象

4.所有引用類型（對(duì)象，數(shù)組，函數(shù)）__proto__值指向它構(gòu)造函數(shù)的prototype

5.當(dāng)試圖得到一個(gè)對(duì)象的屬性時(shí)，如果變量本身沒有這個(gè)屬性，則會(huì)去他的__proto__中去找

for (var key in object) {
    //高級(jí)瀏覽器中已經(jīng)屏蔽了來自原型的屬性
    //建議加上判斷保證程序的健壯性
    if (object.hasOwnProperty(key)) {
        console.log(object[key]);
    }
}

obj.__ proto . proto . proto __ ...

Object.prototype === null

instanceof 用于判斷引用類型屬于哪個(gè)構(gòu)造函數(shù)

obj instanceob Foo

實(shí)際意義：判斷 Foo.prototype 在不在 obj的原型鏈上

arr instanceof Array

封裝dom查詢

function Elem(id){
    this.elem = document.getElementById(id);
};

Elem.prototype.html = function(val){
    var elem = this.elem;
    if (val) {
        elem.innerHTML = val;
        return this;
    }else{
        return elem.innerHTML;
    }
}

Elem.prototype.on = function(type,fun){
    var elem = this.elem;
    elem.addEventListener(type,fun);
    return this;
}

var div1 = new Elem("id1");
div1.html("test").on("click",function(){
    console.log("點(diǎn)擊");
})

        var obj = {
            0:"a",
            1:"b",
            arr:[1]
        }
        
        function Foo(arr2){
            this.arr2 = [1]
        }

        Foo.prototype = obj;

        var foo1 = new Foo();
        var foo2 = new Foo();

        foo1.arr.push(2);
        foo1.arr2.push(2);

        console.log(foo2.arr);  //[1,2]
        console.log(foo2.arr2); //[1]

優(yōu)點(diǎn)：實(shí)現(xiàn)簡(jiǎn)單

缺點(diǎn)：

1.無法向父類構(gòu)造函數(shù)傳參

2.同時(shí)new兩個(gè)對(duì)象時(shí)改變一個(gè)對(duì)象的原型中的引用類型的屬性時(shí)，另一個(gè)對(duì)象的該屬性也會(huì)修改。因?yàn)閬碜栽蛯?duì)象的引用屬性是所有實(shí)例共享的。

        function Super(b){
            this.b = b;
            this.fun = function(){}
        }
        function Foo(a,b){
            this.a = a;
            Super.call(this,b);
        }

        var foo1 = new Foo(1,2);
        console.log(foo1.b);

優(yōu)點(diǎn)：可以向父類傳參，子類不會(huì)共享父類的引用屬性

缺點(diǎn)：無法實(shí)現(xiàn)函數(shù)復(fù)用，每個(gè)子類都有新的fun，太多了就會(huì)影響性能，不能繼承父類的原型對(duì)象。

function Super(){
    // 只在此處聲明基本屬性和引用屬性
    this.val = 1;
    this.arr = [1];
}
//  在此處聲明函數(shù)
Super.prototype.fun1 = function(){};
Super.prototype.fun2 = function(){};
//Super.prototype.fun3...
function Sub(){
    Super.call(this);   // 核心
    // ...
}
Sub.prototype = new Super();    

優(yōu)點(diǎn)：不存在引用屬性共享問題，可傳參，函數(shù)可復(fù)用

缺點(diǎn)：父類的屬性會(huì)被實(shí)例化兩次，獲取不到真正實(shí)例父類（無法區(qū)分實(shí)例是父類創(chuàng)建還是父類創(chuàng)建的）

優(yōu)化：

         function Super(b){
            this.b = b;
            this.fun = function(){}
        }

        Super.prototype.c = function(){console.log(1111)}

        function Foo(a,b){
            this.a = a;
            Super.call(this,b);
        }


        Foo.prototype = Super.prototype;
        //修復(fù)構(gòu)造函數(shù)：
        var foo1 = new Foo(1,2);

缺點(diǎn)：無法區(qū)分實(shí)例是父類創(chuàng)建還是子類創(chuàng)建的

         function Super(b){
            this.b = b;
        }

        Super.prototype.c = function(){console.log(1111)}

        function Foo(a,b){
            this.a = a;
            Super.call(this,b);
        }

        var f = new Function();
        f.prototype = Super.prototype;
        Foo.prototype = new f();
        //等同于 Foo.prototype = Object.create(Super.prototype);
        
        var foo1 = new Foo(1,2);

對(duì)父類的prototype進(jìn)行一次寄生，即包裝成一個(gè)空對(duì)象的prototype，再把這個(gè)對(duì)象實(shí)例化出來作為子類的peototype。

缺點(diǎn)：無法區(qū)分實(shí)例是父類創(chuàng)建還是子類創(chuàng)建的

可以添加以下代碼：

Foo.prototype.constructor = Foo

這種解決方法不能用于上面的組合優(yōu)化方法，因?yàn)樽宇惛割愐玫氖峭粋€(gè)原型對(duì)象，修改會(huì)同時(shí)修改。

總結(jié)：

繼承主要是實(shí)現(xiàn)子類對(duì)父類方法，屬性的復(fù)用。

來自原型對(duì)象的引用屬性是所有實(shí)例共享的，所以我們要避免從原型中繼承屬性。

在構(gòu)造函數(shù)中通過call函數(shù)可以繼承父類構(gòu)造函數(shù)的屬性和方法，但是通過這種方式實(shí)例化出來的實(shí)例會(huì)將父類方法多次存儲(chǔ)，影響性能。

通過組合繼承我們使用call繼承屬性，使用原型繼承方法，可以解決以上兩個(gè)問題，但是通過這種方式實(shí)例化出來的對(duì)象會(huì)存儲(chǔ)兩份父類構(gòu)造函數(shù)中的屬性。

用父類的原型構(gòu)造一個(gè)新對(duì)象作為子類的原型，就解決了多次存儲(chǔ)的問題，所以最終的寄生組合繼承就是最佳繼承方式，它的缺點(diǎn)就是書寫起來比較麻煩。

function inherits(ctor, superCtor) {
  ctor.super_ = superCtor;
  ctor.prototype = Object.create(superCtor.prototype, {
    constructor: {
      value: ctor,
      enumerable: false,
      writable: true,
      configurable: true
    }
  });
}; 

function Stream(){
    //...
}

function OutgoingMessage() {
  Stream.call(this);
  //...
}

inherits(OutgoingMessage, Stream);

OutgoingMessage.prototype.setTimeout = ...

以上是寄生組合繼承的一個(gè)實(shí)例。

1.在OutgoingMessage構(gòu)造函數(shù)中通過call繼承Stream構(gòu)造中的屬性。

2.調(diào)用inherits方法繼承Stream原型中的屬性。

3.擴(kuò)展OutgoingMessage自身原型的函數(shù)。

inherits方法中使用了Object.create方法,該方法的作用是通過指定的原型對(duì)象和屬性創(chuàng)建一個(gè)新的對(duì)象。

ctor.prototype=Object.create(superCtor.prototype,{.....});

該方法實(shí)際上就做了我們上面寄生組合繼承中的工作

var f = new Function();
f.prototype =superCtor.prototype;
return new f();

后面的參數(shù)是給原型對(duì)象添加屬性,可選屬性(非必填),即把自身作為新創(chuàng)建對(duì)象的構(gòu)造函數(shù)。

value: 表示constructor 的屬性值；
writable: 表示constructor 的屬性值是否可寫；[默認(rèn)為: false]
enumerable: 表示屬性constructor 是否可以被枚舉；[默認(rèn)為: false]
configurable: 表示屬性constructor 是否可以被配置，例如 對(duì)obj.a做 delete操作是否允許；[默認(rèn)為: false]

參考我這篇文章：https://segmentfault.com/a/11...

創(chuàng)建一個(gè)對(duì)象

{}._proto_ = 構(gòu)造函數(shù).prototype

this指向這個(gè)對(duì)象

執(zhí)行代碼即對(duì)this賦值

返回this

var Zepto = (function(){

    var $,zepto = {}
    
    // ...省略N行代碼...
    
    $ = function(selector, context){
        return zepto.init(selector, context)
    }

    zepto.init = function(selector, context) {
        var dom
        
        // 針對(duì)參數(shù)情況，分別對(duì)dom賦值
        
        // 最終調(diào)用 zepto.Z 返回的數(shù)據(jù)
        return zepto.Z(dom, selector)
    }    

   fnction Z(dom, selector) {
      var i, len = dom ? dom.length : 0
     for (i = 0; i < len; i++) this[i] = dom[i]
      this.length = len
      this.selector = selector || ""
    }

   zepto.Z = function(dom, selector) {
     return new Z(dom, selector)
   }
  
    $.fn = {
        // 里面有若干個(gè)工具函數(shù)
    }
      
  
    zepto.Z.prototype = Z.prototype = $.fn
  
    
    // ...省略N行代碼...
    
    return $
})()

window.Zepto = Zepto
window.$ === undefined && (window.$ = Zepto)