请问JS中new 一个对象发生了什么

本文深入探讨了JavaScript中的new操作符的工作原理,包括如何创建新对象、设置原型链以及构造函数的执行过程。通过示例展示了如何实现一个自定义的新(new)方法,并通过这个方法创建类的实例。此外,还解释了new操作符在es5和es6中的语法差异。
摘要由CSDN通过智能技术生成
new一个实例
// es5
const Lijianhua = function () {
  this.lastname = 'li'
  this.firstname = 'jianhua'
}
Lijianhua.prototype.say = function () {
  console.log('hi')
}
const her = new Lijianhua()
her.say()
// es6 是es5的语法糖
class Lijianhua {
  constructor () {
    this.lastname = 'li'
    this.firstname = 'jianhua'
  }

  say () {
    console.log('hi')
  }
}
const her = new Lijianhua()
her.say()
new操作中发生了什么?

new 一个对象过程中,主要发生了以下步骤:

  1. 以构造器的prototype属性为原型,创造一个新的、空的对象
  2. 将它的引用赋给构造器的 this,同时将参数传到构造器中执行
  3. 如果构造器没有手动返回对象,则返回第一步创建的新对象,如果有,则舍弃掉第一步创建的新对象,返回手动return的对象。
实现一个new方法
class Lijianhua {
  constructor () {
    this.lastname = 'li'
    this.firstname = 'jianhua'
  }

  say () {
    console.log('hi')
  }
}

// 自己定义的new方法
const newMethod = function (Parent, ...rest) {
// 1.以构造器的prototype属性为原型,创建新对象;
  const child = Object.create(Parent.prototype)
  // 2.将this和调用参数传给构造器执行
  const result = Parent.apply(child, rest)
  // 3.如果构造器没有手动返回对象,则返回第一步的对象
  return typeof result === 'object' ? result : child
}
// 创建实例,将构造函数Parent与形参作为参数传入
const her = newMethod(Lijianhua)
her.say() // 'hi';
console.log(her instanceof Lijianhua) // true

参考:https://www.cnblogs.com/echolun/p/10903290.html

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值