JS基礎：Prototype Chain 原型鏈

最新推荐文章于 2022-12-09 17:42:52 发布
最新推荐文章于 2022-12-09 17:42:52 发布
阅读量330 收藏 2
点赞数 1
分类专栏： JavaScript 文章标签： js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44691608/article/details/106722970
版权

JS 基礎：Prototype Chain 原型鏈

文章目錄

簡介

說到面對對象編程(OOP)，當然不能沒有繼承(Inherit)。作為代碼複用最基礎的方式便是透過繼承，將子類透過繼承父類的方法或屬性來擴展對象的能力。對象(Object)類型肯定是 JS 代碼中最常用的類型，那麼 JS 是如何實現繼承的呢？

然而與 Java、C++ 的基於類型(class-based)的繼承機制不同，JavaScript 並沒有實作類型(class)定義(即便是 ES6 的 class 也僅僅是語法糖)。JS 是基於原型(prototype-based)的繼承機制，而 JS 中的類型定義其本質就是一個函數。接下來就讓我娓娓道來 JavaSciprt 基於原型的繼承機制吧。

參考

JavaScript深入之从原型到原型链https://github.com/mqyqingfeng/blog/issues/2
繼承與原型鏈https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Inheritance_and_the_prototype_chain

正文

Object 對象創建

首先我們先來看看最基本的對象(Object)是如何聲明和創建的：

直接量 {}

const o1 = { name: 'John', age: 18 }

內置構造函數 new Object()

const o1 = new Object()
const o2 = new Object(null)
const o3 = new Object({})
const o4 = new Object(o1) // 這邊傳遞的是引用，o1 和 o4 將指向同一個對象

使用 Object.create(proto, propertiesObject)

// 使用 Object.create
const o6 = Object.create(Object.prototype)
const o7 = Object.create(Object.prototype, {
  name: {
    value: 'John'
  },
  age: {
    value: 18,
    writable: false
  }
})

注意！ Object.create 方法非常重要，將作為下面繼承方式的基礎

Class 類型

有了對象之後，我們創建出來的依舊是一個個獨立的對象，沒有統一的規範和樣式。在面對對象的編程思維(OOP)中，需要定義類型(Class)，而所有對象實例(Instance)都應該基於類型來創建，創建出來的物件簡稱為對象或是實例(反正就是一個 Object 或是稱為 Instance)。

但是 JavaScript 裡面根本沒有 class 關鍵字(這邊不考慮 ES6 提供的 class 語法糖)，沒有辦法像 Java、C++ 那樣聲明定義類型然後創建對象。當然 JS 的對象機制也不是基於類型(class-based)的，而是基於原型(prototype-based)的

在 JS 中，類型(class)本質上就是一個函數(Function)，有趣的是同樣使用 new 關鍵字來創建對象實例：

// 聲明 Person 類型，使用 this 來指向對象實例的屬性
function Person() {
  this.name = 'John'
  this.age = 18
}

const person = new Person()

可以從上面的形式看出來，作為"類型"的函數就好像這個類型的構造函數一樣，下面貼上 babel 編譯後的代碼讓大家也能了解到 ES6 的 class 語法糖是如何轉換回 ES5 以前的代碼的（有興趣的可以自己到Babel 官方嘗試）：

  • ES6 class
class Person {
  constructor() {
    this.name = 'John'
    this.age = 18
  }
}
  • babel 編譯後
'use strict'

var Person = function Person() {
  this.name = 'John'
  this.age = 18
}

我們能夠看到 Person 類就被編譯為一個函數，而構造函數(constructor)便是這個方法的主函數體

Prototype 原型

現在我們能夠基於類型創建對象了，接下來我們來了解什麼叫原型(prototype)。

首先我們先來看沒有使用原型的時候，為對象添加方法會發生什麼事：

Function without prototype

function Person(name) {
  this.name = name
  this.hi = function () {
    console.log(`Hi! I am ${this.name}`)
  }
}
const p1 = new Person('John')
const p2 = new Person('Andy')
p2.hi = function () {
  console.log('new hi function')
}
p1.hi()
p2.hi()

// output:
// Hi! I am John
// new hi function

這邊我們發現 p1、p2 的 hi 方法是互相獨立的，也就導致我們修改了 p2 的方法之後，p1 的方法還是原來的形式。

