new 操作符做了以下事情:
1.创建一个对象,将对象赋值给this
function Person(name, age) { ?console.log(this) //Person {}}let p = new Person(‘cj‘, 24)
2.执行构造函数的代码,将构造器中的this.prop属性添加到this上
function Person(name, age) { ?console.log(this) //Person {} ?this.name = name ?this.age = age ?console.log(this) //Person {name: ‘cj‘, age: 24}}let p = new Person (‘cj‘, 24)
3.为this对象设置原型为其f.prototype 设置构造函数的constructor指向构造函数本身
function Person(name, age) { ?this.name = name ?this.age = age ?Object.setPrototypeOf(this, String.prototype) //相当于this.__proto__ = String.prototype ?Person.prototype.constructor = Person //这个熟悉可以用于分辨类型,现在常用instanceof 来鉴别原型 ?return this //可有可无,隐式返回}let p = new Person(‘cj‘, 24) //由Person类型变成了String类型console.log(p instanceof String) //trueconsole.log(p) //String {name: ‘cj‘, age: 24}
4.隐式return this
先证明new 调用函数最终操作返回的时候函数的返回值
function Person(name, age) { ?this.name = name ?this.age = age ?return {} //可有可无,隐式返回,这里若是返回基本类型、系统会返回this对象 可以试试 return null}let p = new Person(‘cj‘, 24)console.log(p) //{} 证明new操作符对函数操作是返回其函数返回值
完整的new模拟实现
function Person(name, age) { ?this.name = name ?this.age = age}function _new(f) { ?return function (...agrs) { ?//利用闭包分离构造函数和参数 ???let obj = {} //创建新对象 ???Object.setPrototypeOf(obj, f.prototype)// 等同于obj.__proto__ = f.prototype 赋予新对象原型 ???f.prototype.constructor = f //将构造器原型的constructor设置为构造器本身 ???let result = f.apply(obj, args) //将参数赋值到新对象 ???return result === ‘object‘ ? result : obj //如果调用的构造函数有引用类型的返回值则返回其返回值,否则返回新对象 ?}}let p = _new(Person)(‘cj‘, 24)console.log(p) //Person {name: ‘cj‘, age: 24}
js中的new操作符解析
原文地址:https://www.cnblogs.com/sefaultment/p/10290069.html