JavaScript怎么實現繼承功能

這篇文章主要介紹“JavaScript怎么實現繼承功能”，在日常操作中，相信很多人在JavaScript怎么實現繼承功能問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”JavaScript怎么實現繼承功能”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

繼承

繼承是編程語言的一個顯著特征，隨著面向對象編程語言的引入而出現。這些語言大多是基于類的語言。在這里，類就像一個藍圖，對象是它的展現形式。就是說，要創建一個對象，首先我們必須創建一個類，然后我們可以從一個類創建任意數量的對象。

想象一下，我們有一個表示智能手機的類。這個類具有像其他智能手機一樣的可以拍照、有GPS定位等功能。下面是使用 c++ 來描述這樣的一個類：

class SmartPhone {   public:   void captureImages() {} }  SmartPhone x; x.captureImages()

我們創建了一個名為SmartPhone的類，它有一個名為capturePictures的方法用來拍照。

如果我們需要一個iPhone類，它可以捕捉圖像和一些特殊的功能，比如面部ID掃描。下面是兩種可能的解決方案：

• 將捕獲圖像功能與其他常見的智能手機功能，以及iPhone的特定功能一起重寫到一個新類中。但是這種方法需要更多的時間和精力，并且會引入更多的bug。

• 重用SmartPhone類中的功能，這就是繼承的作用，繼承也是重用其他類/對象中功能的一種方式。

這里是我們如何從SmartPhone類中繼承capturePictures方法，使用 c++ 實現如下：

class Iphone: public SmartPhone {   public:   void faceIDScan() {} }  Iphone x  x.faceIDScan()  x.captureImages()

上面是一個簡單的繼承示例。但是，它表明繼承可以使我們以某種方式重用代碼，從而使所生成的程序更不易出錯，并且花費更少的時間進行開發。

以下是關于類的一些重要信息：

• 繼承該功能的類稱為子類

• 被繼承的類稱為父類

• 一個類可以同時從多個類中繼承

• 我們可以具有多個繼承級別。例如，類C繼承自類B，而類B繼承自類A

值得注意的是，類本身并沒有做任何事情。在從類創建對象之前，實際上沒有完成任何工作。我們將看到它為什么不同于JavaScript。

原型是什么?

在 JS 中，所有對象都有一個特殊的內部屬性，該屬性基本上是對另一個對象的引用。此引用取決于對象的創建方式。在  ECMAScript/JavaScript規范中，它表示為[[Prototype]]。

由于[[Prototype]]鏈接到一個對象，所以該對象有自己的[[Prototype]]引用。這就是建立原型鏈的方式。

這個[[Prototype]]鏈是 JS 中繼承的構建塊。

__proto__ 對象

為了訪問對象的[[Prototype]]，大多數瀏覽器都提供__proto__屬性。訪問方式如下：

obj.__proto__

需要注意的是，這個屬性不是 ECMAScript 標準的一部分，它實際上是由瀏覽器實現的。

獲取和設置原型方法

除了__proto__屬性外，還有一種訪問[[Prototype]]的標準方法：

Object.getPrototypeOf(obj);

對應的有個類似的方法來設置對象的[[Prototype]]：

Object.setPrototypeOf(obj, prototype);

`[[Prototype]]`和`.prototype`屬性

[[Prototype]]  只不過是一種用來表示物體原型的標準符號。許多開發人員將其與.prototype屬性混淆，這是完全不同的事情，接著我們來研究一下.prototype屬性。

在 JS 中，有許多創建對象的方法。一種方法是使用構造函數，像這樣使用new關鍵字來調用它：

function SmartPhone(os) {   this.os = os }  let phone = new SmartPhone('Android')

在控制臺打印 phone 對象：

{   os: "IPhone"   __proto__{     constructor: ƒ SmartPhone(os)    __proto__: Object   } }

現在，如果我們希望在phone對象上有一些方法，我們可以在函數上使用.prototype屬性，如下所示：

SmartPhone.prototype.isAndroid = function () {   return this.os === 'Android' || 'android' }

再次創建phone對象時，打印 phone 對象如下：

{   os: "Android"   __proto__{     isAndroid: ƒ()     constructor: ƒ SmartPhone(os)    __proto__: Object   } }

我們可以在對象的[[Prototype]]中看到isAndroid()方法。

簡而言之，.prototype屬性基本上就像由給定的構造函數創建的[[Prototype]]對象的藍圖。在.prototype屬性/對象中聲明的所有內容都會在對象的[[Prototype]]中彈出。

實上，如果將 SmartPhone.prototype 與phone 的[[Prototype]]進行比較，就會發現它們是相同的：

console.log(Object.getPrototypeOf(phone) === SmartPhone.prototype); // true

值得注意的是，我們還可以在構造函數中創建方法：

function ObjectA() {   this.methodA = function () {} }  let firstObj = new ObjectA() console.log(firstObj)

這種方法的問題是當我們初始化一個新對象時。所有實例都有自己methodA的副本。相反，當我們在函數的原型上創建它時，對象的所有實例只共享方法的一個副本，顯然使用原型的方式效率會過高。