然而對於面對對象編程(OOP)來說，同樣類型的方法相同，並且應該只能存在一個函數體，而不是為每個對象創建一個新的方法。這時候我們就必須使用到原型。

Function with prototype

我們先看範例，再來說明原型的概念：

function Person(name) {
  this.name = name
}
Person.prototype.hi = function () {
  console.log(`Hi! I am ${this.name}`)
}
const p1 = new Person('John')
const p2 = new Person('Andy')
p1.hi()
p2.hi()

// output:
// Hi! I am John
// Hi! I am Andy

太神奇了傑克！如此一來，我們透過將 hi 方法變成 Person 類型的 prototype 對象上，就使得所有基於 Person 類型所創建的對象都能調用同樣的方法，也只需要定義一次。那麼話說回來，這個 prototype 到底是個什麼玩意兒？

Concept 概念

在 JS 中，所謂類型(class)的本質就是一個函數(Function)（上面也提過了），它在創建對象(new)的時候將被作為構造函數(constructor)來調用。而一個對象(object)的創建必定離不開三大要素：

  1. 構造函數(constructor)：即定義類型的原函數
  2. 原型對象(prototype)：每個構造函數都會存在一個原型對象(注意！原型本身也是一個對象)
  3. 對象實例(object)：真正運行時存活在堆(Heap)中的對象實例

三個要素之間的關係如下圖：

  • 橢圓形表示一個存活在堆(Heap)中的對象(object)
  • 六邊表示構造方法(constructor)，也就是最原始的類型函數聲明

並且三者之間有如下訪問規則：

  1. __proto__：對象訪問其原型
  2. prototype：構造函數訪問其原型
  3. constructor：對象訪問其構造函數時

通常一個對象最基本只會擁有 __proto__ 屬性，而其 constructor 屬性則是綁定在其原型對象(prototype)之上。

接下來我們舉個例子：

Sample
  • 類型聲明 & 創建對象
function Person(name) {
  this.name = name
}
const person = new Person()
  • 對應類圖

Prototypte is an Object 原型也是對象

注意！這邊必須記得，所謂的原型(prototype)本身也是某一個對象，這對接下來了解原型鏈以及繼承機制非常重要

Prototype Chain 原型鏈（也就是所謂的繼承Inherit啦！）

接下來我們就可以透過將某個對象實例(object)變成新的類型的原型對象(prototype)，如此便能夠創造出 JS 語言中的繼承形式，也就是所謂的原型鏈(prototype chain)：

如上圖所示，B 繼承 A，C 又繼承 B。

而 JS 在運行時會先查找對象自身的屬性，若訪問的屬性不存在則會在原型鏈上不斷向上查找直到最頂部。接下來我們看一個範例：

Sample

首先我們先借助 babel 編譯後的一個函數：

function _inheritsLoose(subClass, superClass) {
  subClass.prototype = Object.create(superClass.prototype)
  subClass.prototype.constructor = subClass
  subClass.__proto__ = superClass
}
  • 說明：為了要實現類型間的繼承，我們需要對子類進行三個步驟：
  1. subClass.prototype = Object.create(superClass.prototype)：創建一個父類的對象實例並作為子類的原型對象
  2. subClass.prototype.constructor = subClass：將原型對象的構造函數重新指向子類
  3. subClass.__proto__ = superClass：將子類的構造函數原型指向父類的構造函數

接下來寫出我們的類(class 本質上是 funciton)定義（參考 babel 編譯後代碼）：

const SuperClass = (function () {
  function SuperClass() {
    this.name = 'super class'
  }

  const _proto = SuperClass.prototype

  _proto.hi = function hi() {
    console.log(this.name)
  }

  return SuperClass
})()

const SubClass = (function (_SuperClass) {
  _inheritsLoose(SubClass, _SuperClass)

  function SubClass() {
    let _this

    _this = _SuperClass.call(this) || this
    _this.name = 'sub class'
    return _this
  }

  return SubClass
})(SuperClass)

const sub = new SubClass()
sub.hi()

// output:
// sub class

如果上面的寫法太難的話這邊給出一個白話文版本（不過上面的代碼還是建議把它看懂，也是提升自己的代碼素養）：

