淺談JS原型

来源:https://www.cnblogs.com/pglin/archive/2023/02/23/17147587.html
-Advertisement-
Play Games

前言 JavaScript 原型是該語言中一個非常重要的概念。理解原型是理解 JavaScript 的關鍵。在本篇技術博客中，我們將深入探討 JavaScript 的原型概念，並介紹常用的操作對象原型的方法。(歡迎點評,歡迎指正!) 什麼是原型？ 在 JavaScript 中，每個對象都有一個原型（ ...


前言

JavaScript 原型是該語言中一個非常重要的概念。理解原型是理解 JavaScript 的關鍵。在本篇技術博客中，我們將深入探討 JavaScript 的原型概念，並介紹常用的操作對象原型的方法。(歡迎點評,歡迎指正!)

什麼是原型？

在 JavaScript 中，每個對象都有一個原型（prototype）對象。原型可以看做是對象的“父類”，包含了一些共有的屬性和方法。當我們試圖訪問對象的屬性時，JavaScript 首先查找該對象本身是否有該屬性，如果沒有，就會在該對象的原型中查找，如果還沒有，就會一直沿著原型鏈(也可理解為原型對象的原型對象)向上查找，直到找到該屬性或者查找到原型鏈的頂端為止。

在 JavaScript 中，我們可以使用 Object.getPrototypeOf 方法來獲取一個對象的原型，例如：

const obj = {};
console.log(Object.getPrototypeOf(obj)); // 輸出：{}

這裡的 {} 就是 obj 對象的原型。

原型鏈

每個對象的原型也可以有自己的原型，這樣就形成了一個鏈式結構，我們稱之為“原型鏈”。

在 JavaScript 中，原型鏈的頂端是 Object.prototype，它是所有對象的預設原型。Object.prototype 對象中包含了一些常用的屬性和方法，例如 toString、valueOf 等。

const obj = {};
console.log(Object.getPrototypeOf(obj) === Object.prototype); // 輸出：true
console.log(obj.toString()); // 輸出：[object Object]

在 JavaScript 中，我們可以通過 Object.create 方法來創建一個新對象，並將其原型指向指定對象。例如：

const obj1 = { name: 'Jack' };
const obj2 = Object.create(obj1);
console.log(obj2.name); // 輸出：'Jack'

在上面的代碼中，我們創建了一個對象 obj1，然後通過 Object.create 方法創建了一個新對象 obj2，並將其原型指向 obj1。由於 obj1 中包含了一個屬性 name，所以在 obj2 中也能訪問到該屬性。

構造函數創建對象

在JavaScript中，通過構造函數創建對象時，這些對象都會有一個內部屬性Prototype，指向構造函數的原型對象。例如：

function Person(name, age) {
  this.name = name;
  this.age = age;
}

const person = new Person('Tom', 20);
console.log(person.__proto__ === Person.prototype); // true

這裡的person.__proto__就是指向Person構造函數的原型對象Person.prototype。通過new關鍵字創建的實例對象就是構造函數的一個實例，因此它繼承了構造函數的原型對象中定義的屬性和方法。

如果我們想要給Person構造函數的原型對象添加一個方法，可以通過給Person.prototype賦值來實現：

Person.prototype.sayHello = function() {
  console.log(`Hello, my name is ${this.name}`);
}

現在，Person構造函數的所有實例對象都可以訪問這個新定義的方法：

const person = new Person('Tom', 20);
person.sayHello(); // Hello, my name is Tom

當我們訪問一個對象的屬性或方法時，JavaScript引擎會首先查找對象本身是否有該屬性或方法。如果對象本身沒有定義，就會沿著它的原型鏈向上查找，直到找到為止。如果一直查找到最頂層的原型對象還沒有找到，則返回undefined。

__proto__ 與 Prototype 區別

在JavaScript中，每個對象都有一個__proto__ 屬性和一個構造函數的 prototype 屬性。它們兩者都與對象原型有關，但是它們的作用和用法是不同的。
__proto__ 是一個對象的內部屬性，用於指向該對象的原型。當我們訪問對象的某個屬性時，JavaScript引擎會先查找該對象本身是否有該屬性，如果沒有則會去該對象的原型鏈中查找。因此，我們可以通過修改 __proto__ 來修改對象的原型鏈，但是不建議這樣做，因為 __proto__ 是一個非標準的屬性，在一些瀏覽器中可能會出現相容性問題。

