【JavaScript】手撕前端面试题：手写new操作符手写Object

最新推荐文章于 2024-11-10 11:21:35 发布

2401_84181309

最新推荐文章于 2024-11-10 11:21:35 发布

阅读量642

点赞数 22

文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/2401_84181309/article/details/138237654

版权

本文探讨了JavaScript中的new运算符的工作原理，包括创建对象、设置原型等步骤，并提供了手撕代码实现new操作的过程。接着，文章详细介绍了如何手写Object.freeze方法，要求实现对象的冻结，确保其不可修改、不可扩展并保持原型链的冻结。在实现过程中，强调了处理不可枚举属性、Symbol属性和递归冻结等方面。最后，作者鼓励读者深入学习，提供了一个技术交流的圈子来共同提升技能。

摘要由CSDN通过智能技术生成

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

参数：

constructor
一个指定对象实例的类型的类或函数。
arguments
一个用于被 constructor 调用的参数列表。

new 关键字会进行如下的操作：

创建一个空的简单 JavaScript 对象（即 {}）；
为步骤 1 新创建的对象添加属性 __proto__，将该属性链接至构造函数的原型对象（设置它的原型为构造函数的原型对象）；
将步骤 1 新创建的对象作为 this 的上下文；
如果该函数没有返回对象，则返回 this。

手撕代码

const \_new = function () {
    // 补全代码
    // 1. 创建一个空的简单 `JavaScript` 对象（即 `{}`）；
    // 2. 为步骤 1 新创建的对象添加属性 `\_\_proto\_\_`，将该属性链接至构造函数的原型对象（设置它的原型为构造函数的原型对象）；
    // 3. 将步骤 1 新创建的对象作为 `this` 的上下文；
    // 4. 如果该函数没有返回对象，则返回 `this`。
    const obj1 = {}; // 1
    const Fn = arguments[0]; // 获取函数参数
    Object.setPrototypeOf(obj1, Fn.prototype); // 2 
    const obj2 = Fn.apply(obj1, [].slice.call(arguments, 1)) // 3 
    return obj2 instanceof Object ? obj2 : obj1; // 4

}

[].slice.call(arguments, 1)的作用是获得一个arguments的拷贝数组，且该数组不含arguments的第一个元素。