function SuperClass() {
  this.name = 'super class'
}

SuperClass.prototype.hi = function () {
  console.log(this.name)
}

function SubClass() {
  this.name = 'sub class'
}

SubClass.prototype = Object.create(SuperClass.prototype)
SubClass.prototype.constructor = SubClass
SubClass.__proto__ = SuperClass

const sub = new SubClass()
sub.hi()

// output:
// sub class

下面用圖來表示繼承的步驟：

示例代碼中調用的 hi 方法步驟：

  1. sub 對象中查找，沒找到對應函數
  2. 再到 SubClass.prototype，也就是 sub 的原型對象中查找，還是沒有
  3. 最後到 SuperClass.prototype 中找到對應函數並調用，同時 SuperClass.prototype 就是 SubClass.prototype 的原型

Built-in Classes 內置類(內置的構造函數)

最後來介紹一下 JS 的內置函數。平常寫代碼的時候可能會用過如 Boolean、Number、Object、Array、RegExp 等內置函數，而這些內置函數的關係又是如何呢？話不多說先上圖：

我們發現內置類與我們自己定義的類型是擁有同樣層級的原型鏈的，謎底揭曉（好吧其實也不是什麼大秘密）

這也是為什麼所有對象必定都有一個 toString 方法，因為他定義在 Object.prototype 上，而 Object.prototype 就是所有對象的原型鏈的根源，他本身是沒有原型的(Object.prototype.__proto__ === null)，並且所有構造函數的原型都是 Function.prototype(Function.__proto__ === Function.prototype 的定義能夠保證一致性)

補充：ES6 Class

最後貼上一段 ES6 的 Class 寫法，以及 babel 編譯過後的結果供大家參考：

  • ES6 class
class A {
  constructor() {
    this.a = 'a'
  }

  showDetail() {
    console.log(`this.a = ${this.a}`)
  }
}

class B extends A {
  constructor() {
    super()
    this.b = 'b'
  }

  showDetail() {
    super.showDetail()
    console.log(`this.b = ${this.b}`)
  }
}

class C extends B {
  constructor() {
    super()
    this.a = 'ca'
    this.b = 'cb'
  }

  showDetail() {
    super.showDetail()
  }
}

const a = new A()
const b = new B()
const c = new C()
console.log('invoke a.show')
a.showDetail()
console.log('invoke b.show')
b.showDetail()
console.log('invoke c.show')
c.showDetail()

// output:
// invoke a.show
// this.a = a
// invoke b.show
// this.a = a
// this.b = b
// invoke c.show
// this.a = ca
// this.b = cb
  • babel 編譯後
'use strict'

function _inheritsLoose(subClass, superClass) {
  subClass.prototype = Object.create(superClass.prototype)
  subClass.prototype.constructor = subClass
  subClass.__proto__ = superClass
}

var A = /*#__PURE__*/ (function () {
  function A() {
    this.a = 'a'
  }

  var _proto = A.prototype

  _proto.showDetail = function showDetail() {
    console.log('this.a = ' + this.a)
  }

  return A
})()

var B = /*#__PURE__*/ (function (_A) {
  _inheritsLoose(B, _A)

  function B() {
    var _this

    _this = _A.call(this) || this
    _this.b = 'b'
    return _this
  }

  var _proto2 = B.prototype

  _proto2.showDetail = function showDetail() {
    _A.prototype.showDetail.call(this)

    console.log('this.b = ' + this.b)
  }

  return B
})(A)

var C = /*#__PURE__*/ (function (_B) {
  _inheritsLoose(C, _B)

  function C() {
    var _this2

    _this2 = _B.call(this) || this
    _this2.a = 'ca'
    _this2.b = 'cb'
    return _this2
  }

  var _proto3 = C.prototype

  _proto3.showDetail = function showDetail() {
    _B.prototype.showDetail.call(this)
  }

  return C
})(B)

var a = new A()
var b = new B()
var c = new C()
console.log('invoke a.show')
a.showDetail()
console.log('invoke b.show')
b.showDetail()
console.log('invoke c.show')
c.showDetail()

結語

