prototype與__proto__區(qū)別

Each constructor is a function that has a property named “prototype” that is used to implement prototype-based inheritance and shared properties. Every object created by a constructor has an implicit reference (called the object's prototype) to the value of its constructor's “prototype” property.
When a constructor creates an object, that object implicitly references the constructor's prototype property for the purpose of resolving property references. The constructor's prototype property can be referenced by the program expression constructor.prototype, and properties added to an object's prototype are shared, through inheritance, by all objects sharing the prototype. Alternatively, a new object may be created with an explicitly specified prototype by using the Object.create built-in function. –ECMAScript® 2015 Language Specification

__proto__是每個(gè)對(duì)象都有的一個(gè)屬性，而prototype是函數(shù)才會(huì)有的屬性!!!

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

一、prototype

幾乎所有的函數(shù)（除了一些內(nèi)建函數(shù)）都有一個(gè)名為prototype（原型）的屬性，這個(gè)屬性是一個(gè)指針，指向一個(gè)對(duì)象，而這個(gè)對(duì)象的用途是包含可以有特定類型的所有實(shí)例共享的屬性和方法。prototype是通過(guò)調(diào)用構(gòu)造函數(shù)而創(chuàng)建的那個(gè)對(duì)象實(shí)例的原型對(duì)象。hasOwnProperty()判斷指定屬性是否為自有屬性；in操作符對(duì)原型屬性和自有屬性都返回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);
}

二、__proto__

對(duì)象具有屬性__proto__，可稱為隱式原型，一個(gè)對(duì)象的隱式原型指向構(gòu)造該對(duì)象的構(gòu)造函數(shù)的原型，這也保證了實(shí)例能夠訪問(wèn)在構(gòu)造函數(shù)原型中定義的屬性和方法。

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()

一個(gè)對(duì)象實(shí)例通過(guò)內(nèi)部屬性[[Prototype]]跟蹤其原型對(duì)象。使用原型對(duì)象的好處是可以讓所有對(duì)象實(shí)例共享它所包含的屬性和方法?？梢哉{(diào)用對(duì)象的Object.getPrototypeOf()方法讀取[[Prototype]]屬性的值，也可以使用isPrototypeOf()方法檢查某個(gè)對(duì)象是否是另一個(gè)對(duì)象的原型對(duì)象。大部分JavaScript引擎在所有對(duì)象上都支持一個(gè)名為_(kāi)_proto__的屬性，該屬性可以直接讀寫(xiě)[[Prototype]]屬性。

示例：原型對(duì)象

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

While Object.prototype.proto is supported today in most browsers, its existence and exact behavior has only been standardized in the ECMAScript 6 specification as a legacy feature to ensure compatibility for web browsers. For better support, it is recommended that only Object.getPrototypeOf() be used instead. –MDN

感謝閱讀，希望能幫助到大家，謝謝大家對(duì)本站的支持！

最新評(píng)論