前端學習筆記之--原型和原型鏈的理解。
阿新 • • 發佈:2018-12-17
原型和原型鏈類似於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
最後推薦個幫助理解的部落格。