tag 原型鏈

標籤
貢獻28
78
04:58 AM · Nov 06 ,2025
dirackeeko 頭像 snowwolfarden 頭像 limingcan562 頭像 linyuyizhizou_678b9fdc436f1 頭像 user_p5fejtxs 頭像 u_16164933 頭像 u_16993624 頭像 _6085362b65292 頭像 nqbefgvs 頭像 bencjl 頭像 icecreamlj 頭像 bianchengsanmei 頭像

@原型鏈 / 博客 RSS 訂閱

wojiaocuisite 頭像

我叫崔斯特 - 萬物皆空之 JavaScript 原型

ES6帶來了太多的語法糖，其中箭頭函數掩蓋了 this 的神妙，而 class 也掩蓋了本文要長篇談論的 原型。 最近，我重寫了這篇文章，通過本文，你將可以學到： 1. 如何用 ES5 模擬類； 2. 理解 prototype 和 __proto__； 3. 理解原型鏈和原型繼承； 4. 更深入地瞭解 JavaScript 這門語言。 引入：普通對象與函數對象 在 JavaScript 中，一直

原型 , 原型鏈 , Javascript

收藏 評論

linyuyizhizou_678b9fdc436f1 頭像

小帆聊前端 - JS 原型鏈深度解讀：從混亂到通透，掌握 90% 前端面試核心

JS 原型鏈深度解讀：從混亂到通透，掌握 90% 前端面試核心 前言：你是否也被這些原型鏈問題折磨過？ " 為什麼obj.toString()能調用卻不在自身屬性裏？" "prototype和__proto__到底有什麼區別？" " 用class定義的類和原型鏈是什麼關係？" "修改原型對象為什麼會影響所有實例？" 作為 JavaScript 的核心機制，原型鏈是理解繼承、對象關係和內置方法的基礎

原型鏈 , 前端 , Javascript

收藏 評論

yinzhixiaxue 頭像

銀之夏雪 - js繼承您瞭解多少呢

實現繼承的方式有很多，下面我們來寫常用的幾種（包括但不限於原型鏈繼承、構造函數繼承、組合繼承、寄生組合繼承、ES6繼承）： 原型鏈繼承 原型鏈繼承通過修改子類的原型為父類的實例，從而實現子類可以訪問到父類構造函數以及原型上的屬性或者方法。 // 原型鏈繼承 function Parent () { this.name = 'kobe' } Parent.prototype.getName

原型 , 繼承 , 原型鏈 , 前端 , Javascript

收藏 評論

zhaoxiaoman 頭像

漫姐賊6 - __proto__，constructor，prototype

__proto__(實際原型)和prototype(原型屬性)不一樣！！！ constructor屬性(原型對象中包含這個屬性，實例當中也同樣會繼承這個屬性) prototype屬性(constructor.prototype原型對象) __proto__屬性(實例指向原型對象的指針) 首先弄清楚幾個概念： 什麼是對象？ 若干屬性的集合 什麼是原型？ 原型是一個對象，其他對象可以

原型 , 原型鏈 , Javascript

收藏 評論

dirackeeko 頭像

DiracKeeko - [JS] javascript中的原型鏈03 原型鏈的終點

