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è)對象都有的一個(gè)屬性，而prototype是函數(shù)才會有的屬性!!!

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

一、prototype

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

二、__proto__

對象具有屬性__proto__，可稱為隱式原型，一個(gè)對象的隱式原型指向構(gòu)造該對象的構(gòu)造函數(shù)的原型，這也保證了實(shí)例能夠訪問在構(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è)對象實(shí)例通過內(nèi)部屬性[[Prototype]]跟蹤其原型對象。使用原型對象的好處是可以讓所有對象實(shí)例共享它所包含的屬性和方法。可以調(diào)用對象的Object.getPrototypeOf()方法讀取[[Prototype]]屬性的值，也可以使用isPrototypeOf()方法檢查某個(gè)對象是否是另一個(gè)對象的原型對象。大部分JavaScript引擎在所有對象上都支持一個(gè)名為__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

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

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

最新評論