當我們訪問屬性時這里發生了什么?

當我們訪問一個屬性以獲取它時，會發生以下情況：

JS 引擎查找對象上的屬性，如果找到了該屬性，然后返回它。否則，JS  引擎將通過查看[[Prototype]]來檢查對象的繼承屬性，如果找到該屬性，則返回它，否則，它會查找  [[Prototype]]的[[Prototype]]。找到屬性或沒有[[Prototype]]時，該鏈結束，這意味著我們已經到達原型鏈的末端。

當我們設置/創建屬性時，JS 總是在對象本身上進行設置。即使[[Prototype]]鏈上存在相同的屬性，下面是一個例子：

function MyObject() {} MyObject.prototype.propA = 10; // 在原型上創建屬性  let myObject = new MyObject(); console.log(myObject.propA); // [[Prototype]]上的屬性 // 10  myObject.propA = 20; // 對象的屬性 console.log(myObject.propA); // 20

在上面的示例中，我們創建了一個構造函數，該函數的[[Prototype]]上具有屬性propA。當我們嘗試對其進行讀取操作時，會在控制臺中看到該值。但是，當我們嘗試在對象本身上設置相同的屬性時;JS  使用給定值在對象上創建一個新屬性?，F在，如果我們不能直接訪問[[Prototype]]上的屬性。

值得注意的是，普通對象的[[Prototype]]鏈的末尾是內置的Object.prototype。這就是為什么大多數對象共享許多方法(例如toString())的原因。因為它們實際上是在Object.prototype上定義的。

使用原型繼承的各種方法

在 JS 中，無論我們如何創建對象，只有原型繼承，但這些方式還有一些區別，來看看：

對象字面量：

在JavaScript中創建對象的最簡單方法是使用對象字面量：

let obj = {}

如果在瀏覽器的控制臺中打印obj，我們將看到以下內容：

基本上，所有用文字面量創建的對象都繼承了Object.prototype的屬性。

需要注意的是__proto__對象引用了創建它的構造函數。在這種情況下，constructor屬性指向Object構造函數。

使用對象構造函數

另一種不太常見的創建對象的方法是使用對象構造函數。JS 提供了一個名為Object的內置構造函數方法來創建對象。

let obj = new Object();

這種方法的結果與對象字面量的方式相同。它從Object.prototype繼承屬性。因為我們使用Object作為構造函數。

(1) Object.create 方法

使用此輔助方法，我們可以創建一個帶有[[Prototype]]的對象，如下所示：

let SmartPhone = {   captureImages: function() {} }  let Iphone = Object.create(SmartPhone)  Iphone.captureImages()

這是在 JS 中使用繼承的最簡單方法之一。猜猜我們如何在沒有任何[[Prototype]]引用的情況下創建對象?

(2) 構造方法

與 JS 運行時提供的對象構造函數相似。我們還可以創建自己的構造函數，以創建適合我們需求的對象，如下所示：

function SmartPhone(os) {   this.os = os; }  SmartPhone.prototype.isAndroid = function() {   return this.os === 'Android'; };  SmartPhone.prototype.isIOS = function() {   return this.os === 'iOS'; };

現在，我們想創建一個iPhone類，它應該有'iOS'作為它 os 屬性的值。它還應該有faceIDScan方法。

首先，我們必須創建一個Iphone構造函數，在其中，我們應該調用SmartPhone構造函數，如下所示：

function Iphone() {    SmartPhone.call(this, 'iOS'); }

這會將Iphone構造函數中的this.os屬性設置為’iOS‘。

之所以調用SmartPhone.call方法，是因為我們需要更改 this 值以引用Iphone。這類似于在面向對象的世界中調用父級的構造函數。

接下來的事情是，我們必須從SmartPhone構造函數繼承方法。我們可以在此處使用Object.create朋友，如下所示：

Iphone.prototype = Object.create(SmartPhone.prototype);

現在，我們可以使用.prototype為Iphone添加方法，如下所示：

Iphone.prototype.faceIDScan = function() {};

最后，我們可以使用Iphone創建一個對象，如下所示：

let x = new Iphone();  // calling inherited method console.log(x.isIOS()): // true

(3) ES6 class

使用ES6，整個過程非常簡單。我們可以創建類(它們與C  ++或其他任何基于類的語言中的類不同，只是在原型繼承之上的語法糖)，然后從其他類派生新的類。

下面是我們如何在ES6中創建類：

class SmartPhone {   constructor(os) {     this.os = os;   }   isAndroid() {     return this.os === 'Android';   }   isIos() {     return this.os === 'iOS';   } };

現在，我們可以創建一個派生自SmartPhone的新類，如下所示：

class Iphone extends SmartPhone {    constructor() {      super.call('iOS');    }    faceIDScan() {} }

我們不是調用SmartPhone.call，而是調用super.call。在內部，JavaScript引擎會自動為我們執行此操作。

最后，我們可以使用Iphone創建一個對象，如下所示：

let x = new Iphone();  x.faceIDScan();  // calling inherited method console.log(x.isIos()): // true

到此，關于“JavaScript怎么實現繼承功能”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！