关于js 中的new

new 操作符

new操作符的作用

  1. new 操作符会返回一个对象
  2. 这个对象也就是构造函数中的 this ,可以访问到挂载在 this 上面的任意属性
  3. 这个对象可以访问到构造函数原型上的属性,所以需要将对象与构造函数链接起来
  4. 返回原始值需要忽略,返回对象需要正常处理

手动实现代码

    function create(Con, ...args) {
      let obj = {}
      Object.setPrototypeOf(obj, Con.prototype)
      let result = Con.apply(obj, args)
      return result instanceof Object ? result : obj
    }

这就是一个手动实现new操作符的代码。
步骤如下:

  1. 首先在函数接受不定量的参数,第一个参数为构造函数,接下来的参数被构造函数使用
  2. 然后内部创建一个新对象 obj
  3. 因为 obj 对象需要访问到构造函数原型链上的属性,所以我们通过 setPrototypeOf 将两者联系起来,这段代码等同于 obj.proto = Con.prototype
  4. 将 obj 绑定到构造函数上,并且传入剩余的参数
  5. 判断构造函数返回值是否为对象没如果为对象就使用构造函数的返回的值,否则则使用 obj ,这样就实现了忽略构造函数返回的原始值

调用手动创建的构造函数

  function Test(name, age) {
    this.name = name
    this.age = age
  }

  Test.prototype.sayName = function () {
    console.log(this.name)
  }

  const a = create(Test, 'lxl', 25)
  console.log(a.name); //'lxl
  console.log(a.age);// 25
  a.sayName() // 'lxl'

new 操作符 调用构造函数实际上会经历一下 4 个步骤:

  1. 创建一个新对象
  2. 将构造函数的作用域赋给对象 (因此 this 就指向了这个新对象)
  3. 执行构造函数中的代码 (为这个新对象添加属性)
  4. 返回新的对象

new操作符具体干了什么,具体就是三件事

var obj = {}
obj.protp = Base.protoType
Base.call(obj)
Base.prototype.toString = function(){
	return this.id
}

 1. 我们创建了一个空对象obj
 2. 将这个空对象的 __prptp__成员指向Base函数对象prototype成员对象
 3. 将Base函数对象的this指针替换成obj,然后再调用Base函数,于是我们就给obj对象赋值了一条个id成员变量,这个成员变量的值是 'base' 关于call函数的用法

参考链接:
new在js中的作用链接:https://blog.csdn.net/qq_27674439/article/details/99095336
new手动创建链接:https://juejin.im/post/5c7b963ae51d453eb173896e

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值