相比之下，prototype 是一個構造函數特有的屬性，它是一個對象，包含了該構造函數的所有實例共用的屬性和方法。當我們使用 new 運算符創建一個實例時，實例對象會繼承其構造函數的 prototype 屬性。因此，我們可以通過在構造函數的 prototype 上定義屬性和方法來實現所有實例共用這些屬性和方法的效果。

下麵是一個簡單的例子，演示了 __proto__ 和 prototype 的使用方法和區別：

function Animal(name) {
  this.name = name;
}

// 通過 prototype 定義方法
Animal.prototype.sayName = function() {
  console.log('My name is', this.name);
};

// 創建實例
const cat = new Animal('Tom');

// 訪問實例屬性和方法
console.log(cat.name); // 'Tom'
cat.sayName(); // 'My name is Tom'

// 修改實例的 __proto__
const dog = {};
dog.__proto__ = Animal.prototype;
dog.name = 'Spike';
dog.sayName(); // 'My name is Spike'

上述例子中，我們首先定義了一個 Animal 構造函數，並通過 prototype 定義了一個 sayName 方法。然後，我們創建了一個 cat 實例，訪問了實例的 name 屬性和 sayName 方法。接著，我們創建了一個 dog 對象，並將其 __proto__ 屬性設置為 Animal.prototype，這樣 dog 對象就可以繼承 Animal 的 prototype 上定義的方法和屬性。最後，我們訪問了 dog 對象的 name 屬性和 sayName 方法，驗證了 __proto__ 和 prototype 的區別。

操作對象原型的方法

在 JavaScript 中，我們可以使用一些方法來操作對象原型,下麵是一些常用的操作對象原型的方法：

  • Object.getPrototypeOf(obj)：獲取對象的原型。
  • Object.setPrototypeOf(obj, prototype)：設置對象的原型。
  • obj.hasOwnProperty(prop)：判斷對象是否有自有屬性prop。
  • obj.isPrototypeOf(obj2)：判斷對象是否是另一個對象的原型。

需要註意的是，修改原型對象會對繼承自它的所有實例對象生效。因此，在修改原型對象時需要特別小心，確保不會對其他對象產生影響。

Object.create()

Object.create()：創建一個新對象，使用現有對象作為新對象的原型。

const parent = {
  name: "parent",
  sayHello: function () {
    console.log(`Hello, I'm ${this.name}.`);
  },
};

const child = Object.create(parent);
child.name = "child";

child.sayHello(); // Hello, I'm child.

Object.getPrototypeOf()

Object.getPrototypeOf()：獲取對象的原型。

const parent = {
  name: "parent",
};

const child = Object.create(parent);

console.log(Object.getPrototypeOf(child) === parent); // true

Object.setPrototypeOf()

Object.setPrototypeOf()：設置對象的原型。

const parent = {
  name: "parent",
};

const child = {};
Object.setPrototypeOf(child, parent);

console.log(Object.getPrototypeOf(child) === parent); // true

Object.prototype.hasOwnProperty()

Object.prototype.hasOwnProperty()：判斷對象是否擁有某個屬性，不包括原型鏈上的屬性。

const obj = { a: 1 };

console.log(obj.hasOwnProperty("a")); // true
console.log(obj.hasOwnProperty("toString")); // false

Object.prototype.isPrototypeOf()

Object.prototype.isPrototypeOf()：判斷對象是否是另一個對象的原型。

const parent = {};
const child = Object.create(parent);

console.log(parent.isPrototypeOf(child)); // true
console.log(child.isPrototypeOf(parent)); // false

Object.prototype.constructor

Object.prototype.constructor：獲取對象的構造函數。

function Person(name) {
  this.name = name;
}

const person = new Person("Tom");
console.log(person.constructor === Person); // true

使用場景

