JavaScript深入之new的模拟实现 #13

mqyqingfeng · 2017-05-04T02:58:35Z

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，对作者也是一种鼓励。

strongcode9527 · 2017-05-05T02:27:43Z

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

mqyqingfeng · 2017-05-05T02:55:44Z

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

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

jawil · 2017-05-09T03:08:05Z

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,也来实践模拟一把😄

mqyqingfeng · 2017-05-09T03:11:00Z

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

jawil · 2017-05-09T03:17:14Z

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

mqyqingfeng · 2017-05-09T03:32:22Z

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

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

wcflmy · 2017-05-27T10:01:37Z

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

mqyqingfeng · 2017-05-27T12:09:25Z

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

Allen3039 · 2017-06-01T06:52:41Z

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

mqyqingfeng · 2017-06-02T11:50:57Z

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

xdwxls · 2017-06-03T10:17:31Z

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

mqyqingfeng · 2017-06-04T06:04:13Z

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

a1029563229 · 2017-06-07T03:27:55Z

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

mqyqingfeng · 2017-06-08T04:34:51Z

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

Izayoih · 2017-07-15T09:07:26Z

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

mqyqingfeng · 2017-07-19T03:33:18Z

@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)。

yh284914425 · 2017-08-03T12:29:14Z

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

mqyqingfeng · 2017-08-04T02:25:40Z

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

Williris · 2017-08-06T09:41:30Z

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

qianL93 · 2017-08-31T08:07:06Z

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

mqyqingfeng · 2017-09-01T05:44:37Z

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

huangmxsysu · 2017-09-04T11:22:48Z

话说__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)

是一样也可以的吧？

trayvon2017 · 2021-09-14T12:21:35Z

@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)。

原型链的顶端是null, 但是null能干什么呢? 原型链能正常工作是内置Object起到的作用,即使Object的prototype是null(仅仅是设计如此).使用Object.create(null)相当于自己创建了一个prototype为null的'CustomObject',它不具备内置Object的一些特性,所以Object.create(null)创建的对象不支持原型特性, 自然也无法根据原型链查找属性/方法

buddywang · 2021-09-29T03:36:56Z

求问用模拟的实现去实例化一个Date对象不行是什么原因呢？let a=mocknew(Date); a.getDate()报错

Ljfy · 2021-10-24T05:01:38Z

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

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

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

truejiang · 2021-11-02T08:28:11Z

第一眼看的时候有点懵逼，主要是没习惯arguments直接的用法，换成ES6的写法会明了很多，感谢大佬提供思路，怎么不继续更新了呢
`function objectFactory(Constructor, ...args) {
var obj = new Object()

// Constructor = [].shift.call(arguments)
Object.setPrototypeOf(obj, Constructor.prototype)
// Object.setPrototypeOf(obj, Constructor.prototype)
// obj.proto = Constructor.prototype
console.log(Constructor)

let ret = Constructor.apply(obj, args)

return typeof ret === 'object' ? ret : obj
}`

daomingQian · 2022-01-04T02:39:10Z

都说模拟new 咋还函数内用到了new呢

daomingQian · 2022-01-04T02:58:01Z

第二版返回的是null 也不合适可以改成 return Object(ret ) === ret ? ret : obj

18602435705 · 2022-01-08T08:13:30Z

function _new(fn) {
  const prototype = fn.prototype;
  const o = Object.create(prototype);
  const result = prototype.constructor.apply(o, [].slice.call(arguments, 1));
  return typeof result === "object" ? result : o;
}

console.log(
  _new(
    function (age, color) {
      this.age = age;
      this.color = color;
    },
    23,
    "red"
  )
);

leslie555 · 2022-01-22T08:36:28Z

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

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

为什么要模拟new 的实现，内部还要用到new 啦， Object.create(null) 感觉确实是正解

zach-xing · 2022-02-08T06:31:27Z

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

三年了

三年，你知道我这三年怎么过的吗？ react我吃定了，耶稣都留不住它

四年了，建国都下台了。

