JavaScript专题之模拟实现new

pingink 发布于2019-08-23 13:01 / 1131人阅读

摘要：模拟实现操作符构造函数返回结果创建一个空对象取传入的第一个参数，即构造函数，并删除第一个参数。二处理返回值构造函数也是函数，有不同类型返回值。有时候构造函数会返回指定的对象内容，所以要对这部分进行处理。

本文共 1230 字，读完只需 5 分钟

写在前面

最近工作太忙，快接近两周没更新博客，总感觉有一些事情等着自己去做，虽然工作内容对自己提升挺大，但我总觉得，一直埋着头走路，偶尔也需要抬起头来，看看现在和自己的期望向是否脱轨，所以周末还是选择来星巴克写些文字。

今天记录 JavaScript 中 new 关键字的模拟实现，当我们在模拟实现某个语言行为之前，应该想想这个行为都做了哪些事情，通过实践，最后也能更加掌握知识点，这就是很多面试题都会问到模拟实现的原因，目的是为了考察候选人知识的深度。

function Person(name) {
    this.name = name;
}

var person = new Person("jayChou");

typeof(person)  // "object"
person instanceof Person  // true
person.__proto__ === Person.prototype  // true
person.constructor === Person  //  true
person.constructor === Person.prototype.constructor  // true

以上，可以看出：

new 创建并返回了一个新对象，是构造函数的实例

对象的实例的构造函数属性其实是构造函数的原型对象的 constructor 属性

对象实例的 __proto__ 关联到构造函数的原型对象

上面的内容有关于 JavaScript 中原型对象和原型链的知识，不够清楚的同学可以查看我之前的博客。

由于 new 是 JS 的一个关键字，我们无法实现关键字，但我们可以通过函数的形式来模拟 new 关键字的行为。

一、基本思路

知道 new 关键字做了哪些工作，那我们就有了模拟实现的基本思路。

/**
 * 模拟实现 JavaScript new 操作符
 * @param  {Function} constructor [构造函数]
 * @return {Object|Function|Regex|Date|Error}      [返回结果]
 */
function mockNew() {
    // 创建一个空对象
    let resultObj = new Object();

    // 取传入的第一个参数，即构造函数，并删除第一个参数。
    // 关于为什么要用 Array.prototype.shift.call 的形式，见之前的博客文章 《JavaScript之arguments》
    let constructor =  Array.prototype.shift.call(arguments);
    
    // 类型判断，错误处理
    if(typeof constructor !== "function") {
        throw("构造函数第一个参数应为函数");
    }
    
    // 绑定 constructor 属性
    resultObj.constructor = constructor;
    
    // 关联 __proto__ 到 constructor.prototype
    resultObj.__proto__ = constructor.prototype;
    
    // 将构造函数的 this 指向返回的对象
    constructor.apply(resultObj, arguments);
    
    // 返回对象
    return resultObj;
}

function Person(name) {
    this.name = name;
}


var person = mockNew(Person, "jayChou");

console.log(person);

// constructor: ƒ Person(name)
// name: "jayChou"
// __proto__: Object

基本思路正确！所以我们完成了 new 关键字的初步模拟。伙伴们可以自己动手敲一下，每句代码自己是否都能理解。

二、处理返回值

构造函数也是函数，有不同类型返回值。有时候构造函数会返回指定的对象内容，所以要对这部分进行处理。

/**
 * 模拟实现 JavaScript new 操作符
 * @param  {Function} constructor [构造函数]
 * @return {Object|Function|Regex|Date|Error}      [返回结果]
 */
function mockNew() {
    // 创建一个空对象
    let emptyObj = new Object();

    // 取传入的第一个参数，即构造函数，并删除第一个参数。
    // 关于为什么要用 Array.prototype.shift.call 的形式，见之前的博客文章 《JavaScript之arguments》
    let constructor =  Array.prototype.shift.call(arguments);
    
    // 类型判断，错误处理
    if(typeof constructor !== "function") {
        throw("构造函数第一个参数应为函数");
    }
    
    // 绑定 constructor 属性
    emptyObj.constructor = constructor;
    
    // 关联 __proto__ 到 constructor.prototype
    emptyObj.__proto__ = constructor.prototype;
    
    // 将构造函数的 this 指向返回的对象
    let resultObj = constructor.apply(emptyObj, arguments);
    
    // 返回类型判断, 如果是对象，则返回构造函数返回的对象
    if (typeof resultObj === "object") {
        return resultObj
    }
    
    // 返回对象
    return emptyObj;
}

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


