百度360必应搜狗淘宝本站头条
grid 设置导航栏dedecms模版移位运算context xml
当前位置：网站首页 > 文章教程 > 正文

深入理解 JS 原型链

xsobi 2025-01-14 18:21 1 浏览

JS 中的原型链在面试中可以说是“必考题”

日常开发不常遇到，而且在 ES6 之后，原型链就更少见了

但是，如果设计框架或封装组件，可能就需要了解原型链

ES6 的类，可以认为是 ES5 的语法糖，因此本文主要以探究 ES5 为主

1. JS 创建对象与其他语言区别

以 C# 为例，C++/JAVA 等类似

1.1 C#

在 C# 中，类相当于一个模板，对象是模板创造的实例。代码编译后，类本身除了静态属性和静态函数，没有其他用处

1.2 JS

在 JS 中，ES5 及之前是没有类的概念，对象是通过构造函数创建的，即构造函数承载了类的功能，在构造函数中可以使用 this 为实例对象增加字段和函数，以及赋值的操作。这点对于有其他语言基础的人来说，思想较难转变

构造函数其本身也是对象，也可以当成一个普通函数来用

1
2
3
function Func(){} // 构造函数
new Func(); // 用构造函数创建对象
Func(); // 调用普通函数

JS 通过构造函数创建对象，会有以下对象参与其中

  • 构造函数：作为对象的构造函数
  • 构造函数的原型对象：对象的对象原型将指向构造函数的原型对象

2. 原型对象与对象原型

一般每个构造函数都有一个原型对象 Func.prototype，简单函数的原型对象是 Object 对象

一般每个对象都有一个对象原型 obj.__proto__，这个对象原型指向的是构造函数的原型对象，即

1
2
3
function Func(){} // 构造函数
const obj=new Func(); // 用构造函数创建对象
Func.prototype == obj.__proto__ // true

由于 JS 中调用对象方法时，先查找对象自身方法，再查找原型对象 __proto__ 中的方法，因此对象可以使用对象原型中的方法

原型对象也可以置空，这样构造函数创建的对象将没有额外方法，如 toString, hasOwnProperty 等

原型对象都有 constructor 字段，指向对应的构造函数

3. 原型链

由前面得出结论，对象和对象原型 __proto__ 形成了一个原型链，原型链的最顶端是 null，形如

1
obj.__proto__.__proto__.__proto__ == null // true

上面可能有很多节点，也可能没有节点，取决于创建方法

类每多一次继承就会多一个节点，ES5 中的写法是给构造函数的 prototype 赋值并修改 prototype.constructor

1
2
3
4
5
6

function Father() {} // 父类构造函数
function Son() { // 子类构造函数
  Father.call(this); // 等同于ES6: this.super();
}
Son.prototype = new Father(); // 不能直接 = Father，这样会导致 Father 和 Son 的对象原型指向同一个原型对象
Son.prototype.constructor = Son; // 原型对象需要指向构造函数，如果不赋值，指向的是 Father 构造函数

下面写法会创建一个没有原型链的顶层对象，一般不会用到

1
2
const obj = Object.create(null, {})
console.log(obj.__proto__) // undefined

每个对象，都可以使用原型链中的任意方法，因为调用方法时会按原型链逐级向上查找

4. ES6 类和对象

ES6 之前通过 构造函数 + 原型 实现面向对象编程
ES6 通过 类 实现面向对象编程

类的本质也是函数，也可以简单的认为，类就是 ES5 构造函数的简单写法

博客：https://blog.hal.wang/9c60be83 深入理解 JS 原型 | H

相关推荐

IWSC施行新一轮性能平衡变动 保时捷动力得到提升

在下周末IWSC美洲赛道(COTA)站的比赛开始前，IMSA又对赛事内多个组别的赛车进行了性能平衡(BoP)调整，其中GTD组别的保时捷911GT3R获得了动力上的提升。IMSA在本周四确定了最新...

22个超详细的 JS 数组方法

作者：Yushiahttps://juejin.cn/post/6907109642917117965...

碎片时间学编程「134]:JS 承诺中的 then 和 finally 有什么区别?

...

10 个常问的 JS 面试题

作者：JoanneLee-(Vivi)译者：前端小智来源：medium1.如何理解JS中的`this`关键字？JS初学者总是对this关键字感到困惑，因为与其他现代编程语言相比，JS中...

一文理解js原型和原型链是什么以及作用

js三座大山，这是第二座山，今天来和大家一起翻山越岭。阅读前请记住这句话js里万物皆对象。js原型、原型链一镜到底开始：1、知道什么是原型和原型链首先请想下你平常写代码数组的常用方法有哪几个，答：ma...

JS 类型检测:谈 typeof 和 instanceof 的缺陷与优化

在javascript中，typeof和instanceof是用来判断数据类型比较通用的两个方法，但这两种方式并不能完全解决实际中遇到的问题。因此，这篇文章的目的是通过对这两个方法介绍来分析其存...

Js中的new操作符起到什么作用?

Js是当今时代最常用的代码操作语言，其中new操作符尤为常见。对于很多代码小白来说，并不清楚new在Js中扮演着怎样的角色，具体是做什么用，干了什么。本文从new操作符的作用着手，简单介绍new操作符...

深入理解 JS 原型链

JS中的原型链在面试中可以说是“必考题”日常开发不常遇到，而且在ES6之后，原型链就更少见了...

一篇文章读懂JS原型和原型链

前言你好！欢迎阅读本篇文章，今天我将要用一篇文章带你深入理解JavaScript中的原型和原型链，让我们一起揭开原型神秘的面试，一起窥探其中的奥妙。一切皆是对象看到这个标题你可能就有你可能就有疑问了...

图文解说 javascript中 原型和原型链 构造函数 组合使用方法

原型和原型链原型和原型链...

JS原型、原型链深入理解

原型是JavaScript中一个比较难理解的概念，原型相关的属性也比较多，对象有”prototype”属性，函数对象有”prototype”属性，原型对象有”constructor”属性。...

Linux export命令用法

export命令是Linux/Unix中常用的命令之一，用于设置环境变量和将变量导出到子进程中。使用格式：export[-fnp][name[=value]]参数说明：-f：表示将函数名也一并传递...

Windows Unix Linux Android壁纸

复仇者联盟壁纸

在 Linux/Unix/Mac 下清除 DNS 查询缓存

在MS-Windows下,你可以使用ipconfig命令来清除dns缓存。然而，Linux和Unix提供了不同的方法来清除缓存。Linux可以运行nscd或者BIND或者dnsmasq作为...

如何在Linux系统安装中文输入法以及使用

在安装Linux系统时如果设置默认语言是英文，那么该如何输入中文呢？首先，无论是中文的还是英文的Linux系统，输入法基本都是内置的ibus输入法，如果你不想下载别的输入法，你可以就用ibus的中文输...

一周热门
最近发表
标签列表