Blog JavaScript深入之new的模拟实现

JavaScript深入之new的模拟实现

Open mqyqingfeng opened this issue 7 years ago • 160 comments

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 可以：

访问到 Otaku 构造函数里的属性
访问到 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);

    obj.__proto__ = Constructor.prototype;

    Constructor.apply(obj, arguments);

    return obj;

};

在这一版中，我们：

用new Object() 的方式新建了一个对象 obj
取出第一个参数，就是我们要传入的构造函数。此外因为 shift 会修改原数组，所以 arguments 会被去除第一个参数
将 obj 的原型指向构造函数，这样 obj 就可以访问到构造函数原型中的属性
使用 apply，改变构造函数 this 的指向到新建的对象，这样 obj 就可以访问到构造函数中的属性
返回 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;

};

下一篇文章

JavaScript深入之类数组对象与arguments

深入系列

JavaScript深入系列目录地址：https://github.com/mqyqingfeng/Blog。

JavaScript深入系列预计写十五篇左右，旨在帮大家捋顺JavaScript底层知识，重点讲解如原型、作用域、执行上下文、变量对象、this、闭包、按值传递、call、apply、bind、new、继承等难点概念。

如果有错误或者不严谨的地方，请务必给予指正，十分感谢。如果喜欢或者有所启发，欢迎star，对作者也是一种鼓励。

May 04 '17 02:05 mqyqingfeng

var obj = Object.create(null) 这样创建会比较好

May 05 '17 02:05 strongcode9527

并没有什么区别吧，毕竟最后都是要更改原型的

以上是最初的看法，两者有很大的不同，欢迎下拉看两者之间的区别。

May 05 '17 02:05 mqyqingfeng

function objectFactory() {

    var obj = new Object(),//从Object.prototype上克隆一个对象

    Constructor = [].shift.call(arguments);//取得外部传入的构造器

    var F=function(){};
    F.prototype= Constructor.prototype;
    obj=new F();//指向正确的原型

    var ret = Constructor.apply(obj, arguments);//借用外部传入的构造器给obj设置属性

    return typeof ret === 'object' ? ret : obj;//确保构造器总是返回一个对象

};

学习学习,之前一直是理论了解new,也来实践模拟一把😄

May 09 '17 03:05 jawil

哈哈，添加的注释很赞 o(￣▽￣)ｄ

May 09 '17 03:05 mqyqingfeng

想看看博主写的react系列,准备学习react了,最近react和vue一直在撕逼😄

May 09 '17 03:05 jawil

我也好想写React呐，不过React估计是第三个或者第四个系列，现在第一个系列还没有发布完呢，第二个系列估计要写20篇左右，写到React，估计都下下个月了……看来是赶不上这波撕逼的浪潮了~😂😂😂

实际上，过了一年都没有开始写 React 系列 T^T

May 09 '17 03:05 mqyqingfeng

objectFactory函数里最后一行建议改成“return typeof ret === 'object' ? ret||obj : obj;”，否则如果在Otaku函数里面return null，会有问题的。

May 27 '17 10:05 wcflmy

@wcflmy 哈哈，被你发现了，我在模拟的时候，也发现这一点了，后来觉得反正主要目的是为了让大家了解 new 的原理，没有必要再写一句专门判断 null ，就没有写，不过使用你这种写法就不用多写那一句了，真的很赞！给你 32 个赞，哈哈~~~ o(￣▽￣)ｄ

May 27 '17 12:05 mqyqingfeng

return Object.prototype.toString.call(ret).match(/^\[object (\w+)\]$/)[1]==='Object' ? ret : obj; 也可以吧

Jun 01 '17 06:06 Allen3039

@Allen3039 哈哈，类型判断加正则，大家这是各显神通呐~ o(￣▽￣)ｄ

Jun 02 '17 11:06 mqyqingfeng

@jawil var F=function(){}; F.prototype= Constructor.prototype; obj=new F();//指向正确的原型这写法是什么意思没太看明白

Jun 03 '17 10:06 xdwxls

@xdwxls 其实就是将 obj 的原型指向 Constructor.prototype，只不过@jawil 的写法中在 new 的模拟实现中又用到了 new 😂

Jun 04 '17 06:06 mqyqingfeng

@strongcode9527 试了你这种写法后面直接用prototype添加的方法，无法被继承....

Jun 07 '17 03:06 a1029563229

@a1029563229 能提供下这段代码吗？

Jun 08 '17 04:06 mqyqingfeng

@mqyqingfeng @a1029563229 我也发现了这个问题试了一下改成Object.create(Object.prototype)结果可以了...不是很明白什么道理

Jul 15 '17 09:07 Izayoih

@strongcode9527 @a1029563229 @lzayoih 我也发现了这个问题，测试 demo 为：

function Otaku (age) {}

Otaku.prototype.sayHello = function() {
	console.log('hello')
}

var person = objectFactory(Otaku, 'Kevin', '18');
console.log(person)
person.sayHello() //???

如果使用 Object.create(null)，person.sayHello 就会报错，使用 new Object()，会正常打印 hello。

查看由两种方式生成的 person 对象，第一个是由 Object.create 生成的，第二个是 new Object 生成的

两者的区别就在于 __proto__ 一个是实的，一个是虚的，由此我们可以猜测第一种方式是把 __proto__ 当成了一个属性值，而非去修改了原型！