JS的原型在實際開發中有許多使用場景，其中一些常見的包括：

  • 原型繼承：使用原型鏈實現繼承，可以減少代碼的冗餘，提高代碼的可重用性。
  • 動態添加方法：在原型對象上動態添加方法，可以使得所有實例都能共用該方法，避免每個實例都單獨創建方法，節省記憶體。
  • 實現多態：利用原型鏈的特性，可以實現多態，即同一個方法可以有多種不同的實現方式，根據實際對象類型進行調用。
  • 擴展和覆蓋原型屬性和方法：可以通過修改原型對象來實現對所有實例屬性和方法的擴展或覆蓋，具有很大的靈活性。

舉例說明幾個使用場景

創建對象

在JavaScript中，可以使用原型來創建對象，這種方式可以避免多次創建相同的對象，提高代碼的性能。例如：

function Person(name) {
  this.name = name;
}

Person.prototype.sayHello = function() {
  console.log(`Hello, my name is ${this.name}`);
}

const person1 = new Person('John');
person1.sayHello(); // 輸出：Hello, my name is John

const person2 = new Person('Jane');
person2.sayHello(); // 輸出：Hello, my name is Jane

繼承

JavaScript中沒有類的概念，繼承是通過原型來實現的。子類通過原型鏈繼承父類的屬性和方法。例如：

function Animal(name) {
  this.name = name;
}

Animal.prototype.sayName = function() {
  console.log(`My name is ${this.name}`);
}

function Dog(name, breed) {
  Animal.call(this, name); // 繼承父類的屬性
  this.breed = breed;
}

Dog.prototype = Object.create(Animal.prototype); // 繼承父類的方法

Dog.prototype.constructor = Dog;

Dog.prototype.sayBreed = function() {
  console.log(`My breed is ${this.breed}`);
}

const dog = new Dog('Buddy', 'Golden Retriever');
dog.sayName(); // 輸出：My name is Buddy
dog.sayBreed(); // 輸出：My breed is Golden Retriever

修改對象

通過原型，可以方便地對現有對象進行修改或添加新的屬性和方法。例如：

const person = { name: 'John' };

Object.getPrototypeOf(person).sayHello = function() {
  console.log(`Hello, my name is ${this.name}`);
}

person.sayHello(); // 輸出：Hello, my name is John

多態

在 JavaScript 中，可以使用原型實現多態。多態是指在不同的對象實例中，同一個方法可以有不同的實現方式。通過原型，可以在不改變對象實例自身的情況下，實現方法的多態性。

舉個例子，假設有一個名為 Animal 的構造函數，其原型對象有一個方法 speak，並且有兩個子構造函數 Cat 和 Dog，它們繼承了 Animal 的原型對象。現在我們希望在 Cat 和 Dog 的實例中，分別實現 speak 方法的不同實現方式。

function Animal() {}

Animal.prototype.speak = function() {
  console.log('Animal speaks');
}

function Cat() {}
Cat.prototype = Object.create(Animal.prototype);
Cat.prototype.constructor = Cat;

Cat.prototype.speak = function() {
  console.log('Meow');
}

function Dog() {}
Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;

Dog.prototype.speak = function() {
  console.log('Woof');
}

const cat = new Cat();
const dog = new Dog();

cat.speak(); // Meow
dog.speak(); // Woof

在上述例子中，我們通過將 Cat 和 Dog 的原型對象設置為 Animal 的原型對象，並分別實現了它們自己的 speak 方法，使得它們的 speak 方法在不同的實例中有不同的實現方式。這就是使用 JS 原型實現多態的一種方法。
說明：在JavaScript中，每個函數都有一個預設的 prototype 屬性，它指向一個對象，即該函數的原型對象。該原型對象是包含構造函數所有實例共用的屬性和方法。

而 constructor 是原型對象上的一個屬性，它指向創建當前對象的構造函數。因此 Cat.prototype.constructor = Cat 的作用是將 Cat 函數的原型對象上的 constructor 屬性指向 Cat 函數本身，以確保 Cat 函數作為構造函數創建的對象，其 constructor 屬性正確地指向 Cat 函數本身。

在上述代碼中，由於將 Animal 函數的原型對象替換為 Cat 函數的實例，因此也需要將 constructor 屬性指向 Cat 函數本身，以確保 constructor 屬性的正確性。

總結

