思路
首先,在写之前,我们要明白new
操作符发生了那几件事情,这样我们才能模拟它的作用写出用其他代码模拟。在平时开发或学习中new
一般是在创建一个对象的时候使用,也就是说它肯定会和对象的创建,构造函数的执行有关系。先看看平时怎么使用吧:
function Person(name, age) {
this.name = name;
this.age = age;
}
const p = new Person('laocao',22);
上面发生了四件事情:
(1) 创建一个新对象(相应地会申请一块内存存储对象)
(2) 将构造函数的作用域赋给新对象(因此this 就指向了这个新对象)
(3 ) 将这个新对象的__proto__
指向构造函数的prototype
(4) 执行构造函数中的代码(为这个新对象添加属性),如果构造函数返回一个对象,那么this就指向这个对象的引用
(5) 返回新对象
实现
按这个思路我操作一把,主要用ES5语法实现
function newFn(fn) {
// 创建一个新对象,并将这个对象的__proto__指向构造函数的prototype
var obj = {
__proto__: fn.prototype
};
// 将构造函数的this指向这个新对象
var res = fn.apply(obj, Array.prototype.slice.call(arguments, 1));
// 判断构造函数是否有返回值
if ((typeof res === "object" || typeof res === "function") && res !== null) {
return res ;
}
// 返回这个新对象
return obj;
}
function Person(name, age) {
this.name = name;
this.age = age;
}
var p = newFn(Person, 'cao', 22);
在浏览器查看:
大功告成!