體驗javascript之美第七課 理解原型鏈和擴展原型方法

概述

經過上節課的學習，你們已經會用一種json的方式定義對象了，其實這個就是傳說中的單體模式，固然這個你們不用記，關於設計模式暫時不用瞭解。可是總感受哪裏跟你日常用的或者聽到的不同吧，好比好像js據說有什麼原型繼承，還有它的對象好像跟傳統的js對象不同什麼的。好，今天我就讓你完全明白裏面的花花草草。

1.原型鏈理解

第一件事你不用管其餘語言，一句話，你只要記住js裏面的對象包含一個原型，原型是啥，就是另一個對象。

舉個例子：

你天天騎着自行車去上學，而後你車子壞了咋弄，要麼去本身家的車棚子裏推一輛繼續騎，要麼從車棚子裏找到工具修修。

原型就至關於你家的車棚子，而你的那個自行車就是對象。

自行車上的書包是你人爲加上去的，而螺絲刀、和輪胎有些是你自行車必須有的東西，有些是修理你自行車的東西。好，咱們回到代碼表示一下。

var bike = {
                車筐:"書包"
            };
            console.log(bike);//Object {車筐: "書包"}
            //怎麼看車棚子，也就是原型，裏面放着各類方法和屬性
            console.log(bike.__proto__)

記住，這個車棚裏面有各類工具和零件，很拽，還能生產自行車。理解到這個程度就好了，有一天你放學回家了到家發現你的書包不見了，你怎麼辦，確定是先看看本身的車子上有麼有，沒有咋弄，去車棚找，車棚子沒有，車棚子很拽，上面還有個生產車棚子的__proto_proto逐層向上查找就是原型鏈查找。如圖。

圖片描述

2.原型的用途

​ 我知道這個有什麼用？好咱們看一個實際的狀況，https://docs.angularjs.org/ap...

​ angular的merge函數，簡單的說，有一個對象a,還有一個對象b，我想把兩個對象合併成一個對象怎麼實現？注意要求只是合併人加的，原型上的不算。

​ 直接上源碼，簡單的讓人髮指，這個就是angular的架構（1.6.2）我粗糙的實現了一下。

(function(window) {
            var angular = window.angular || (window.angular = {});
            angular.merge=function(dst,src){
                for(var prop in src){
                    if(src.hasOwnProperty(prop)){

                        dst[prop] =src[prop];
                    }
                }
                return dst;  
            }
        })(window);

        var person = {
            name:"leo",
            age:18
        };
        var person2 = {
            job:"教前端的"
        };
        console.log(angular.merge(person,person2));
       // https://docs.angularjs.org/api/ng/function/angular.merge

hasOwnProperty這個用來判斷只是本身直接添加的對象，如今知道用途了吧？理解了js原理，能看懂和實現angular的庫，你還發愁本身不會用angular嗎？

2.萬事萬物皆對象

​ 常常聽人說，js萬事萬物皆對象

​ 怎麼證實，不墨跡上代碼

​

var num = 12;
        console.log(num.__proto__);
        var str = 'abc';
        console.log(str.__proto__);
        var arr = [];
        console.log(arr.__proto__.__proto__);
        var json = {};
        console.log(json.__proto__.__proto__);

不解釋，一句話，全部對象都有一個祖宗對象Object。

3.萬事萬物皆對象有啥用？

​ 一句話，擴展原型方法，給你們一到面試題，數組去重本身體會下。

思路，判斷某個值出現的位置是否等於當前循環的i,
好比,
    arr[1]的下標是1，而arr.indexOf(arr[1])返回是0 說明 1在 i = 1的位置以前出現過了，因此重複。上代碼：

    var arr = [1,1,12,5,8,7,8,7,21,5,0,0];
    var arr2 = [];
    for(var i = 0;i<arr.length;i++){
        console.log(arr.indexOf(arr[i]),i);
        if(arr.indexOf(arr[i])===i){
            arr2.push(arr[i]);
        }
    }
    document.write(arr2);
 ------------------------------------------------------------------------------------------------------------------------------------
直接說缺點：
    數組indexOf方法並不支持IE8及其如下瀏覽器，要想兼容還得單獨處理，麻煩。

那麼問題就來了 如何實現讓indexOf方法兼容低版本瀏覽器，這裏就體現萬事萬物皆對象的好處了。

上代碼：

Array.prototype.indexOf=function(item){
    for(var i=0;i<this.length;i++){
        if(this[i]==item){
            return i;
        }
    }
    return -1;
};

有同窗可能會想，不對啊，咱們不講new關鍵字那些嗎？放心，這些下節課就講了。