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
相关推荐
excel9 分钟前
JavaScript 中 WeakMap、WeakSet、Set、Map、Object、Array 的区别与应用场景
前端
haaaaaaarry1 小时前
Element Plus常见基础组件(一)
java·前端·javascript·vue.js
qingyingWin1 小时前
原生微信小程序研发,如何对图片进行统一管理?
前端·微信小程序
不懂英语的程序猿1 小时前
【JEECG】JVxeTable表格拖拽排序功能
前端·后端
拾光拾趣录1 小时前
前端灵魂拷问:从URL到Redux,17个常见问题
前端·面试
萌萌哒草头将军1 小时前
Prisma ORM 又双叒叕发布新版本了!🚀🚀🚀
前端·javascript·node.js
mldong2 小时前
推荐一款超高颜值的后台管理模板!Art-Design-Pro!开源!免费!
前端·vue.js·架构
草字2 小时前
uniapp 如果进入页面输入框自动聚焦,此时快速返回页面或者跳转到下一个页面,输入法顶上来的页面出现半屏的黑屏问题。
java·前端·uni-app
程序视点2 小时前
Wise Duplicate Finder 重复文件查找工具 - 永久免费专业版文件去重工具
前端·windows
一点一木3 小时前
🚀 2025 年 07 月 GitHub 十大热门项目排行榜 🔥
前端·人工智能·github