淺談JavaScript中的原型模式

    在JavaScript中建立物件由很多種方式，如工廠模式、建構子模式、原型模式等：

//工廠模式<br>function createPerson(name, age,job)<br>{<br> var o = new Object;<br> o.name = name;<br> o.age = age;<br> o.job = job;<br> o.sayName = function()<br> {<br> alert(this.name );<br> }<br> return o;<br>}<br>var person = createPerson('dw',20,'IT');<br><p><br></p><p><br></p><p><br></p><p></p><p></p> function Person()<p>{<br><br>}<br>Person.prototype = <br>{<br> name:"dw",<br> age:20,<br> job:"IT",<br> sayName:function()<br> job:"IT",<br> sayName:function()<br>()<br>(this) ;<br> }<br>};<br>var person2 = new Person;<br></p>    在Javascript中，每個函數都有prototype屬性，該屬性是一個指向原型對象的指針，可以用於創建所有實例共享的屬性的和方法。在原型模式下，在建立一個實例person3<p><br></p><p></p><p><br>var person3 = new Person;<br>person2.name;  //dw<br>person3.name; //dwamm<br> 。原型物件的屬性和方法被所有特定類型的實例共享。在預設的情況下，每個原型物件會自動取得constructor屬性，用於指向prototype屬性所在函數的指針，如Person.prototype.constructor指向Person</p><p><br></p><p></p><p>alert(Person.prototype.constructor) ;   //傳回Person的建構子<br>//Person.prototype.constructor只是指向Person的一個指針，與Person不相等<br>//以下皆回傳false<br>alert(Person.prototype.constructor === Person)<br>alert (Person.prototype.constructor == Person)<br><br>實例、原型對象、建構子的三角戀關係如下圖所示：</p><p><img src="/static/imghwm/default1.png" data-src="https://img.php.cn//upload/image/628/727/400/1480037228955873.png?x-oss-process=image/resize,p_40" class="lazy" title="1480037228955873.png" alt="淺談JavaScript中的原型模式"></p><p>在每一個實例的內部都有一個指標指向原型對象，在ECMA- 262的第五版稱之為[[prototype]]。在原型模式下建立的實例與建構函數沒有直接的關係。 </p><p><br></p><p>     雖然無法存取[[prototype]]，但可以用isPrototypeOf()方法來確定物件是否為原型物件。 </p><p></p><p>alert(Person.prototype.isPrototypeOf(person2)); //true<br>alert(Person.prototype.isPrototypeOf(person3));//true<br><br>因為在實例內部都有一個指向實例.prototype的指標，所以均回傳true。在ECMAScript 5中，可以用Object.getPrototypeOf()回傳[[prototype]]，即回傳原型物件</p><p><br></p><p></p><p>alert(Object.getPrototypeOf(person2) == Person.prototype); (Object.getPrototypeOf(person2).name); //dw<br><br>    注意：雖然可以用實例存取原型中的值，但是不能透過實例重寫原型中的值，即實例中新增了與原型中同名的屬性，則原型的同名屬性被屏蔽。 <br></p><p><br></p><p></p>person2.name="qs";<p>alert(person2.name);//qs<br><br>即使將name屬性設為null，仍然無法存取原型中的name。可以用delete刪除實例的name屬性，則可以重新訪問原型中的name.<br></p><p><br></p><p></p><pre name="code" class="html">person2.name = null;<p>alert(person2.name );  //null<br>delete person2.name;alert(person2.name); //dw<br><br><br></p><p><br></p><p>   <br>此方法只有在給定的屬性存在實例時才傳回true</p><p><br></p>