摘要：返回一個(gè)對(duì)象先說一個(gè)最常用的方法構(gòu)造函數(shù)獲取所有節(jié)點(diǎn)獲取節(jié)點(diǎn)的長(zhǎng)度作用于鏈?zhǔn)秸{(diào)用測(cè)試上面的代碼就可以實(shí)現(xiàn)的效果因?yàn)槲覜]讀過源碼。

es5版本：(過兩天寫es6 版本的)
由淺入深地講,
先說使用,

function person(age, sex) {
        this.age = age;
        this.sex = sex;
        this.clothes = [];
    }
    
     person.prototype.addCloud = function(cloth) {
           this.clothes.push(cloth);
    }  // 給對(duì)象增加增添服裝的方法
    
    var a = new person(18, 0); // a  = {age: 18, sex: 0, clothes: []}， a 現(xiàn)在就是一個(gè)18歲的小女孩了
    var b = new person(19, 1); // b  = {age: 19, sex: 1, clothes: []}， b 現(xiàn)在就是一個(gè)19歲的小男孩了
    
    a.addCloud("redCloth") // a = {age: 18, sex: 0, clothes: ["redCloth"]},a新添 紅色衣服 

以上內(nèi)容是原型最簡(jiǎn)單的使用，相當(dāng)于構(gòu)造一個(gè)對(duì)象，person被稱為構(gòu)造函數(shù)，new person()被稱為實(shí)例化，a,b被稱為實(shí)例對(duì)象

稍微增加點(diǎn)難度

  person.prototype.sayHello = function(word) {
      console.log( "I am " + this.age + "years old!" + word);
  }
  
  a.sayHello("nice to meet you"); //I am 18years old!nice to meet you

這里輸出了a的一個(gè)屬性age;

再增加一點(diǎn)難度，插個(gè)題外話，講一下this 的指向問題。
這里調(diào)用實(shí)例對(duì)象的age，在聲明方法的時(shí)候，是用的this。剛剛增添衣服的時(shí)候，也是用的this,原因是因?yàn)閍調(diào)用的這個(gè)方法，要是寫一個(gè)

  var c = a.sayHello;
  c("nice to meet you") //I am undefinedyears!nice to meet you
  那么如果想像剛剛一樣的執(zhí)行效果有以下四種方法
  1.window.age = a.age;
  2.c.bind(a)("nice to meet you");
  3.c.call(a, "nice to meet you");
  4.c.apply(a, ["nice to meet you"]);

稍微增加點(diǎn)難度，實(shí)現(xiàn)一個(gè)jQuery的效果;
以前經(jīng)常有人問為什么JQ不能混搭原生js寫，這里也將作出解答。

   
  
測(cè)試
  

