prototype與__proto__區別詳細介紹

prototype 與 __proto__ 區別

每個構造函數都是具有名為「prototype」的屬性的函數，用於實現基於原型的繼承和共享屬性。建構函數所建立的每個物件都有對其建構函式的「prototype」屬性值的隱式參考（稱為物件的原型）。 
當建構函式建立一個物件時，該物件會隱式引用建構函式的原型屬性，以解析屬性參考。建構函數的原型屬性可以由程式表達式constructor.prototype 引用，並且添加到物件原型的屬性透過繼承由共享該原型的所有物件共用。或者，可以使用 Object.create 內建函數來建立具有明確指定原型的新物件。 –ECMAScript® 2015語言規範

__proto__是每個物件都有一個屬性，而prototype是函數才會有的屬性！ 

使用Object.getPrototypeOf()代替__proto__！ ！ ！

一、prototype

幾乎所有的函數（除了一些內建函數）都有一個名為prototype（原型）的屬性，這個屬性是一個指針，指向一個對象，而這個對象的用途是包含可以有特定類型的所有實例共享的屬性和方法。 prototype是透過呼叫建構函式而建立那個物件實例的原型物件。 hasOwnProperty()判斷屬性是否為自有屬性；in操作子對原型屬性和自有屬性都回傳true。

範例：自有屬性&原型屬性

var obj = {a: 1};
obj.hasOwnProperty("a"); // true
obj.hasOwnProperty("toString"); // false
"a" in obj; // true
"toString" in obj; // true

   

範例：鑑別原型屬性

function hasPrototypeProperty(obj, name){
  return name in obj && !obj.hasOwnProperty(name);
}

 

__

樣隱式原型指向建構該物件的建構函式的原型，這也保證了實例能夠存取建構函式原型中定義的屬性和方法。

function Foo(){}
var Boo = {name: "Boo"};
Foo.prototype = Boo;
var f = new Foo();
 
console.log(f.__proto__ === Foo.prototype); // true
console.log(f.__proto__ === Boo);  // true
Object.getPrototypeOf(f) === f.__proto__;  // true

   

三、Object.getPrototypeOf()

一個物件實例透過內部屬性[[Prototype]]追蹤其原型物件。使用原型物件的好處是可以讓所有物件實例共用它所包含的屬性和方法可以呼叫物件的Object.getPrototypeOf()方法讀取[[Prototype]]屬性的值，也可以使用isPrototypeOf()方法檢查某個物件是否是另一個物件的原型物件。大部分JavaScript引擎在所有物件上都支援一個名為 __proto__ 的屬性，該屬性可以直接讀寫[[Prototype]]屬性。

範例：原型物件

function Person(name) {
  this.name = name;
}
Person.prototype = {
  constructor: Person,
  sayName: function(){
    console.log("my name is " + this.name);
  }
}
var p1 = new Person("ligang");
var p2 = new Person("Camile");
p1.sayName();  // my name is ligang
p2.sayName();  // my name is Camile

雖然目前大多數瀏覽器都支援Object.prototype.proto，但它的其存在和確切行為僅在ECMAScript 6 規範中標準化為遺留功能，以確保Web 瀏覽器的兼容性。為了更好的支持，建議僅使用 Object.getPrototypeOf() 來代替。 –MDN

感謝閱讀，希望能對大家有幫助，謝謝大家對本站的支持！

更多prototype與__proto__區別詳細介紹相關文章請關注PHP中文網！