js实现一个new
在开发过程中,我们经常会使用new关键字,那我们在使用new关键字的时候,new到底做了什么呢?我们可以查阅资料,在MDN中有这样一段话
new 运算符创建一个用户定义的对象类型的实例或具有构造函数的内置对象的实例。new 关键字会进行如下的操作:
1. 创建一个空的javascript对象就比如(即{});
2. 链接该对象(即设置该对象的构造函数)到另一个对象;
3. 将步骤1新创建的对象作为this的上下文;
4. 如果该函数有没有返回对象,没有则返回this;
知道了new的这些功能,我们就能根据这些步骤来实现一个new的功能了!
代码示例
function _new(constructer, ...arg) {
// 创建一个空的对象
let resultObj = {};
// 链接该对象到原型,这样新对象就能访问到原型上面的方法
resultObj.__proto__ = constructer.prototype;
// 然后实现步骤3,将新创建的对象作为this的上下文
let result = constructer.call(resultObj, ...arg);
// 实现步骤4:如果该函数没有返回对象(即result不是一个对象),则返回this(即resultObj)
return typeOf result === 'object' ? result : resultobj
// 接下来就可以看看new的实现效果了
}
new方法的效果:
function Persion(name, age) {
this.name = name;
this.age = age;
}
let Persion1 = _new(Persion, 'lucy', '18');
let Persion2 = _new(Persion, 'chuan', '20');
console.log(Persion1.name); // 'lucy'
console.log(Persion1.name); // 'chuan'
console.log(Persion1 instanceof Persion); // true
console.log(Persion2 instanceof Persion); // true