1. 程式人生 > >JavaScript之原型 Prototype

JavaScript之原型 Prototype

1、我們所建立的每一個函式,解析器都會向函式中新增一個屬性prototype。這個屬性對應著一個物件,這個物件就是我們所謂的原型物件。如果函索作為普通函式呼叫prototype沒有任何作用。

當函式以建構函式的形式呼叫時,它所建立的物件中都會有一個隱含的屬性

指向該建構函式的原型物件,我們可以通過__proto__來訪問屬性

原型物件就相當於一個公共的區域,所有同一個類的例項都可以訪問到這個原型物件,我們可以將物件中共有的內容,統一設定到原型物件中。

當我們訪問物件的一個屬性或方法時,它會先在物件自身中尋找,如果有則直接使用,如果沒有則會去原型物件中尋找,如果找到則直接使用

當我們建立建構函式時,可以將這些物件共有的屬性和方法,統一新增到建構函式的原型物件中

這樣不用分別為每一個物件新增,也不會影響到全域性作用域,就可以使每個物件都具有這些屬性和方法了

 1 <script type="text/javascript">
 2             function MyClass(){
 3             }
 4             
 5             MyClass.prototype.a = 123;
 6             MyClass.prototype.sayHello = function(){
 7                 alert("Hello");
 8             };
9 var mc = new MyClass(); 10 var mc2 = new MyClass(); 11 /*console.log(MyClass.prototype); 12 console.log(MyClass());*/ 13 console.log(mc2.__proto__ == MyClass.prototype); 14 mc.a = "我是mc中的a"; 15 console.log(mc2.a); 16
console.log(mc2.__proto__.a); 17 console.log(mc.a); 18 console.log(mc.__proto__.a); 19 </script>

 

2、使用in檢查物件中是否含有某個屬性時,如果物件中沒有但是原型中有,也會返回true

可以使用物件的hasOwnProperty()來檢查物件自身中是否含有該屬性

使用該方法只有當物件自身中含有屬性時,才會返回true

3、原型物件也是物件,所以它也有原型,

當我們使用一個物件的屬性或方法時,會先在自身中尋找,自身中有,則直接使用,

如果沒有則去原型物件中尋找,如果原型物件中有,則使用

如果沒有則去原型的原型中去尋找,直到找到Object物件的原型

Object物件的原型沒有原型,如果在Object原型中依然沒有找到,則返回underfined

 1 <script type="text/javascript">
 2             function MyClass(){
 3             }
 4             MyClass.prototype.name = "我是原型中的名字";
 5             var mc = new MyClass();
 6             mc.age = 123;
 7             console.log(MyClass.prototype);
 8             console.log(mc.name);
 9             console.log("name" in mc);
10             console.log(mc.hasOwnProperty("name"));
11             console.log(mc.hasOwnProperty("age"));
12             console.log("hasOwnProperty" in mc);
13             console.log(mc.hasOwnProperty("hasOwnProperty"));
14             console.log(mc.__proto__.hasOwnProperty("hasOwnProperty"));
15             console.log(mc.__proto__.__proto__.hasOwnProperty("hasOwnProperty"));
16             
17         </script>