1. 程式人生 > >前端學習筆記之--原型和原型鏈的理解。

前端學習筆記之--原型和原型鏈的理解。

原型和原型鏈類似於Java和C#的繼承;

首先在慕課網上學習到的5個關於JavaStript原型的規則。

1.所有引用型別(陣列,函式,物件)除了null之外,都有物件的特徵,都可以自由擴充套件屬性;

2.所有的引用型別,都有__proto__(隱式原型)屬性,屬性值是一個普通的物件。

3.所有的函式,都有一個prototype(顯式原型)屬性,屬性值是也是一個普通的物件。

4.所有的引用型別(陣列,物件,函式),其__proto__屬性指向它的建構函式的"prototype"屬性. 

5.當試圖得到一個引用型別的屬性時,如果這個引用型別本身沒有這個屬性,那麼他會去它的__proto__(即它的建構函式的prototype中尋找).

五個規則的例子如下:

       //1.所有引用型別(陣列,函式,物件)除了null之外,都有物件的特徵,都可以自由擴充套件屬性;
       var obj = {}; obj.a = 100;
       var arr = []; arr.a = 10;
       var fn = function () {
       }
       fn.a = 1;

       var fn1 = new fn();//建立一個fn的例項

       console.log(obj.a);
       console.log(arr.a);
       console.log(fn.a);


       //2.所有的引用型別,都有__proto__(隱式原型)屬性,屬性值是一個普通的物件。
       console.log(obj.__proto__);
       console.log(arr.__proto__);
       console.log(fn.__proto__);


       //3.所有的函式,都有一個prototype(顯式原型)屬性,屬性值是也是一個普通的物件。
       console.log(fn.prototype);
       //下面兩個是未定義的
       console.log(obj.prototype);//undefined 所以可見Obj和陣列是沒有顯示原型的啦。
       console.log(arr.prototype);//undefined
       
      //4.所有的引用型別(陣列,物件,函式),其__proto__屬性指向它的建構函式的"prototype"屬性. 
       console.log(fn.__proto__ === Function.prototype);//true
       console.log(fn instanceof Object);
       console.log(fn instanceof Function);
       console.log(Function instanceof Object);
       console.log(Function.__proto__ === Object.prototype)

       console.log(obj.__proto__ === Object.prototype);//true
       console.log(arr.__proto__ === Array.prototype);//true
       /*----------------------------------------------------------------------------*/
       console.log(fn1.__proto__ === fn.prototype);//true fn是fn1的建構函式,所以下面的式子為假.
       console.log((fn1.__proto__).__proto__ === Function.prototype);//false
       console.log(fn1 instanceof Function);


       // console.log(Object.prototype === null);
       //5.當試圖得到一個引用型別的屬性時,如果這個引用型別本身沒有這個屬性,那麼他會去它的__proto__(即它的建構函式的prototype中尋找).
       
       //建構函式:
       function Foo(name,age) {
           this.name = name;
       }
       Foo.prototype.alertName=function () {
            alert(this.name);   
       }
       //建立示例:
        var f = new Foo('zhangsan')
        f.printName=function () {
            console.log(this.name);
        }
        //測試:
        f.printName();
        f.alertName();
        console.log(f.__proto__ === Foo.prototype); 
        console.log(Foo instanceof Function);

但是在這也丟擲疑問:

1.在例子的第五點中 f 函式是由Foo函式構造出來的,所以(f instanceof Foo)是true的;

    Foo也是又Function函式構造出來的,所以(Foo instantceof Fucntion)是true;

   但是(f instanceof Function)確實false;f 的最終的顯示原型是Object.這個困惑一直不解。

以下是兩個函式的原型鏈。

//      __proto__                         _proto__                           __proto__ //  f   ----------->  Foo.prototype -----------> Object.prototype -----------> null

//         __proto__                             __proto__                            __proto__ // Foo -----------> Function.prototype -----------> Object.prototype -----------> null

最後推薦個幫助理解的部落格。