阿
阿叶同志
V1
2023/01/23阅读:44主题:默认主题
手写一个 new
写在前边: 手写一个 new 我们需要了解原型的概念,和 this的指向问题。
在执行 new 的时候做了什么
我们执行 new 来看一下 new 的过程中发生了什么:
function Person(name) {
this.name = name
this.sayName = function () {
console.log('name', this.name)
}
}
const person = new Person('ayetongzhi')
console.log('person', person)
person.sayName()
打印结果如上,根据打印结果我们可以知道:
-
返回了一个对象(person),这个对象不会凭空的产生,因此在 new 的过程中是创建了一个对象并返回。 -
将 this 指向创建的新对象,并执行函数。需要将 this 指向新的对象,才能构造函数的属性赋值给实例对象。 -
改变实例 的 __proto__ 属性,指向构造函数的原型。如下图所示,通过构造函数 (Function) 创建的实例**(instance)** ,它的 __proto__ 属性指向构造函数 **(Function)**的 prototype。 -
构造函数显示的返回一个对象,则返回该对象。下面对这条问题进行解释,上代码:
function Person(name) {
this.name = name;
this.sayName = function () {
console.log("name", this.name);
};
// 显示的返回一个对象
return {
name: "maomao",
sayName: function () {
console.log("name", this.name);
}
};
}
const person = new Person("ayetongzhi");
console.log("person", person);
person.sayName(); //maomao
运行结果可知,在 new Person 操作后返回了return后面返回的对象。
实现 new
根据 new 操作执行的内容,来一步步实现手写的 new。
// fn 构造函数
// ...args 构造函数传入的参数
function myNew (fn, ...args) {
// 创建新的对象
var obj = {}
// 将对象的 __proto__ 属性指向构造函数的原型
obj.__proto__ = fn.prototype
// 将 **this** 指向创建的新对象,并执行构造函数,保存返回结果
let result = fn.call(obj, ...args)
// 构造函数返回的结果是对象则返回该对象 result,否则返回新创建的对象 obj
return result instanceof Object ? result : obj
}
通过以上代码我们实现了手写的 new,然而 __proto__ 属性是一个有争议不建议使用的属性,我们使用 Object.create() 方法来代替。Object.create() 方法用于创建一个新对象,使用现有的对象来作为新创建对象的原型(prototype)。举个例子:
let a = {
name: 'maomao'
}
let b = Object.create(a)
console.log('b 的 __proto__ 指向 a', b.__proto__ === a) // true
以上的代码 let b = Object.create(a) 使新创建的对象 b 的 __proto__ 指向了 现有对象a。
因此,我们优化一下手写的 myNew 方法:
// fn 构造函数
// ...args 构造函数传入的参数
function myNew (fn, ...args) {
// 创建新对象 obj,并改变 obj 的 __proto__ 指向构造函数的 prototype
var obj = Object.create(myNew.prototype)
// 将 **this** 指向创建的新对象,并执行构造函数,保存返回结果
let result = fn.call(obj, ...args)
// 构造函数返回的结果是对象则返回该对象 result,否则返回新创建的对象 obj
return result instanceof Object ? result : obj
}
运行以下代码检验手写的 new 方法是否存在问题:
function Person(name) {
this.name = name;
this.sayName = function () {
console.log("name", this.name);
};
}
const person = myNew(Person, "ayetongzhi");
console.log("person", person);
person.sayName(); // ayetongzhi
当没有显示的返回对象的时候,新创建了对象。并改变this指向到新的对象,同时执行构造函数。改变了新创建对象的 __proto__ 指向了构造函数的 prototype,与 new 操作符执行的结果一致。。

function Person(name) {
this.name = name;
this.sayName = function () {
console.log("name", this.name);
};
return {
name: "maomao",
sayName: function () {
console.log("name", this.name);
}
};
}
const person = myNew(Person, "ayetongzhi");
console.log("person", person);
person.sayName(); // maomao
当构造函数显示的返回一个对象的时候,打印结果如下,与 new 操作符执行的结果一致。

以上我们了解了在执行 new 操作时,做了些什么,并根据 new 操作的表现,实现了手写 new 函数。
作者介绍
阿
阿叶同志
V1