本篇介紹了原型鏈，也是 JS 面對對象編程的基礎。雖然與 Java、C++ 等基於類型的繼承機制不同，但是 JavaScript 的原型鏈也有其自己的好處。完全搞清楚原型鏈是身為一個 JavaScript 工程師必備的基礎技能之一，唯有暸解語言最基礎的能力，才能寫出更穩定而健全的代碼。

超悠閒
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
get-prototype-chain:返回对象原型链的数组
05-09
获取原型链 返回带有传入对象的原型链（按升序）的数组。安装npm install --save get-prototype-chain用法const getPrototypeChain = require ( 'get-prototype-chain' ) ;class A {}class B extends A {}class C ...
javascript prototype 原型链
10-30
JavaScript中的原型链（Prototype Chain）是理解面向对象编程在JavaScript中的实现方式的关键概念。原型链是基于原型（Prototype）机制的一种实现，它允许对象继承其他对象的属性和方法。在JavaScript中，每个函数...
原型链继承深入理解；new操作符理解；（转载）
鲁宽宽的博客
11-22 386
本文转自：https://www.css88.com/archives/10022 ；（强烈建议看链接页面的！） 主要为了方便自己查看！ 引言：如果不处理对象，您就无法在 JavaScript 方面取得很大进展。它们几乎是 JavaScript 编程语言的所有方面的基础。在这篇文章中，您将了解用于实例化新对象的各种模式，在此过程中，您将逐步深入了解 JavaScript 的原型。 基础入门 ...
JavaScript知识点之prototype
玉案轩窗的博客
08-18 1841
前言prototype是所有函数都有的内置属性，prototype属性的值是对象，该对象称之为原型对象。原型是Js的核心概念之一，它引申出继承、原型链等其他概念，本文就详细的分析总结下prototype的相关知识点。在理解prototype之前，我觉得有必要讲讲面向对象，当然这里不会讲很多，就讲讲Js的面向对象与Java面向对象的区别。 联系：都是面向对象编程 区别：
js原型prototype
xingxingxingge的博客
04-04 619
一、构造函数 构造函数就是一个普通函数,一般构造函数是首字母大写 构造函数执行流程 创建一个新对象 // 只要调用了 new Person() 立刻创建一个新对象 将函数的 this 指向新对象 执行函数中的代码 返回新对象 示例: function Person(name){ this.name = name this.alert_name = f...
JavaScript prototype 使用介绍
weixin_34221073的博客
07-12 2829
JavaScript prototype 使用介绍 用过JavaScript的同学们肯定都对prototype如雷贯耳，但是这究竟是个什么东西却让初学者莫衷一是，只知道函数都会有一个prototype属性，可以为其添加函数供实例访问，其它的就不清楚了，最近看了一些 JavaScript高级程序设计，终于揭开了其神秘面纱 用过JavaScript的同学们肯定都对prototype如雷...
JS中Prototype属性解释及常用方法
zp19860529的博客
07-06 2027
1、prototype的定义 javascript中的每个类都有prototype属性，其prototype属性的解释是：返回对象类型原型的引用。每一个构造函数都有一个属性叫做原型。这个属性非常有用：为一个特定类声明通用的变量或者函数。你不需要显式地声明一个prototype属性，因为在每一个构造函数中都有它的存在。你可以看看下面的例子： function Test(){} console.log(Test.prototype); 输出： 2 、什么是原型 原型:现在有1个类A,我想要创建
JavaScript中的原型链prototype介绍
10-24
JavaScript中的原型链（prototype chain）是实现对象继承和属性查找机制的关键部分。在这个概念中，每个对象都有一个内部属性`[[Prototype]]`，通常通过`__proto__`、`Object.getPrototypeOf()`或`o.constructor....
JavaScript使用原型和原型链实现对象继承的方法详解
10-20
原型链（prototype chain）则是通过原型对象间的引用形成的一条链路，允许子对象访问父对象的属性和方法。 在JavaScript中，`__proto__`属性（非标准，但在大部分现代浏览器中支持）和`Object.getPrototypeOf`方法...
js 对象的prototype,__proto__的理解
m0_49016709的博客
03-03 2297
js中对象分为两种：普通对象和函数对象。Object ，Function 是JS自带的函数对象。 普通对象和函数对象 // 普通对象的定义方法 let a = new Object(); // typeof a === object let b = {}: // typeof b === object let c = new function(){}; // typeof c === object // 函数对象 let a2 = function() {};
chain.js:函数将数组包装成链
06-26
#Chain.JS# 用于创建循环数组的函数。 用于菜单、旋转器等。 例子 ＃＃＃创造＃＃＃ var menu = new Chain ( [ "New" , "Copy" , "Edit" , "Delete" , 1 , 2 , 3 , null ] ) ; ＃＃方法＃＃ 下一个 上一页 当前的 第一的 最后的 重启 是结束 是开始 去 结束 获取项目 beginFrom（返回带有移位列表的新链） 获取索引 ###将项目添加到链### menu . getItems ( ) . push ( "new item" ) ; menu . getItems ( ) . push ( 3.14 ) ; menu . getItems ( ) . push ( { id : 123 , name : "John" } ) ; ＃＃＃移动＃＃＃ menu . current
问：前端中的原型链（Prototype Chain）是何物？
公众号 @ 桃小瑞
12-09 500
原型及原型链、继承是我们在进一步掌握 Javascript 的过程中必不可少的一步，掌握后我们将能够进一步的提升自己。
JS中的prototype
weixin_34390105的博客
06-03 256
JS中的phototype是JS中比较难理解的一个部分   本文基于下面几个知识点:   1 原型法设计模式 在.Net中可以使用clone()来实现原型法 原型法的主要思想是，现在有1个类A,我想要创建一个类B,这个类是以A为原型的,并且能进行扩展。我们称B的原型为A。   2 javascript的方法可以分为三类： a 类方法 b 对象方法 c 原型方法 例子： ...
JS高级之prototype的使用
qq_44586361的博客
02-20 1565
1.prototype的介绍 每个函数都有一个prototype属性，默认指向一个Object空对象(原型对象) 原型对象中有一个constructor,指向函数对象 下面是一个例子： function People(name,age){ this.name = name; this.age = age; } 如果要添加一个新的属性需要在构造函数里面添加，比如要添加一个sex属性 function People(name,age){ this.name = name;
js 设计模式 第六章 chaining
xiongzhengxiang的专栏
10-22 557
why？ chain 是针对对象的，chain链条上的所有方法都是这个对象的方法 一个没有用chain技巧的 var dom = document.getElementById('dom'); setStyle(dom,'color','green'); show(dom); 如果使用了chain $('dom').setStyle('color','green').sh
js prototype 详解(学习)
weixin_33994444的博客
12-20 157
<html><head> <title>JS学习</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head><body>js prototype 详解<s
JavaScript的prototype是什么？
Learn-anything.cn
11-21 586
一、prototype 是什么？ prototype 是每个函数(不包括箭头函数)都默认具有的属性，默认值为：指向函数本身的 constructor 对象。 1、查看 prototype // 缺省值为：Rabbit.prototype = { constructor: Rabbit } function Rabbit() { } alert(Rabbit.prototype.constructor == Rabbit) // rabbit继承了constructor let rabbit = new
#JS#原型链（prototype chain）
LoHiauFung的博客
11-06 1682
什么是原型链 涉及到继承这一块，Javascript 只有一种结构，那就是：对象。在 javaScript 中，每个对象都有一个指向它的原型（prototype）对象的内部链接。这个原型对象又有自己的原型，直到某个对象的原型为 null 为止（也就是不再有原型指向），组成这条链的最后一环。这种一级一级的链结构就称为原型链（prototype chain） ——MDN文档 图1 JS原型
关于prototype Chain创建对象和实现继承
magicli20的专栏
03-06 491
今天查阅资料发现有资料说我们在使用原型链(prototype chain)的方式实现继承的时候，是不能实现传递参数的构造方法的，觉得这块很乱就做了几个实验！并发表下实验结果和大家一起讨论： 1.首先从我们使用prototype来创建对象说起       function Parent() { Parent.prototype.name="zhaogao"; } var p=new Pa
js原型和原型链
最新发布
05-30
而原型链（prototype chain）则是一种机制，用于实现基于原型的继承。 在JavaScript中，每个对象都有一个 __proto__ 属性，它指向该对象的原型对象。如果在该对象上找不到某个属性或方法，JavaScript引擎会自动到该...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值