JavaScript之继承与原型链

JavaScript的继承的实现与其它基于类的语言不同,JavaScript中的每个对象都有一个属性(__proto__),通过它来指向一个名为原型的对象,该原型对象也有自身的原型,层层向上,直到nullnull表示再往上没有原型。通过这种方式,形成了原型链。

函数

在js中,函数是非常特殊的,只有函数才有prototype属性。函数可以是一般函数(实现某个逻辑的代码块),也可以作为构造函数用于创建对象。

构造函数

js 复制代码
function person(name) {
    this.name = name
}
const personA = new person('xiaoming');
console.log(personA.name); // xiaoming

new Person('xiaoming')通过person构造函数创建了一个实例对象personA。而personA的原型就是函数personprototype,即personA.__proto__指向preson.prototype

js 复制代码
console.log(personA.__proto__ === person.prototype); // true
console.log(person.prototype);

函数person的prototype是一个对象,大概如下所示:

js 复制代码
{
  constructor: ƒ person(name),
  [[Prototype]]: {
    constructor: ƒ Object(),
    hasOwnProperty: ƒ hasOwnProperty(),
    isPrototypeOf: ƒ isPrototypeOf(),
    propertyIsEnumerable: ƒ propertyIsEnumerable(),
    toLocaleString: ƒ toLocaleString(),
    toString: ƒ toString(),
    valueOf: ƒ valueOf()
  }
}

可以看出person.prototype自带一个属性constructor,它指向了构造函数本身,我们可以验证一下

js 复制代码
console.log(person.prototype.constructor === person); // true

通过在构造函数的prototype对象上增加属性or函数,从而让所有的实例都能访问和使用。

js 复制代码
person.prototype.speak = function(msg) {
    console.log(msg);
}
person.prototype.hasEyes = true;
console.log(personA.hasEyes); // true
console.log(personA.speak('hello')); // hello

用下面这张图表示构造函数、实例和实例原型之间的关系:

__proto__

每个对象都有__proto__属性,指向的是它对应的原型对象。__proto__属性其实是来自于Object.prototype,所有的对象都继承了Object.prototype

另外,使用__proto__是不被推荐的,只是现代浏览器保留了而已,在未来的web标准中,可能会被移除,官方推荐使用Object.getPrototypeOf(obj)来获取对象的原型,使用Object.setPrototypeOf(obj, parent)可以将一个指定对象(obj)的原型设置为另一个对象(parent)。

js 复制代码
const obj = {};
console.log(Object.getPrototypeOf(obj) === Object.prototype); // true

改变原型链

实现对象A继承对象B,有很多种方法

使用Object.setPrototypeOf

js 复制代码
const A = {a: 1};
const B = {b: 2}
Object.setPrototypeOf(A, B);
console.log(A.b); // 2

使用类

js 复制代码
class A {
    a = 1;
}
class B extends A {
    b = 2
}
const b = new B();
console.log(b.a); // 1
console.log(b.__proto__ === B.prototype); // true
console.log(Object.getPrototypeOf(b) === B.prototype); // true
console.log(B.prototype.__proto__ === A.prototype); // true
console.log(Object.getPrototypeOf(B.prototype) === A.prototype); // true
相关推荐
ᥬ 小月亮2 分钟前
webpack基础
前端·webpack
YongGit21 分钟前
探索 AI + MCP 渲染前端 UI
前端·后端·node.js
慧一居士1 小时前
<script setup>中的setup作用以及和不带的区别对比
前端
RainbowSea1 小时前
NVM 切换 Node 版本工具的超详细安装说明
java·前端
读书点滴1 小时前
笨方法学python -练习14
java·前端·python
Mintopia2 小时前
四叉树:二维空间的 “智能分区管理员”
前端·javascript·计算机图形学
Mintopia2 小时前
Three.js 深度冲突:当像素在 Z 轴上玩起 "挤地铁" 游戏
前端·javascript·three.js
Penk是个码农2 小时前
web前端面试-- MVC、MVP、MVVM 架构模式对比
前端·面试·mvc
MrSkye2 小时前
🔥JavaScript 入门必知:代码如何运行、变量提升与 let/const🔥
前端·javascript·面试
白瓷梅子汤2 小时前
跟着官方示例学习 @tanStack-form --- Linked Fields
前端·react.js