【Javascript】彻底捋清楚javascript中new运算符的实现

new 运算符

在js中,new()常被用来创建一个用户定义的对象类型的实例或具有构造函数的内置对象的实例

new 关键字会进行如下的操作&＃xff1a;

1.创建一个简单Javascript空对象&＃xff08;即{}&＃xff09;&＃xff1b;
2.链接该对象到另一个对象 &＃xff08;即设置该对象的_proto_为构造函数的prototype&＃xff09;&＃xff1b;
3.执行构造函数,将构造函数内的this作用域指向1步骤中创建的空对象{}&＃xff1b;
4.如果构造函数有返回值&＃xff0c;则return 返回值,否则return 空对象obj。

重点解析:实现一个new

1.我们先来写一个构造函数

function Constructor(obj){if(obj){return obj}
}


2.使用new得到的实例化对象以及它的__proto__

console.log(new Constructor(123))
console.log(new Constructor({a:123}))
console.log((new Constructor()).__proto__)


3.现在我们来尝试实现一个new()

function subNew(){var obj &＃61; {}obj.__proto__ &＃61; Constructor.prototypevar res &＃61; Constructor.call(obj,...arguments)return typeof(res) &＃61;&＃61;&＃61; &＃39;object&＃39;&&res || obj
//当构造函数有return时&＃xff0c;返回return值,没有则返回obj{}
}


4.使用 subNew() 创建实例并对比new()

var obj1 &＃61; new Constructor()
var obj2 &＃61; subNew()
console.log(new Constructor(123),subNew(123))
console.log(new Constructor({a:123}),subNew({a:123}))
console.log(obj1.__proto__,obj2.__proto__,Constructor.prototype)


5.使用subNew尝试实现JS继承

总结

new 创建了一个对象obj,并将obj的隐式原型__proto__指向构造函数的原型prototype,同时使用call调用父级的构造函数并传参,之后判断call返回值res&＃xff0c;若为object类型&＃xff0c;则返回res&＃xff0c;否则返回obj

如果觉得我的文章对你有帮助&＃xff0c;请star我的Blog