書接上文[[JS] javascript中的原型鏈02 prototypeconstructor](https://segmentfault.com/a/1190000043925349) 為了邏輯關係的清晰，我們去掉表示constructor的線條，加上Object對象，用.__proto__到達原型鏈的終點null。 javascript中原型鏈的終點是null，(Object.pro

原型 , 原型鏈 , 前端 , Javascript

收藏 評論

dirackeeko 頭像

DiracKeeko - [JS] javascript中的原型鏈02 prototype&constructor

這是構造函數和構造函數的prototype之間的關係 Person.prototype.constructor === Person; // true 那麼對Person創建的實例對象p1 p1.__proto__.constructor === Person; // true 在瀏覽器控制枱中輸入如下代碼 function Person(name) { this.name = name;

原型 , constructor , 原型鏈 , 前端 , Javascript

收藏 評論

dirackeeko 頭像

DiracKeeko - [JS] javascript中的原型鏈01 prototype&__proto__

先給出名詞的定義： 1、實例對象-被new出來對象稱之為實例對象 例如: const p1 = new Person() p1就是實例對象 2、普通對象-未經new，直接聲明的對象是普通對象 例如：const p2 = { name: "John" } p2就是普通對象 3、prototype， 中文翻譯：原型對象 4、__proto__ ，中文翻譯：原型 (英文可以讀作dunder

原型鏈 , 前端 , Javascript

收藏 評論

hard_heart_603dd717240e2 頭像

Hard heart - Vue與VueComponent的關係

結論：VueComponent.prototype.__proto__ === Vue.prototype Vue與VueComponent的關係如圖所示： （圖一） 前提知識： 每個函數function都有一個prototype屬性，即顯式原型（屬性），它默認指向Object空對象， 每個實例對象都有一個__proto__屬性，即稱隱式原型（屬性）。 關係圖分析：

組件設計 , vue.js , 原型鏈 , 前端 , Javascript

收藏 評論

gkymfrg1 頭像

ohoherror - 查找對象屬性的四種方法

1.Object.keys(..)會返回一個數組，包含所有可枚舉屬性（ enumerable: true） 2.Object.getOwnPropertyNames(...)會返回一個數組，包含所有屬性，無論它們是否可枚舉 注：Object.keys(..)和Object.getOwnPropertyNames(..)都只會查找對象直接包含的屬性。 3.in操作符會檢查屬性是否在

in , object , 原型鏈 , 前端

收藏 評論

banana_god 頭像

_香蕉大神 - JavaScript的原型鏈詳解

最近在項目中經常遇到，且與同事經常探討關於js原型鏈的知識。發現其實很多工作經驗好多年的同事也記不太清楚原型鏈的整個環節，今天在這裏專門的把鏈圖畫出來，並且加以講解，希望能夠幫到更多前端的朋友。 原型鏈其實就是一個三角關係，如下圖所示，我們編寫了一個構造函數Student,通過構造函數創建了對象s1（const s1 = new Student()），也就是我們經常説的s1是構造函數Student

構造函數 , 原型鏈 , 前端 , Javascript

收藏 評論

mi2nagemao 頭像

夜遊神 - js原型鏈圖解

參考《你不知道的JavaScript(上卷)》，按照自己理解做的對象關聯關係圖解，不保真。 細節重申 對象通過原型鏈(__proto__)查找屬性，一直到找到為止； new 的主要作用是創建新對象，其__proto__指向函數的 prototype，以及關聯this到新對象； Object.create 創建新對象，並將其__proto__指向舊對象。 依圖校驗 function Foo

prototype , 原型鏈 , Javascript

收藏 評論

limingcan562 頭像

limingcan - JS繼承面試的時候怎麼説？答應我，不要再死記硬背了好嗎？

前言 JS繼承這塊，ES6已經有class很香的語法糖實現了，ES6之前那些實現繼承的方法真的又多又長，説句心裏話，能不學真的不想再學，但是沒辦法，面試還是要搞你呀，所以這兩天看回ES6之前的繼承，發現還是蠻有意思的。寫這篇文章也是對自己的一個梳理總結，也希望能幫助到大家弄懂繼承這塊，這樣就不需要再死記硬背八股文，面試自由發揮就好。 JS的繼承，核心就是靠原型鏈完成。如果大家對原型鏈還不是很

面試 , 繼承 , 原型鏈 , 前端 , Javascript

收藏 評論

anchen_5c17815319fb5 頭像

anchen - 如何理解JS原型和原型鏈

每個函數（箭頭函數除外）都有prototype屬性，該屬性指向原型。 每個對象（null除外）都有__proto__屬性，指向了創建了該對象的構造函數的原型。（注：函數也是對象） 對象可以通過__proto__來尋找不屬於該對象的屬性，__proto__將對象連接起來組成了原型鏈。 理解原型和原型鏈，下面這張圖很重要： 根據上面這張圖，能夠得到如下等式： // 一、對象的__p

原型 , 原型鏈 , 前端 , Javascript

收藏 評論

snowwolfarden 頭像

SnowWolfArden - Day 92/100 原型鏈的繼承屬性

1、JS中的繼承 當談到繼承時，JavaScript 只有一種結構：對象。每個實例對象（object）都有一個私有屬性（稱之為 proto ）指向它的構造函數的原型對象（prototype）。 該原型對象也有一個自己的原型對象（__proto__），層層向上直到一個對象的原型對象為 null。根據定義，null 沒有原型，並作為這個原型鏈中的最後一個環節。 2、繼承屬性 JavaScript

原型鏈 , Javascript

收藏 評論

54r9rxzy 頭像

Tqing - JavaScript中原型與原型鏈

構造對象 function Person() {} let person = new Person() 上面程序建立了一個Person類型的實例 原型 function Person() {} Person.prototype.name = "ztq" Person.prototype.sayHi = function () {console.log("hello world")} l

原型 , 原型鏈 , Javascript

收藏 評論

qinglong_62898aa51988d 頭像

清隆 - 聊聊原型鏈與繼承

前言 原型鏈與繼承、作用域與閉包、單線程與異步並稱為前端的三座大山，均屬於 JavaScript 中基礎卻又十分複雜的部分，而且面試中也經常問到。 今天，我們就來詳細介紹一下原型鏈與繼承，聊聊它的概念、作用與用法。 如果掘友對此部分已經學過只是略微遺忘，可直接跳轉至原型鏈圖片看圖複習。 下面，讓我們循序漸進的介紹下原型鏈與繼承。 認識原型 在我們創建函數的同時，都會自動為其創建一個 prototy

原型 , 原型鏈 , 前端 , Javascript

收藏 評論

lpicker 頭像

lpicker - Object.toString.call()、Object.prototype.toString.call()？傻傻分不清楚

平常我們判斷某個變量類型的時候，會這樣寫： var foo; Object.prototype.toString.call(foo); // "[object Undefined]" 今天手誤，錯寫成了這樣： var foo; Object.toString.call(foo); // VM40:1 Uncaught TypeError: // Function.prototype.toStr

call , tostring , 原型鏈 , 前端 , Javascript

收藏 評論

snowwolfarden 頭像

SnowWolfArden - Function instanceof Object和Object instanceof Function都true

1、需求 在看原型鏈。沒想明白Function和Object的關係。就查了下。 2、原則 js之父在設計js原型、原型鏈的時候遵從以下兩個準則: 準則1：原型對象（即Person.prototype）的constructor指向構造函數本身 準則2：實例（即person）的__proto__和原型對象指向同一個地方 3、關係 null- Object.prototype - Functio

原型鏈 , Javascript

收藏 評論

limingcan562 頭像

limingcan - 關於原型鏈的問題，教你怎麼套用方法直接判斷，面試不再虛

前言 首先原型、原型鏈，算是前端進階裏面必不可少，十分重要的一塊了。由於這塊特別繞，所以面試官很喜歡用這一塊來辨別你的底層知識掌握的怎麼樣。用的第三方框架，庫裏面，很多功能模塊化了，但大部分功能都繼承自一個基類。既然涉及到繼承，那也必不可少得先了解原型鏈，所以原型鏈確實重中之重。 為什麼大家對原型，原型鏈子會感到“懵”跟“繞” 其本質是因為，大家都沒理清楚__proto__、prototype、c

繼承鏈 , 原型 , 繼承關係 , 繼承 , 原型鏈

收藏 評論

crmeb 頭像

CRMEB - 一文徹底搞懂原型鏈

前言 原型和繼承是js中非常重要的兩大概念。深入瞭解原型，也是學好繼承的前提。 先來看一下構造函數、實例、原型對象之間的關係 「實例與原型對象之間有直接的聯繫，但實例與構造函數之間沒有。」 兩個概念 js分為「函數對象」和「普通對象」，每個對象都有__proto__屬性，但是隻有函數對象且「非箭頭函數」才有prototype屬性。 屬性__proto__是一個對象【實例通過__pro

原型鏈

收藏 評論

kanjianliao 頭像

看見了 - 【js基礎複習】原型以及原型鏈

目錄 對象是什麼 構造函數 原型對象 實現繼承以及不同繼承方式 對象 為什麼要面向對象編程 代碼邏輯遷移更加靈活、代碼複用性高、高度模塊化 構造函數 function Person(name) { this.name = name this.getName = function(name) { return name } } const

繼承 , 原型鏈 , Javascript

收藏 評論

tsteam 頭像

tsteam - 理解原型/原型鏈

對於搞前端的小夥伴來説，不管是新手還是老鳥，我想對於原型應該都被折騰過，總是雲裏霧裏的感覺，要是原型都沒搞明白，你還好意思説你是前端攻城獅？ 關於對象 當一説到面向對象(Object-Oriented OO)時，你第一反應肯定想到類、對象、接口實現等概念，那我們這裏為啥已上來就説對象呢？因為ECMAScript裏沒有類，另外因為ECMAScript中的函數沒有簽名，所以也沒有接口。 ECMAScr

prototype , javascript原型 , 原型鏈 , Javascript

收藏 評論

bianchengsanmei 頭像

編程三昧 - 再解 JavaScript 原型與原型鏈

前言 JavaScript 原型與原型鏈雖然是一個老生常談的話題，但依然困惑着很多人，今天我再來從另一個角度談談這個問題。 兩個疑問 先看這樣一段代碼： let obj = {} obj.__proto__.haha = 'gogo' console.log(obj.haha) // "gogo" 運行一下上面的代碼，輸出結果為 gogo。 針對這個結果，有以下疑問： obj 哪來的 __p

原型 , 原型鏈 , 前端 , Javascript

收藏 評論

user_ze46ouik 頭像

Sunshine_Lin - 這可能是思否講「原型鏈」，講的最好最通俗易懂的了，附練習題！

前言 大家好，我是林三心，相信大家都聽過前端的三座大山：閉包，原型鏈，作用域，這三個其實都只是算基礎。而我一直覺得基礎是進階的前提，所以不能因為是基礎就忽視他們。今天我就以我的方式講講原型鏈吧，希望大家能牢固地掌握原型鏈知識 很多文章一上來就扔這個圖，但是我不喜歡這樣，我覺得這樣對基礎不好的同學很不好，我喜歡帶領大家去從零實現這個圖，在實現的過程中，不斷地掌握原型鏈的所有知識！！！來吧！！！跟着我

ecmascript-6 , 面試 , 原型鏈 , 前端 , Javascript

收藏 評論