一文徹底理解JavaScript原型與原型鏈
前言
如果你學(xué)習(xí) JavaScript，卻不理解原型和原型鏈，那就像學(xué)會了寫句子卻不理解語法規(guī)則。原型是 JavaScript 實(shí)現(xiàn)面向?qū)ο缶幊痰暮诵臋C(jī)制，也是面試中幾乎必考的知識點(diǎn)。本文將帶你徹底理解 JavaScript 的原型與原型鏈。
一、原型（prototype）是什么
1.1 原型的定義
在 JavaScript 中，原型（Prototype）是函數(shù)天生擁有的一個屬性。每當(dāng)你定義一個函數(shù)時(shí)，JavaScript 引擎會自動為這個函數(shù)添加一個 prototype 屬性，這個屬性的值是一個對象。
1.2 為什么要用原型？
- 我們可以將一些屬性和方法掛載在原型上，在創(chuàng)建實(shí)例之后，實(shí)例就可以調(diào)用這些屬性和方法
- 我們也可以將一些公用的屬性和方法添加在原型上，減少構(gòu)造函數(shù)在執(zhí)行時(shí)的性能開銷
function Car(color) { this.color = color; }
Car.prototype.name = 'su7';
const car1 = new Car('紅');
const car2 = new Car('藍(lán)');
console.log(car1.name === car2.name); // true，共享屬性
1.3 原型三大特性
| 特性 | 說明 |
|---|---|
| 函數(shù)天生擁有 | 每個函數(shù)都有 prototype |
| 實(shí)例可訪問 | 實(shí)例能調(diào)用原型上的方法 |
| 實(shí)例無法修改 | 修改實(shí)例只會創(chuàng)建自身屬性，不會影響原型 |
Car.prototype.name = 'su7';
const car = new Car('藍(lán)');
car.name = '蔚來'; // 創(chuàng)建實(shí)例自身屬性
console.log(Car.prototype.name); // su7，原型不受影響
二、隱式原型 (__ proto__)
2.1 什么是隱式原型
所有對象都有 __proto__ 屬性，指向創(chuàng)建該對象的構(gòu)造函數(shù)的原型：
function Person() {}
const p = new Person();
console.log(p.__proto__ === Person.prototype); // true
2.2 屬性查找規(guī)則
v8 在訪問對象中的一個屬性時(shí)，會先訪問對象中顯示存在的屬性，如果沒有，就會去對象的隱式原型上查找
Car.prototype.name = 'su7';
function Car(color) { this.color = color; }
const car = new Car('blue');
console.log(car.name); // su7（原型上找到）
console.log(car.color); // blue（自身屬性）
2.3 核心公式
實(shí)例.__proto__ === 構(gòu)造函數(shù).prototype 構(gòu)造函數(shù).prototype.constructor === 構(gòu)造函數(shù)
2.4 constructor 屬性
原型上的 constructor 指向構(gòu)造函數(shù)，記錄實(shí)例的創(chuàng)建者：
function Person() {}
console.log(Person.prototype.constructor === Person); // true
四、原型鏈詳解
4.1 原型鏈查找
v8 在訪問對象中的一個屬性時(shí)，會先訪問對象中顯示存在的屬性，如果沒有，就會去對象的隱式原型上查找，如果還沒有，就會順著隱式原型一直往上找，直到找到 null 為止，這個查找關(guān)系，就叫原型鏈查找
4.2 原型鏈繼承
原型鏈?zhǔn)菍?shí)現(xiàn)繼承的核心機(jī)制：
Grand.prototype.house = function() { console.log('湯臣一品'); };
function Grand() { this.card = 100000000; }
Father.prototype = new Grand();
function Father() { this.lastName = '張'; }
Child.prototype = new Father();
function Child() { this.age = 18; }
const p = new Child();
p.house(); // 湯臣一品（通過原型鏈找到）
4.3 完整原型鏈
const f1 = new Foo() 1.f1.__proto__ = Foo.prototype 2.Foo.prototype.__proto__ = Object.prototype 3.Object.prototype.__proto__ = null 4.Foo.__proto__ = Function.prototype 5.Function.prototype.__proto__ = Object.prototype 6.Function.__proto__ = Function.prototype
五、總結(jié)
原型與原型鏈?zhǔn)?JavaScript 實(shí)現(xiàn)面向?qū)ο蟮暮诵臋C(jī)制。每個函數(shù)都有 prototype 屬性指向原型對象，每個對象都有 __proto__ 指向構(gòu)造函數(shù)的原型，它們通過 constructor 形成緊密聯(lián)系。屬性查找時(shí)，JS 會沿著 __proto__ 形成的鏈向上查找，直到 null .
到此這篇關(guān)于JavaScript原型與原型鏈的文章就介紹到這了,更多相關(guān)JS原型與原型鏈內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
本文主要分享了js實(shí)現(xiàn)打地鼠小游戲的示例代碼。具有很好的參考價(jià)值，下面跟著小編一起來看下吧2017-02-02
利用JavaScript實(shí)現(xiàn)ISO周日歷
周日歷是日常生活中不常用到的歷法系統(tǒng)，一般用于政府、商務(wù)的會計(jì)年度或者學(xué)校教學(xué)日歷中。本文將利用JavaScript制作個簡單的周日歷，感興趣的可嘗試一下2022-07-07
《javascript設(shè)計(jì)模式》學(xué)習(xí)筆記三：Javascript面向?qū)ο蟪绦蛟O(shè)計(jì)單例模式原理與實(shí)現(xiàn)方法分析
這篇文章主要介紹了Javascript面向?qū)ο蟪绦蛟O(shè)計(jì)單例模式原理與實(shí)現(xiàn)方法,結(jié)合實(shí)例形式分析了《javascript設(shè)計(jì)模式》中Javascript面向?qū)ο髥卫Ｊ较嚓P(guān)概念、原理、用法及操作注意事項(xiàng),需要的朋友可以參考下2020-04-04
離開頁面時(shí)檢測表單元素是否被修改,提示保存的js代碼
離開頁面時(shí),檢測表單元素是否被修改,然后給出提示.防止用戶錯失修改的機(jī)會，提高用戶體驗(yàn)。2010-08-08
這篇文章主要介紹了觸屏中的JavaScript事件,實(shí)例分析了觸屏事件的種類、原理與相關(guān)使用技巧,需要的朋友可以參考下2015-02-02
漂亮的widgets，支持換膚和后期開發(fā)新皮膚...2007-04-04
javascript function(函數(shù)類型)使用與注意事項(xiàng)小結(jié)
這篇文章主要介紹了javascript function(函數(shù)類型)使用與注意事項(xiàng),結(jié)合實(shí)例形式較為詳細(xì)的分析了Function(函數(shù))類型的基本聲明、屬性、方法相關(guān)操作技巧與使用注意事項(xiàng),需要的朋友可以參考下2019-06-06
1秒50萬字!js實(shí)現(xiàn)關(guān)鍵詞匹配
1秒50萬字!js實(shí)現(xiàn)關(guān)鍵詞匹配，快速進(jìn)行關(guān)鍵字匹配，感興趣的小伙伴們可以參考一下2016-08-08
JavaScript中iframe實(shí)現(xiàn)局部刷新的幾種方法匯總
Iframe是一種嵌入網(wǎng)頁的框架形式，Web頁面可以通過更改嵌入的部分，達(dá)到部分內(nèi)容刷新，通過本文和大家一起學(xué)習(xí)iframe實(shí)現(xiàn)局部刷新的幾種方法匯總，對iframe局部刷新相關(guān)知識感興趣的朋友一起學(xué)習(xí)吧2016-01-01
JavaScript練習(xí)語法及建議總結(jié)大全
JavaScript 是一個程序語言,語法規(guī)則定義了語言結(jié)構(gòu),這篇文章主要介紹了JavaScript練習(xí)語法及建議總結(jié)的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2025-07-07