上面的代碼就可以實(shí)現(xiàn)jquery 的效果（因?yàn)槲覜]讀過jquery 源碼。所以就不胡亂判斷jquery 是不是也用這個(gè)原理）
說一下為什么jq 不能和 原生js 混搭用
從上面的內(nèi)容不難看出，$之后返回的是一個(gè)實(shí)例化對(duì)象，而不是一個(gè)或多個(gè)節(jié)點(diǎn)。所以實(shí)際上我們并不是直接去操作節(jié)點(diǎn)，而且通知這個(gè)實(shí)例化對(duì)象，這個(gè)對(duì)象再去處理的節(jié)點(diǎn)。
上面click之后有一個(gè)return this ， 這個(gè)是鏈?zhǔn)秸{(diào)用的核心。所謂的鏈?zhǔn)秸{(diào)用，表面上是一個(gè)個(gè)調(diào)用下去，比如
$().click(1).click(2)
實(shí)際上可以理解為 click完成后 返回到 $ ，然后再去click ,也就是

$().click(1) =>返回 $() 然后=> $().click(2);

如果再深入一點(diǎn)說

$()創(chuàng)建$對(duì)象 -> 對(duì)象$.click(1)執(zhí)行1中事件并拋出執(zhí)行結(jié)果---$對(duì)象 -> click(1)拋出的結(jié)果$對(duì)象再去執(zhí)行click(2)的事件，并拋出執(zhí)行結(jié)果---$對(duì)象

上面講了創(chuàng)造一個(gè)對(duì)象，下面說一原型鏈

原型鏈這方面有兩個(gè)關(guān)鍵詞 __proto__ 以及 prototype

前者是針對(duì)于實(shí)例化對(duì)象的，后者是針對(duì)于構(gòu)造函數(shù)的

寫成代碼

    function test() {}
    
    new test().__proto__ == test.prototype; //true

這個(gè)如果說到內(nèi)存層次的話，就是他兩公用的一個(gè)內(nèi)存，如果有很多實(shí)例化對(duì)象的話，就是他們__proto__的指針都指向這塊內(nèi)存地址。

這里有一個(gè)知識(shí)點(diǎn)。

一個(gè)對(duì)象，如果自身屬性里面沒有，就會(huì)去 __proto__屬性里面去搜索

就跟員工一樣，有房子住自己房子，沒房子就住集體宿舍。自己買了高配電腦就用自己的，沒買就用公司的低配電腦。實(shí)例化對(duì)象.__proto__就像員工瞅瞅公司有啥公用物品，構(gòu)造函數(shù).prototype就是公司給員工購(gòu)買啥公用物品， 所以實(shí)例化對(duì)象.__proto__ 也就和 構(gòu)造函數(shù).prototype指向一塊了

所以 即便test 已經(jīng)實(shí)例化了。如果 test.prototype增加一個(gè)屬性， 實(shí)例化的test依舊會(huì)獲得這個(gè)屬性。

function test() {}
 var x = new test();
 console.log(x.age) // undefined
 test.prototype.age = 5;
 console.log(x.age) // 5

如果代碼寫成這樣

function test() {}
 var x = new test();
 console.log(x.age) // undefined
 test.prototype.age = 5;
 x.age = 10;
 console.log(x.age) // 10

所以 x.age 實(shí)際上搜索的是 x.__proto__.age

話都說到這份上了，我就隨便聊下繼承吧。

最簡(jiǎn)單的繼承，合二為一。

    function test() {}
    test.prototype.age = 5;
    function newTest() {}
    newTest.prototype = new test();
    new newTest().age//5

講下這個(gè)繼承的原理。 剛剛說過了
一個(gè)對(duì)象，如果自身屬性里面沒有，就會(huì)去 __proto__屬性里面去搜索
那么new NewTest()的__proto__也就是 new test();
new Newtest()里面沒有的，就去__proto__里面（new test()）里面找
new test()沒有的就去new test()的 __proto__里面找，然后就找到了test的prototype
當(dāng)然這個(gè)繼承他是沒有靈魂的，因?yàn)閠est變化了newTest 也會(huì)變。

call繼承,一次性產(chǎn)品

    function test() {
        this.sex = 0;
    }
    function newTest() {
        this.sex = 1;
        test.call(this);
    }
    new newTest().sex//0

call 我以前對(duì)他有過很多的理解，后來終于想到了一個(gè)最簡(jiǎn)單的理解,就是洗腦，而且是強(qiáng)制性的，有的替換，沒有的，送你；
call的常用方法 func.call(小a, func參數(shù))；
func 大熱天跑到了小a家里，問小a 有沒有扇子，借過來扇了扇之后，對(duì)小a說他的扇子太破，他這邊有個(gè)新的，強(qiáng)制塞給了小a，并收取了小a兩塊錢
寫成代碼

 function func(money) {
     console.log(this.fan);
     this.fan= "new_fan";
     this.money -= money;
     console.log(this.fan);
 }
 
 var obj_a  = {
     money: 10,
     fan: "pretty_fan"
 }
 
 func.call(obj_a, 2);
 console.log(obj_a);
     //pretty_fan
     //new_fan
     //{money: 8, fan: "new_fan"}

繼續(xù)聊繼承，call 這個(gè)繼承也是不怎么有靈魂的繼承，說白了就是把別人的東西都替換成自己的東西，別人沒有的，給別人，弄不好還被套路一波。但是繼承不到prototype里面的。

有一個(gè)繼承用Object.create()去繼承。。。
這個(gè)看上去比上面的高檔不少，實(shí)際上也沒什么用；

互不干擾式繼承

    這個(gè)就顯得比較有靈魂，因?yàn)閱渭兝^承，而且還不會(huì)被干擾
    c = JSON.parse(JSON.stringify(new test()))；
    因?yàn)闀?huì)拷貝不到里面不可遍歷的屬性
    所以再合并一下之前的__proto__就行了。
    newTest.prototype = Object.assign(new test().__proto__, c);

至于其他各種花里胡哨的繼承，網(wǎng)上一查一堆，我就不多介紹了，反正也就是花架子而已