Object.create的原型继承

● 首先我们来从这种方法来创建一个和之前一样计算年龄的方法

javascript 复制代码
const PersonProto = {
  cacleAge() {
    console.log(2038 - birthYear);
  }
};

const zhangsan = Object.create(PersonProto);
console.log(zhangsan);

● 发现确实可以实现原型继承的特性

javascript 复制代码
const PersonProto = {
  cacleAge() {
    console.log(2038 - this.birthYear);
  }
};

const zhangsan = Object.create(PersonProto);
console.log(zhangsan);
zhangsan.name = 'ZhangSan';
zhangsan.birthYear = 2002;
zhangsan.cacleAge();

总结

● 使用 Object.create 创建对象时,新对象会直接链接到指定的原型对象。这意味着新对象可以访问原型对象上的属性和方法。

● 但是构造函数是 JavaScript 中另一种实现对象创建和继承的方法。通常,我们会定义一个函数,并使用 new 操作符来创建实例。

● Object.create 是一种更为简洁和直接的原型继承方式,适合创建新对象并链接已有对象的情况。而造函数则是传统的面向对象编程方式,适合需要初始化多个实例和实现复杂继承关系的场景。

验证

javascript 复制代码
console.log(zhangsan.__proto__ == PersonProto);

● 最上面那种给对象传参数的方法看上去有点蠢,我们也可以向下面这样去写

javascript 复制代码
const PersonProto = {
  cacleAge() {
    console.log(2038 - this.birthYear);
  },
  init(firstName, birthYear) {
    this.firstName = firstName;
    this.birthYear = birthYear;
  }
};
const lisi = Object.create(PersonProto);
lisi.init('lisi', 1998);
lisi.cacleAge();
相关推荐
艾莉丝努力练剑7 分钟前
【C语言】学习过程教训与经验杂谈:思想准备、知识回顾(三)
c语言·开发语言·数据结构·学习·算法
独立开阀者_FwtCoder12 分钟前
面试官:为什么在 Vue3 中 ref 变量要用 .value?
前端·javascript·vue.js
独立开阀者_FwtCoder15 分钟前
手握两大前端框架,Vercel 再出手拿下 Nuxt.js,对前端有什么影响?
前端·javascript·vue.js
独立开阀者_FwtCoder16 分钟前
弃用 html2canvas!快 93 倍的截图神器!
前端·javascript·vue.js
伍哥的传说1 小时前
H3初识——入门介绍之常用中间件
前端·javascript·react.js·中间件·前端框架·node.js·ecmascript
AA-代码批发V哥1 小时前
JavaScript之数组方法详解
javascript
洛小豆1 小时前
深入理解Pinia:Options API vs Composition API两种Store定义方式完全指南
前端·javascript·vue.js
Jokerator1 小时前
Vue 2现代模式打包:双包架构下的性能突围战
javascript·vue.js
洛小豆2 小时前
JavaScript 对象属性访问的那些坑:她问我为什么用 result.id 而不是 result['id']?我说我不知道...
前端·javascript·vue.js
witton2 小时前
Go语言网络游戏服务器模块化编程
服务器·开发语言·游戏·golang·origin·模块化·耦合