JavaScript 中的所有對象都有一個內置的屬性 __proto__，用於指向其原型對象。每個構造函數都有一個名為 Prototype 的屬性，該屬性指向一個對象，該對象是由該構造函數創建的所有實例對象的原型。因此，可以通過構造函數的 Prototype 屬性來擴展對象的原型。對象可以訪問其原型中的屬性和方法，就像它們是對象自身的屬性和方法一樣。當對象嘗試訪問其自身不存在的屬性或方法時，它會沿著原型鏈向上查找，直到找到匹配的屬性或方法為止。

在 JavaScript 中，原型可以用於實現繼承和共用屬性和方法。通過創建一個新對象，並將其原型設置為另一個對象，可以實現原型繼承。此外，可以使用原型將屬性和方法添加到對象中，這些屬性和方法可以被該對象的所有實例共用。

總之，原型是JavaScript中一個非常重要的概念，掌握原型的原理和使用方法對於編寫高效、優雅的JavaScript代碼至關重要。


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • Navicat Premium 15 永久破解教程附激活工具(親測可用)
    PS：本教程破解工具均收集於網路，請勿商用，僅供個人學習使用，如有侵權，請聯繫作者刪除。若條件允許，希望大家購買正版 ！ 話不多說，直接上乾貨教程！！！ 第一步：Get Navicat premium 15安裝包和激活工具 Navicat Premium 15 永久激活工具(親測可用) 第二步：開始 ...
  • 搜索EE場景排序鏈路升級
    EE模塊是搜索系統中改善生態、探索商品的重要鏈路，其目標是緩解數據馬太效應導致模型對商品排序豐富性、探索性不足，帶來的系統非最優解問題。以下分別從模型迭代、線上實驗指標、離線評估體系介紹相應模塊的優化。 ...
  • 10個常見的 PostgreSQL 錯誤及避坑指南
    PostgreSQL 作為當下流行的資料庫，不少開發者因其開源、可靠、可擴展等特性把它應用到實際的生產環境中，幫助無數 PostgreSQL 廠商的 Percona 編製了一個最常見錯誤的列表。即使你認為自己已經正確地安裝配置 PostgreSQL，或許仍會發現此列表對於驗證你的安裝配置大有裨益。 ... ...
  • 修改安卓ID為硬體唯一ID
    前言： 最近接到個需求，我們新產品上的外包側APP需要使用硬體唯一ID（不管怎麼升級怎麼操作，ID始終不變和硬體綁定），用來做許可權校驗。 由於瞭解到安卓ID或序列號都會在擦除升級後重新隨機生成，所以這裡使用硬體上的ID來作為唯一ID，接下來進入正題 此篇以安卓7.1系統為例 一，常用硬體信息ID 這 ...
  • 【FAQ】獲取Push Token失敗，如何進行排查？
    一、 獲取Push Token的方式 獲取Push Token有兩種方式：一種是調用getToken方法向Push服務端請求Token，當getToken方法返回為空時，Token可通過onNewToken方法返回，因此需要實現onNewToken方法；另一種是自動初始化，Token通過onNewT ...
  • uniapp解決未配置appkey成功運行並離線打包apk的詳細圖文
    官方文檔https://nativesupport.dcloud.net.cn/AppDocs/usesdk/android.html一、將寫好的uniapp右鍵→發行→原生app-本地打包→生成本地打包App資源（它會要求你登錄賬號）二、它會生成一個文件夾三、點擊連接可以直接進入文件夾，路徑往上一 ...
  • 微信小程式的全局彈窗以及全局實例
    全局組件 微信小程式組件關係中，父組件使用子組件需要在父組件index.json中引入子組件，然後在父組件頁面中使用，這種組件的對應狀態是一對一的，一個組件對應一個頁面。如果有一個全局彈窗（登錄），那麼每個頁面引入一次組件會非常麻煩，這裡就需要封裝全局彈窗，在頁面直接引入使用即可。 微信小程式提供全 ...
  • JavaScript 中 Object，Map，Set 及數組遍歷方法
    Object（對象） for in 遍歷出對象可枚舉的"屬性"，包含繼承的可枚舉屬性 var person = { name: '小明', birth: 1990, height: 1.70 }; for(var x in person){ console.log(x); console.log(p ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類