JS中__proto__與prototype的差別

JS中__proto__和prototype是兩個與原型相關的屬性，它們在功能上稍有不同。本文將具體介紹並比較這兩者的區別，並提供相應的程式碼範例。

首先，我們先來了解它們的意義和用途。

proto

__proto__是物件的內建屬性，它用來指向該物件的原型。每個物件都有一個__proto__屬性，包括自訂物件、內建物件和函數物件。透過__proto__屬性，我們可以存取和操作物件的原型鏈。

讓我們來看一個例子：

let obj = {};
console.log(obj.__proto__); // 输出：Object {}

let arr = [];
console.log(arr.__proto__); // 输出：Array []

function func() {}
console.log(func.__proto__); // 输出：[Function]

上面的程式碼中，我們建立了一個空物件obj，並存取了它的__proto__屬性。可以看到，obj.__proto__指向了一個Object{}物件。同樣，我們也建立了一個空數組arr，並存取了它的__proto__屬性，結果是arr.__proto__指向了一個Array []物件。而對於函數物件func來說，它的__proto__指向的是一個[Function]物件。

總結起來，__proto__屬性用於指向物件的原型，我們可以透過它來存取和操作原型鏈。

prototype

prototype是函數物件獨有的屬性，它指向了一個原型物件。每個函數物件都有一個prototype屬性，但它只有在這個函數作為建構函式使用時才有意義。

我們來看一個範例：

function Person() {}

console.log(Person.prototype); // 输出：Person {}

上面的程式碼中，我們定義了一個Person函數對象，並存取了它的prototype屬性。可以看到，Person.prototype指向了一個Person{}物件。

prototype屬性的主要作用是在建構函式模式下，用於建構實例物件的原型鏈。當我們使用建構函數來建立一個物件時，它的__proto__屬性會指向建構函數的prototype屬性。

let person = new Person();

console.log(person.__proto__ === Person.prototype); // 输出：true

上面的程式碼中，我們使用了Person建構子來建立了一個物件person。結果表明，person.__proto__指向了Person.prototype。

區別和聯繫

__proto__和prototype都與物件的原型相關，它們之間的聯繫和區別如下：

1. __proto__是實例物件的屬性，用於指向該物件的原型；而prototype是建構函數的屬性，用於指向建構函數的原型物件。
2. __proto__是讀取並存取物件的原型鏈的屬性，可以在實例物件上直接存取；而prototype是建構函式的屬性，只能在建構函式內部存取。
3. __proto__可以透過Object.setPrototypeOf()或直接賦值的方式來修改；而prototype只能在建構函式內部透過函式名稱.prototype來修改。
4. __proto__是非標準的屬性，只有部分瀏覽器支援；而prototype是標準屬性，所有的物件和函數都有。

下面的程式碼範例用於進一步說明這兩者的區別與聯繫：

function Animal() {}
Animal.prototype.eat = function() {
  console.log("Animal is eating");
};

function Dog() {}
Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.bark = function() {
  console.log("Dog is barking");
};

const dog1 = new Dog();
dog1.eat(); // 输出：Animal is eating
dog1.bark(); // 输出：Dog is barking

console.log(dog1.__proto__ === Dog.prototype); // 输出：true
console.log(Dog.prototype.__proto__ === Animal.prototype); // 输出：true

在上面的程式碼中，我們透過定義Animal建構函數和Dog建構函數，創建了一個繼承關係。透過__proto__和prototype屬性，我們可以存取到物件的原型鏈，並且證明了它們之間的聯繫。

綜上所述，__proto__和prototype在JS中都與原型相關，但在功能和使用方式上有所不同。了解它們的差異可以幫助我們更好地理解JS中的原型機制，並在編寫程式碼時更靈活地利用它們。

以上是JS中__proto__與prototype的差別的詳細內容。更多資訊請關注PHP中文網其他相關文章！