原因其实在《JavaScript深入之从原型到原型链》中有提过：

__proto__ ，绝大部分浏览器都支持这个非标准的方法访问原型，然而它并不存在于 Person.prototype 中，实际上，它是来自于 Object.prototype ，与其说是一个属性，不如说是一个 getter/setter，当使用 obj.__proto__ 时，可以理解成返回了 Object.getPrototypeOf(obj)。

Jul 19 '17 03:07 mqyqingfeng

__proto__在ie里面不是没用么，代码在ie里面应该实现不了吧

Aug 03 '17 12:08 yh284914425

@yh284914425 是的，本篇是希望通过模拟 new 的实现，让大家了解 new 的原理~

Aug 04 '17 02:08 mqyqingfeng

返回值应该判断三种类型： Function，Object 和Array

Aug 06 '17 09:08 Williris

这里构造函数返回null的时候，new返回的是obj，不是ret

Aug 31 '17 08:08 qianL93

@qianL93 确实如此哈，@wcflmy 和 @Allen3039 已经在这个 issue 下提出了解决方案~

Sep 01 '17 05:09 mqyqingfeng

话说__proto__一个实一个虚的问题不是因为Object.create(null)是原型链顶端导致var obj = Object.create(null)之后 obj根本访问不到__proto__这个原型属性导致后面的obj.proto = Constructor.prototype使它的__proto__是实的，成为一个属性，从而没有修改原型。我觉得是不是可以不需要

var obj = new Object()
obj.__proto__ = Constructor.prototype

直接用

var obj = Object.create(Constructor.prototype)

是一样也可以的吧？

Sep 04 '17 11:09 huangmxsysu

@huangmxsysu 可以呀，毕竟 Object.create 的实现方式与之类似，之所以用 __proto__ 的方式是考虑之前的文章并未讲过 Object.create 的方法，使用这个方法还需要多一层解释成本

Sep 05 '17 04:09 mqyqingfeng

嗯嗯，昨天读了你这些文章，收获蛮大的！棒！后面有再写什么么？

Sep 05 '17 04:09 huangmxsysu

@huangmxsysu 写完专题系列，接下来会写 ES6 系列和 React 系列，欢迎关注哈~

Sep 05 '17 04:09 mqyqingfeng

在处理返回值的时候，我发现使用new出来的实例的__proto__和我们模拟出来的实例的__proto__是不一样的，导致获取不到原型链上对应的值。有点没懂，可否解答一下@mqyqingfeng，代码如下

var objectFactory = function () {
  var obj = new Object();
  var constructor = Array.prototype.shift.call(arguments);
  obj.__proto__ = constructor.prototype;
  var returnValue = constructor.apply(obj, arguments);
  return typeof retrunValue == 'object' ? retrunValue : obj
}

var Person = function (name, age) {
  this.name = name;
  this.age = age;
  return {
    name: name, age: age
  }
}

Person.prototype.height = '160';
Person.prototype.sayHi = function () {
  return this.name + ' say hi!';
}
var newPerson = new Person('jeff', '11');
var factoryPerson = objectFactory(Person, 'jeff', '12');
console.log(newPerson.name, factoryPerson.name) // jeff jeff
console.log(newPerson.age, factoryPerson.age) // 11 12
console.log(newPerson.height, factoryPerson.height) // undefined "160"
console.log(newPerson.sayHi, factoryPerson.sayHi) //  undefined ƒ () {return this.name + ' say hi!';}

那这样，是不是我们没有成功模拟到new一个实例的功能呢

Sep 22 '17 03:09 JeffAAA

@JeffAAA 你这里写错了哈：

var returnValue = constructor.apply(obj, arguments);
return typeof retrunValue == 'object' ? retrunValue : obj

都改成returnValue 结果就统一了~

Sep 22 '17 04:09 mqyqingfeng

😅 好吧手残了～～

Sep 22 '17 06:09 JeffAAA

function objectFactory() {

    var obj = new Object(),//从Object.prototype上克隆一个对象

    Constructor = [].shift.call(arguments);//取得外部传入的构造器

    var F=function(){};
    F.prototype= Constructor.prototype;
    obj=new F();//指向正确的原型

    var ret = Constructor.apply(obj, arguments);//借用外部传入的构造器给obj设置属性

    return typeof ret === 'object' ? ret : obj;//确保构造器总是返回一个对象

};

@jawil 你第一行代码new出Object实例，然后把该实例赋值给obj变量，但是在第五行又重新给obj变量赋值。所以我感觉第一行赋值为Object实例没啥意义。另外，第一行代码你也可以这样写，var obj = new Object;

Sep 22 '17 06:09 ghost

感谢作者 @mqyqingfeng ，学到了很多，也写一个自己优化的版本

function objectFactory() {
  var args = Array.prototype.slice.call(arguments);
  var Constructor = args.shift();
  var instance = Object.create(Constructor.prototype);
  var temp = Constructor.apply(instance, args);

  return (typeof temp === 'object' && temp !== null) ? temp : instance;
}

Nov 18 '17 02:11 RayJune

Blog
Blog copied to clipboard

JavaScript深入之new的模拟实现

new

初步实现

返回值效果实现

下一篇文章

相关链接

深入系列

Blog Blog copied to clipboard

JavaScript深入之new的模拟实现

new

初步实现

返回值效果实现

下一篇文章

相关链接

深入系列

Blog
Blog copied to clipboard