var person = mockNew(Person, "jayChou");

console.log(person);

// {name: "jayChou", age: 40}
// age: 40
// name: "jayChou"
// __proto__: Object

当返回值返回了一个自定义对象后，模拟 new 函数就返回该自定义对象。

总结

JavaScript new 关键字的意义在于让普通函数生成一个新对象，并将对象实例的 __proto__ 关联到函数的 prototype 对象。

本文中有些地方需要一些前置知识，但是总体上理解是比较容易的。如果有迷惑的地方，可以翻看我之前的博客文章

欢迎关注我的个人公众号“谢南波”，专注分享原创文章。

idc机房托管专线服务 javascript专题系列模拟实现实现模拟加载 C语言数据结构实现银行模拟

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/99155.html

JS专题之数组去重

摘要：将元素作为对象的键，默认键对应的值为如果对象中没有这个键，则将这个元素放入结果数组中去。前言数组去重在日常开发中的使用频率还是较高的，也是网上随便一抓一大把的话题，所以，我写这篇文章目的在于归纳和总结，既然很多人都在提的数组去重，自己到底了解多少呢。又或者是如果自己在开发中遇到了去重的需求，自己能想到更好的解决方案吗。这次我们来理一理怎么做数组去重才能做得最合适，既要考虑兼容性，...

only_do 2019-08-26 13:29 评论0 收藏0
JavaScript专题之模拟实现bind

摘要：但是三作为构造函数时函数其实还有一个非常重要的特点返回的函数如果作为构造函数，搭配关键字出现的话，我们的绑定就需要被忽略。其次，当返回的函数作为构造函数时，之前绑定的会失效。本文共 1100 字，读完只需 4 分钟概述前一篇文章我们尝试模拟实现了 call 和 apply 方法，其实 bind 函数也可以用来改变 this 的指向。bind 和 call和 apply 两者的区别...

刘明 2019-08-23 12:37 评论0 收藏0
JavaScript深入系列15篇正式完结！

摘要：写在前面深入系列共计篇已经正式完结，这是一个旨在帮助大家，其实也是帮助自己捋顺底层知识的系列。深入系列自月日发布第一篇文章，到月日发布最后一篇，感谢各位朋友的收藏点赞，鼓励指正。写在前面 JavaScript 深入系列共计 15 篇已经正式完结，这是一个旨在帮助大家，其实也是帮助自己捋顺 JavaScript 底层知识的系列。重点讲解了如原型、作用域、执行上下文、变量对象、this、...

fxp 2019-08-20 16:50 评论0 收藏0
JavaScript专题之递归

摘要：专题系列第十八篇，讲解递归和尾递归定义程序调用自身的编程技巧称为递归。然而非尾调用函数，就会创建多个执行上下文压入执行上下文栈。所以我们只用把阶乘函数改造成一个尾递归形式，就可以避免创建那么多的执行上下文。 JavaScript 专题系列第十八篇，讲解递归和尾递归定义程序调用自身的编程技巧称为递归(recursion)。阶乘以阶乘为例： function factorial(n...

asoren 2019-08-22 11:05 评论0 收藏0
JavaScript专题之模拟实现call和apply

摘要：函数可计算某个字符串，并执行其中的的代码男男成功啦实现了函数参数的传递，那么函数返回值怎么处理呢。而且，如果传入的对象是，又该如何处理所以还需要再做一些工作处理返回值返回返回值男男判断传入对象的类型，如果为就指向对象。本文共 1320 字，读完只需 5 分钟概述 JS 函数 call 和 apply 用来手动改变 this 的指向，call 和 apply 唯一的区别就在于函数...

ky0ncheng 2019-08-23 12:37 评论0 收藏0