054_模拟原型链
1. 例子
1.1. 代碼
<!DOCTYPE html> <html lang="zh-CN"><head><meta charset="utf-8" /><title>模擬原型鏈</title></head><body><script type="text/javascript">// 對應語言本身的Objectfunction MyObject(){ this.__myproto__ = MyObject.myprototype;} // 對應語言本身的Stringfunction MyString(){ this.__myproto__ = MyString.myprototype;} // 對應語言本身的Booleanfunction MyBoolean(){ this.__myproto__ = MyBoolean.myprototype;} // 對應語言本身的Numberfunction MyNumber(){ this.__myproto__ = MyNumber.myprototype;} // 對應語言本身的Arrayfunction MyArray(){ this.__myproto__ = MyArray.myprototype;} // 對應語言本身的Functionfunction MyFunction(){ this.__myproto__ = MyFunction.myprototype;} // 我們自定義的類對象MyFnfunction MyFn(){ this.__myproto__ = MyFn.myprototype;} // 1.1. constructor屬性是對創建對象的函數的引用。// 1.2. 類對象的constructor屬性, 指向了Function的構造器函數。因此我們可以說, String、Boolean、Number、Array、Function, 以及我們自定義的MyFn都是有函數創建的對象。MyObject.myconstructor = MyFunction;MyString.myconstructor = MyFunction;MyBoolean.myconstructor = MyFunction;MyNumber.myconstructor = MyFunction;MyArray.myconstructor = MyFunction;MyFunction.myconstructor = MyFunction;MyFn.myconstructor = MyFunction;// 2.1. 類的prototype(原型)屬性都是自己的。Object、String、Boolean、Number、Array、Function, 以及我們創建的類MyFn的原型都是不一樣的。但是String、Boolean、Number、Array、Function, 以及我們創建的MyFn都繼承了Object的原型。Object的原型是原型鏈的最頂端。// 2.2. prototype屬性是對象。對于Function類, 它的typeof Function.prototype返回的是function, 但實際上是對象, 因為函數本身就是特殊的對象。// 2.3. prototype上有2個跟原型相關的重要屬性constructor和__proto__。這也符合我們之前的規則, 因為prototype是對象, 所以它有__proto__屬性。// 3. prototype.constructor屬性是對類的構造器函數的引用。// 4.1. 正如我們之前所講的__proto__屬性, 指向創建對象的類的原型。不管prototype是哪個類的屬性, prototype是對象, 它是由Object類創建的對象, 因此所有類(不包括Object本身)的prototype.__proto__屬性都指向Object.prototype。// 4.2. Object.prototype.__proto__的值是null， 也印證了Object.prototype是原型鏈的最頂層。MyObject.myprototype = {myconstructor: MyObject, __myproto__: null, myHasOwnProperty: function(){}, myIsPrototypeOf: function(){}, myPropertyIsEnumerable: function(){}, myToLocaleString: function(){}, myToString: function(){}, myValueOf: function(){}};MyString.myprototype = {myconstructor: MyString, __myproto__: MyObject.myprototype, myToString: function(){}, myValueOf: function(){}};MyBoolean.myprototype = {myconstructor: MyBoolean, __myproto__: MyObject.myprototype, myToString: function(){}, myValueOf: function(){}};MyNumber.myprototype = {myconstructor: MyNumber, __myproto__: MyObject.myprototype, myToLocaleString: function(){}, myToString: function(){}, myValueOf: function(){}};MyArray.myprototype = {myconstructor: MyArray, __myproto__: MyObject.myprototype, myToLocaleString: function(){}, myToString: function(){}};// 匿名函數var niming = function(){};niming.myconstructor = MyFunction;niming.__myproto__ = MyObject.myprototype;MyFunction.myprototype = niming;MyFn.myprototype = {myconstructor: MyFn, __myproto__: MyObject.myprototype};// 5.1. __proto__屬性是對創建對象的類的原型的引用。// 5.2. 類對象的__proto__屬性, 指向了Function類的原型。// 5.3. 使用new關鍵字創建的對象的__proto__屬性, 指向了它對應類的原型。MyObject.__myproto__ = MyFunction.myprototype;MyString.__myproto__ = MyFunction.myprototype;MyBoolean.__myproto__ = MyFunction.myprototype;MyNumber.__myproto__ = MyFunction.myprototype;MyArray.__myproto__ = MyFunction.myprototype;MyFunction.__myproto__ = MyFunction.myprototype;MyFn.__myproto__ = MyFunction.myprototype;var obj = new MyObject();var str = new MyString();var bool = new MyBoolean();var num = new MyNumber();var arr = new MyArray();var fun = new MyFunction();var myFn = new MyFn();document.write("類有prototype(原型)屬性: <br />");document.write(MyObject.myprototype + ', ' + typeof MyObject.myprototype + "<br />");document.write(MyString.myprototype + ', ' + typeof MyString.myprototype + "<br />");document.write(MyBoolean.myprototype + ', ' + typeof MyBoolean.myprototype + "<br />");document.write(MyNumber.myprototype + ', ' + typeof MyNumber.myprototype + "<br />");document.write(MyArray.myprototype + ', ' + typeof MyArray.myprototype + "<br />");document.write(MyFunction.myprototype + ', ' + typeof MyFunction.myprototype + "<br />");document.write(MyFn.myprototype + ', ' + typeof MyFn.myprototype + "<hr />");document.write("對象有__proto__屬性: <br />");document.write(MyObject.__myproto__ + ', ' + (MyObject.__myproto__ === MyFunction.myprototype) + "<br />");document.write(MyString.__myproto__ + ', ' + (MyString.__myproto__ === MyFunction.myprototype) + "<br />");document.write(MyBoolean.__myproto__ + ', ' + (MyBoolean.__myproto__ === MyFunction.myprototype) + "<br />");document.write(MyNumber.__myproto__ + ', ' + (MyNumber.__myproto__ === MyFunction.myprototype) + "<br />");document.write(MyArray.__myproto__ + ', ' + (MyArray.__myproto__ === MyFunction.myprototype) + "<br />");document.write(MyFunction.__myproto__ + ', ' + (MyFunction.__myproto__ === MyFunction.myprototype) + "<br />");document.write(MyFn.__myproto__ + ', ' + (MyFn.__myproto__ === MyFunction.myprototype) + "<br /><br />");document.write(obj.__myproto__ + ', ' + (obj.__myproto__ === MyObject.myprototype) + "<br />");document.write(str.__myproto__ + ', ' + (str.__myproto__ === MyString.myprototype) + "<br />");document.write(bool.__myproto__ + ', ' + (bool.__myproto__ === MyBoolean.myprototype) + "<br />");document.write(num.__myproto__ + ', ' + (num.__myproto__ === MyNumber.myprototype) + "<br />");document.write(arr.__myproto__ + ', ' + (arr.__myproto__ === MyArray.myprototype) + "<br />");document.write(fun.__myproto__ + ', ' + (fun.__myproto__ === MyFunction.myprototype) + "<br />");document.write(myFn.__myproto__ + ', ' + (myFn.__myproto__ === MyFn.myprototype) + "<hr />");document.write("類對象有constructor屬性: <br />");document.write(MyObject.myconstructor + ', ' + (MyObject.myconstructor === MyFunction) + "<br />");document.write(MyString.myconstructor + ', ' + (MyString.myconstructor === MyFunction) + "<br />");document.write(MyBoolean.myconstructor + ', ' + (MyBoolean.myconstructor === MyFunction) + "<br />");document.write(MyNumber.myconstructor + ', ' + (MyNumber.myconstructor === MyFunction) + "<br />");document.write(MyArray.myconstructor + ', ' + (MyArray.myconstructor === MyFunction) + "<br />");document.write(MyFunction.myconstructor + ', ' + (MyFunction.myconstructor === MyFunction) + "<br />");document.write(MyFn.myconstructor + ', ' + (MyFn.myconstructor === MyFunction) + "<hr />");document.write("我們創建的對象的__proto__屬性上有constructor屬性: <br />");document.write(obj.__myproto__.myconstructor + ', ' + (obj.__myproto__.myconstructor === MyObject) + "<br />");document.write(str.__myproto__.myconstructor + ', ' + (str.__myproto__.myconstructor === MyString) + "<br />");document.write(bool.__myproto__.myconstructor + ', ' + (bool.__myproto__.myconstructor === MyBoolean) + "<br />");document.write(num.__myproto__.myconstructor + ', ' + (num.__myproto__.myconstructor === MyNumber) + "<br />");document.write(arr.__myproto__.myconstructor + ', ' + (arr.__myproto__.myconstructor === MyArray) + "<br />");document.write(fun.__myproto__.myconstructor + ', ' + (fun.__myproto__.myconstructor === MyFunction) + "<br />");document.write(myFn.__myproto__.myconstructor + ', ' + (myFn.__myproto__.myconstructor === MyFn) + "<hr />");document.write("類prototype(原型)上的constructor屬性: <br />");document.write(MyObject.myprototype.myconstructor + ', ' + (MyObject.myprototype.myconstructor === MyObject) + "<br />");document.write(MyString.myprototype.myconstructor + ', ' + (MyString.myprototype.myconstructor === MyString) + "<br />");document.write(MyBoolean.myprototype.myconstructor + ', ' + (MyBoolean.myprototype.myconstructor === MyBoolean) + "<br />");document.write(MyNumber.myprototype.myconstructor + ', ' + (MyNumber.myprototype.myconstructor === MyNumber) + "<br />");document.write(MyArray.myprototype.myconstructor + ', ' + (MyArray.myprototype.myconstructor === MyArray) + "<br />");document.write(MyFunction.myprototype.myconstructor + ', ' + (MyFunction.myprototype.myconstructor === MyFunction) + "<br />");document.write(MyFn.myprototype.myconstructor + ', ' + (MyFn.myprototype.myconstructor === MyFn) + "<hr />");document.write("類prototype(原型)上的__proto__屬性: <br />");document.write((MyObject.myprototype.__myproto__) + "<br />");document.write(MyString.myprototype.__myproto__ + ', ' + (MyString.myprototype.__myproto__ === MyObject.myprototype) + "<br />");document.write(MyBoolean.myprototype.__myproto__ + ', ' + (MyBoolean.myprototype.__myproto__ === MyObject.myprototype) + "<br />");document.write(MyNumber.myprototype.__myproto__ + ', ' + (MyNumber.myprototype.__myproto__ === MyObject.myprototype) + "<br />");document.write(MyArray.myprototype.__myproto__ + ', ' + (MyArray.myprototype.__myproto__ === MyObject.myprototype) + "<br />");document.write(MyFunction.myprototype.__myproto__ + ', ' + (MyFunction.myprototype.__myproto__ === MyObject.myprototype) + "<br />");document.write(MyFn.myprototype.__myproto__ + ', ' + (MyFn.myprototype.__myproto__ === MyObject.myprototype) + "<br />");</script></body> </html>1.2. 效果圖
總結
- 上一篇： 053_原型链
- 下一篇： 052_Function对象