都 2022 年了，还没有写

cliYao · 2022-02-08T06:31:57Z

这是来自QQ邮箱的假期自动回复邮件。您好，我最近正在休假中，无法亲自回复您的邮件。我将在假期结束后，尽快给您回复。

Lanbasara · 2022-02-09T12:48:54Z

function myNew(constru, ...params) {
  let objTarget = new Object();
  let res = constru.apply(objTarget, params);
  Object.setPrototypeOf(objTarget, constru.prototype);
  return typeof res === 'object' ? res || objTarget : objTarget;
}

dvlin-dev · 2022-02-27T10:21:24Z

var ret = Constructor.apply(obj, [...arguments].slice(1)) 应该把构造函数去掉在绑定给obj吧

hotYan · 2022-03-02T02:44:41Z

小记

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(),//存疑，为什么模拟new里面使用new？
    //var obj = Object.create(null),//报错：TypeError
    //var obj = {},//正常
    //var obj = Object.create({}),//正常
    //var obj = Object.create(Object.prototype),//正常

    Constructor = [].shift.call(arguments);
    obj.__proto__ = Constructor.prototype;
    var ret = Constructor.apply(obj, arguments);
    return typeof ret === 'object' ? ret||obj : 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

ccBreeze · 2022-05-13T02:41:29Z

// 实现 new
function newFactory(fn, ...args) {
  const obj = Object.create(fn.prototype); // 原型式继承
  const ret = fn.apply(obj, args); // 继承属性
  return typeof ret === "object" ? ret : obj;
}

jiahui336 · 2022-06-24T07:28:22Z

真不错

cliYao · 2022-06-24T07:28:50Z

这是来自QQ邮箱的假期自动回复邮件。您好，我最近正在休假中，无法亲自回复您的邮件。我将在假期结束后，尽快给您回复。

wangqianqian0228 · 2022-08-04T04:30:31Z

const obj = Object.create(Constructor.prototype);
创建一个以Constructor.prototype为原型的对象应该也可以吧~

lwpersonal · 2023-06-21T03:05:29Z

箭头函数的情况没有处理

cliYao · 2023-06-21T03:05:56Z

这是来自QQ邮箱的假期自动回复邮件。您好，我最近正在休假中，无法亲自回复您的邮件。我将在假期结束后，尽快给您回复。

Chenmin926 · 2023-07-15T07:31:53Z

function myNew(fn, ...args) {
let obj = Object.create(fn.prototype);
let res = fn.apply(obj, args);
return res instanceof Object ? res : obj
}

ZhongJingBo · 2023-07-24T03:14:37Z

对于这段代码，有人知道为什么无法new class呢？
class Age {
name='123'
}
function myNew(context) {
const obj = new Object();
constructor = [].shift.call(arguments);
obj.porto = context.prototype;
const ret = constructor.apply(obj, arguments);
return typeof ret === "object" ? ret : obj;
}
const myFun = myNew(Age);
会有如下报错

cliYao · 2023-09-18T10:21:55Z

这是来自QQ邮箱的假期自动回复邮件。您好，我最近正在休假中，无法亲自回复您的邮件。我将在假期结束后，尽快给您回复。

bosens-China · 2023-10-06T16:09:05Z

function _new (fn, ...args) {
  const obj = Object.create(fn.prototype);
  const result = fn.apply(obj, args);

  return (result && typeof result === 'object') ? result: obj;
}

cliYao · 2023-10-06T16:09:36Z

这是来自QQ邮箱的假期自动回复邮件。您好，我最近正在休假中，无法亲自回复您的邮件。我将在假期结束后，尽快给您回复。

mqyqingfeng added the 深入系列 label May 4, 2017

This was referenced May 23, 2017

JavaScript深入之bind的模拟实现 #12

Open

JavaScript深入之创建对象的多种方式以及优缺点 #15

Open

JavaScript深入之继承的多种方式和优缺点 #16

Open

JavaScript深入系列15篇正式完结！ #17

Open

