原型链与继承

#搞懂还是得自己动手#

原型链

javascript 复制代码
function Person(name) { 
  this.name = name;
}
Person.prototype.sayName = function() { 
  console.log(this.name);
};

const p = new Person("Alice");

原型链关系图:

原型链:person->Person.prototype->Object.prototype->null

继承

利用原型实现继承

组合继承

javascript 复制代码
function Parent(name) {
  this.name = name;
}
Parent.prototype.say = function() {};

function Child(name) {
  Parent.call(this, name); // 第1次调用Parent
}
Child.prototype = new Parent(); // 第2次调用Parent(导致Child.prototype冗余属性)

子类创建一次,父类构造函数需执行两次

寄生组合继承

javascript 复制代码
function inheritPrototype(Child, Parent) {
  const prototype = Object.create(Parent.prototype); // 创建父类原型副本(避免直接引用)
  prototype.constructor = Child; // 修正constructor指向
  Child.prototype = prototype;
}

// 父类
function Parent(name) {
  this.name = name;
}
Parent.prototype.say = function() {};

// 子类
function Child(name, age) {
  Parent.call(this, name); // 仅调用一次父类构造函数
  this.age = age;
}

// 继承原型方法
inheritPrototype(Child, Parent);

// 子类新增方法
Child.prototype.run = function() {};
  • 仅调用一次父类构造函数
  • 子类原型链纯净,无冗余属性
  • 创建中间对象,增加内存开销

参考:彻底搞懂JS原型与原型链-腾讯云开发者社区-腾讯云

相关推荐
brzhang7 分钟前
别再梭哈 Curosr 了!这 AI 神器直接把需求、架构、任务一条龙全干了!
前端·后端·架构
Kagol15 分钟前
TinyEditor v4.0 alpha 版本发布,更强大的表格、更丰富的表情、体验更好的图片/视频/文件上传功能
前端·开源
The_era_achievs_hero20 分钟前
微信131~140
开发语言·javascript·微信
然我25 分钟前
路由还能这么玩?从懒加载到路由守卫,手把手带你解锁 React Router 进阶技巧
前端·react.js·面试
良木林1 小时前
JavaScript书写基础和基本数据类型
开发语言·前端·javascript
工业甲酰苯胺8 小时前
TypeScript枚举类型应用:前后端状态码映射的最简方案
javascript·typescript·状态模式
brzhang8 小时前
我操,终于有人把 AI 大佬们 PUA 程序员的套路给讲明白了!
前端·后端·架构
止观止9 小时前
React虚拟DOM的进化之路
前端·react.js·前端框架·reactjs·react
goms9 小时前
前端项目集成lint-staged
前端·vue·lint-staged
谢尔登9 小时前
【React Natve】NetworkError 和 TouchableOpacity 组件
前端·react.js·前端框架