js中的new关键字做了什么操作?

new的执行原理:
1.先创建一个空的对象{}
2.将{}.__proto__指向构造函数.prototype
3.将构造函数中的this指向这个创建的对象
4.如果构造函数没有返回值或返回值是基本数据类型,则将这个新创建的对象返回
5.如果构造函数的返回值是引用数据类型,则将这个对象返回。

// 定义一个Person构造函数
function Person(name, age){
  this.name = name;
  this.age = age;
}
//另外定义一个createNew()用来模拟new关键字的执行过程
function createNew(fn, ...args) {
  let obj = {}; // 1. 创建一个空对象
  obj.__proto__ = fn.prototype; // 2. 将obj的__proto__属性指向构造函数的prototype
  let result = fn.apply(obj, args); // 3.将fn的执行上下文创建的this绑定到obj上,并执行
    //fn.apply()的返回值就是fn的返回值,由于例子中Person()没有返回值,所以此处返回值是undefined
    //console.log(result) //undefined
  return result instanceof Object ? result : obj; //4. 如果构造函数返回的是引用数据类型,则直接返回这个结果。否则,返回新创建的对象
}
//执行createNew()看一下它的返回结果
let createNew1 = createNew(Person,'yy',18)
console.log(createNew1 )//Person {name: "yy", age: 18}
//使用new直接操作Person()看一下它的结果
let person = new Person('yy',18)
console.log(person )//Person {name: "yy", age: 18}

//可以看到createNew()的结果与使用new得到的结果一致,说明createNew()代表的就是new内部的原理。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

友情链接更多精彩内容