跳到主要内容

new的模拟实现

From AI

new 关键字是 JavaScript 中用于创建对象的一种方法。通过 new 关键字创建对象时,会调用一个构造函数,并将其作为对象的初始化函数。同时,new 关键字还会将新创建的对象的原型指向构造函数的原型,从而实现继承。下面是 new 关键字的模拟实现:

function myNew(fn, ...args) {
// 创建一个新对象,该对象的原型指向构造函数的原型
const newObj = Object.create(fn.prototype);

// 调用构造函数,并将其 this 值绑定到新对象上
const result = fn.apply(newObj, args);

// 如果构造函数返回了一个对象,则返回该对象,否则返回新对象
return typeof result === 'object' ? result : newObj;
}

在上述代码中,我们定义了一个 myNew 函数,该函数接受两个参数:构造函数 fn 和构造函数的参数列表 args。函数的实现首先会创建一个新对象 newObj,该对象的原型指向构造函数的原型。然后,我们使用 apply 方法将构造函数的 this 值绑定到新对象上,并将构造函数的参数列表传递给它。在调用构造函数后,我们需要判断构造函数的返回值类型,如果返回了一个对象,则返回该对象,否则返回新对象。

需要注意的是,在使用 new 关键字时,构造函数通常使用大写字母开头的命名方式,以便于区分普通函数。同时,构造函数中不应该显式地返回一个值(除非返回一个对象),否则会导致 new 关键字返回的值不是新创建的对象。

new

一句话介绍 new:

new 运算符创建一个用户定义的对象类型的实例或具有构造函数的内置对象类型之一

也许有点难懂,我们在模拟 new 之前,先看看 new 实现了哪些功能。

举个例子:

// Otaku 御宅族,简称宅
function Otaku (name, age) {
this.name = name;
this.age = age;

this.habit = 'Games';
}

// 因为缺乏锻炼的缘故,身体强度让人担忧
Otaku.prototype.strength = 60;

Otaku.prototype.sayYourName = function () {
console.log('I am ' + this.name);
}

var person = new Otaku('Kevin', '18');

console.log(person.name) // Kevin
console.log(person.habit) // Games
console.log(person.strength) // 60

person.sayYourName(); // I am Kevin

从这个例子中,我们可以看到,实例 person 可以:

  1. 访问到 Otaku 构造函数里的属性
  2. 访问到 Otaku.prototype 中的属性

接下来,我们可以尝试着模拟一下了。

因为 new 是关键字,所以无法像 bind 函数一样直接覆盖,所以我们写一个函数,命名为 objectFactory,来模拟 new 的效果。用的时候是这样的:

function Otaku () {
……
}

// 使用 new
var person = new Otaku(……);
// 使用 objectFactory
var person = objectFactory(Otaku, ……)

初步实现

分析:

因为 new 的结果是一个新对象,所以在模拟实现的时候,我们也要建立一个新对象,假设这个对象叫 obj,因为 obj 会具有 Otaku 构造函数里的属性,想想经典继承的例子,我们可以使用 Otaku.apply(obj, arguments)来给 obj 添加新的属性。

在 JavaScript 深入系列第一篇中,我们便讲了原型与原型链,我们知道实例的 proto 属性会指向构造函数的 prototype,也正是因为建立起这样的关系,实例可以访问原型上的属性。

现在,我们可以尝试着写第一版了:

// 第一版代码
function objectFactory() {

var obj = new Object(),

Constructor = [].shift.call(arguments);// arguments.shift is not a function,只是一个类数组内置对象

obj.__proto__ = Constructor.prototype;

Constructor.apply(obj, arguments);

return obj;

};

在这一版中,我们:

  1. 用new Object() 的方式新建了一个对象 obj
  2. 取出第一个参数,就是我们要传入的构造函数。此外因为 shift 会修改原数组,所以 arguments 会被去除第一个参数
  3. 将 obj 的原型指向构造函数,这样 obj 就可以访问到构造函数原型中的属性
  4. 使用 apply,改变构造函数 this 的指向到新建的对象,这样 obj 就可以访问到构造函数中的属性
  5. 返回 obj 更多关于:

原型与原型链,可以看《JavaScript深入之从原型到原型链》

apply,可以看《JavaScript深入之call和apply的模拟实现》

经典继承,可以看《JavaScript深入之继承》

复制以下的代码,到浏览器中,我们可以做一下测试:

function Otaku (name, age) {
this.name = name;
this.age = age;

this.habit = 'Games';
}

Otaku.prototype.strength = 60;

Otaku.prototype.sayYourName = function () {
console.log('I am ' + this.name);
}

function objectFactory() {
var obj = new Object(),
Constructor = [].shift.call(arguments);
obj.__proto__ = Constructor.prototype;
Constructor.apply(obj, arguments);
return obj;
};

var person = objectFactory(Otaku, 'Kevin', '18')

console.log(person.name) // Kevin
console.log(person.habit) // Games
console.log(person.strength) // 60

person.sayYourName(); // I am Kevin

[]~( ̄▽ ̄)~**

返回值效果实现

接下来我们再来看一种情况,假如构造函数有返回值,举个例子:

function Otaku (name, age) {
this.strength = 60;
this.age = age;

return {
name: name,
habit: 'Games'
}
}

var person = new Otaku('Kevin', '18');

console.log(person.name) // Kevin
console.log(person.habit) // Games
console.log(person.strength) // undefined
console.log(person.age) // undefined

在这个例子中,构造函数返回了一个对象,在实例 person 中只能访问返回的对象中的属性。 而且还要注意一点,在这里我们是返回了一个对象,假如我们只是返回一个基本类型的值呢?

再举个例子:

function Otaku (name, age) {
this.strength = 60;
this.age = age;

return 'handsome boy';
}

var person = new Otaku('Kevin', '18');

console.log(person.name) // undefined
console.log(person.habit) // undefined
console.log(person.strength) // 60
console.log(person.age) // 18

结果完全颠倒过来,这次尽管有返回值,但是相当于没有返回值进行处理。 所以我们还需要判断返回的值是不是一个对象,如果是一个对象,我们就返回这个对象,如果没有,我们该返回什么就返回什么。

再来看第二版的代码,也是最后一版的代码:

// 第二版的代码
function objectFactory() {

var obj = new Object(),

Constructor = [].shift.call(arguments);

obj.__proto__ = Constructor.prototype;

var ret = Constructor.apply(obj, arguments);

return typeof ret === 'object' ? ret : obj;

};
文章来源

作者:冴羽

链接:https://github.com/mqyqingfeng/Blog/issues/13

著作权归原作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。