模拟实现js中的new操作符

Posted 香荣如梦

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了模拟实现js中的new操作符相关的知识,希望对你有一定的参考价值。

能否实现js的new操作符

new

new运算符创建了一个用户自定义的对象类型的实例或具有构造函数的内置对象类型之一

定义一个构造函数Student,该函数接收两个参数name和age:

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

let first=new Student('dylan','26')
console.log(first.name);// dylan
console.log(first.age);// 26

new实现了那些功能:

  1. 创建了一个空对象
  2. 空对象的原型指向了构造函数的原型
  3. 让this指向新创建的空对象,并且执行对象的主体(为这个新对象添加属性)
  4. 判断返回值的类型,如果是值类型就返回新创建的对象,如果是引用类型,就返回这个引用类型的对象
  5. 如果函数没有返回对象类型Object(包括Functoin, Array, Date, RegExg, Error),那么new表达式中的函数调用将返回该对象的引用
function copyNew(obj,...args){
  //1.创建了一个空对象 
  const newObj={}
  //2. 空对象的原型指向了构造函数的prototype
  newObj.__proto__=obj.prototype
  //上面的两步可以合为一步
  // let newObj=Object.create(obj.prototype)
  //3. 将obj的this改为新创建对象
  let result=obj.apply(newObj,args)
  //判断类里面有返回值吗?返回值是对象吗?如果是的那那就返回类中的返回值,如果不是的话那就返回新创建的对象
    return typeof result ==='object'?result:newObj
}

如果构造函数返回了一个“对象”,那么这个对象会取代整个new出来的结果。如果构造函数没有返回对象,那么new出来的结果为步骤1创建的对象。(一般情况下构造函数不返回任何值,不过用户如果想覆盖这个返回值,可以自己选择返回一个普通对象来覆盖。当然,返回数组也会覆盖,因为数组也是对象。

以上是关于模拟实现js中的new操作符的主要内容,如果未能解决你的问题,请参考以下文章

js面试-手写代码实现new操作符的功能

JS模拟 new 操作符

JS使用new操作符创建对象的方法分析

JS中new操作符源码实现

理解js中的new

js中的new操作符解析