This was referenced May 26, 2017

JavaScript深入之bind的模拟实现 yy9306/yy9306.github.io#1

Open

JavaScript深入之创建对象的多种方式以及优缺点 yy9306/yy9306.github.io#7

Open

JavaScript深入之继承的多种方式和优缺点 yy9306/yy9306.github.io#11

Open

zhanglongLee mentioned this issue Jan 7, 2022

new操作符的实现原理 lhlGitHub/trisome#10

Open

gumingWu mentioned this issue May 17, 2022

2. 手写new和bind gumingWu/daily-hand-write#2

Open

xiaochengzi6 mentioned this issue May 19, 2022

new 关键字的实现和原理 xiaochengzi6/Blog#3

Open

zzcyes mentioned this issue May 27, 2022

new操作符 zzcyes/front-end-interview-notes#14

Open

Samgao0312 mentioned this issue Jul 3, 2022

【再学前端】JavaScript 中 new 一个对象实例的过程 Samgao0312/Blog#134

Open

Real102 mentioned this issue Mar 17, 2023

摸鱼必看的前端知识点 Real102/Blog#2

Open

JavaScript深入之new的模拟实现 #13

JavaScript深入之new的模拟实现 #13

Comments

mqyqingfeng commented May 4, 2017 • edited Loading

new

初步实现

返回值效果实现

下一篇文章

相关链接

深入系列

strongcode9527 commented May 5, 2017

mqyqingfeng commented May 5, 2017 • edited Loading

jawil commented May 9, 2017 • edited Loading

mqyqingfeng commented May 9, 2017

jawil commented May 9, 2017

mqyqingfeng commented May 9, 2017 • edited Loading

wcflmy commented May 27, 2017

mqyqingfeng commented May 27, 2017

Allen3039 commented Jun 1, 2017 • edited Loading

mqyqingfeng commented Jun 2, 2017

xdwxls commented Jun 3, 2017

mqyqingfeng commented Jun 4, 2017

a1029563229 commented Jun 7, 2017

mqyqingfeng commented Jun 8, 2017

Izayoih commented Jul 15, 2017

mqyqingfeng commented Jul 19, 2017 • edited Loading

yh284914425 commented Aug 3, 2017

mqyqingfeng commented Aug 4, 2017

Williris commented Aug 6, 2017

qianL93 commented Aug 31, 2017

mqyqingfeng commented Sep 1, 2017

huangmxsysu commented Sep 4, 2017

trayvon2017 commented Sep 14, 2021

buddywang commented Sep 29, 2021

Ljfy commented Oct 24, 2021

truejiang commented Nov 2, 2021

daomingQian commented Jan 4, 2022

daomingQian commented Jan 4, 2022

18602435705 commented Jan 8, 2022

leslie555 commented Jan 22, 2022

zach-xing commented Feb 8, 2022

cliYao commented Feb 8, 2022 via email

Lanbasara commented Feb 9, 2022

dvlin-dev commented Feb 27, 2022

hotYan commented Mar 2, 2022 • edited Loading

ccBreeze commented May 13, 2022

jiahui336 commented Jun 24, 2022

cliYao commented Jun 24, 2022 via email

wangqianqian0228 commented Aug 4, 2022

lwpersonal commented Jun 21, 2023

cliYao commented Jun 21, 2023 via email

Chenmin926 commented Jul 15, 2023

ZhongJingBo commented Jul 24, 2023

cliYao commented Sep 18, 2023 via email

bosens-China commented Oct 6, 2023

cliYao commented Oct 6, 2023 via email

mqyqingfeng commented May 4, 2017 •

edited

Loading

mqyqingfeng commented May 5, 2017 •

edited

Loading

jawil commented May 9, 2017 •

edited

Loading

mqyqingfeng commented May 9, 2017 •

edited

Loading

Allen3039 commented Jun 1, 2017 •

edited

Loading

mqyqingfeng commented Jul 19, 2017 •

edited

Loading

hotYan commented Mar 2, 2022 •

edited

Loading