手撕前端面试，王者之路 | 精通new操作符与Object.freeze

2023-08-21 04:57:16

JavaScript 中 new 操作符和 Object.freeze 深入解析

一、JavaScript 对象创建剖析

1. 创建对象的两种方式

在 JavaScript 中，创建对象有两种主要方式：对象字面量和构造函数。

对象字面量 创建的是一个简单的对象，它包含键值对集合，如下所示：

const obj = {
  name: '张三',
  age: 18
};

构造函数 创建的是更复杂的自定义对象，它可以通过 new 操作符调用，如下所示：

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

const person = new Person('李四', 20);

2. new 操作符的本质

new 操作符是一种语法糖，它本质上是对构造函数的调用。它执行以下步骤：

创建一个新对象。
将构造函数的 this 指向新对象。
执行构造函数，为新对象添加属性和方法。
返回新对象。

二、手写 new 操作符

下面是一个自己手写的 new 操作符的例子：

function newOperator(constructor, ...args) {
  const obj = {};
  constructor.prototype = obj;
  constructor.apply(obj, args);
  return obj;
}

const person = newOperator(Person, '王五', 22);

三、Object.freeze 剖析

Object.freeze 方法可以冻结一个对象，使它的属性不可更改，并且阻止对象被扩展或修改。

const obj = {
  name: '张三',
  age: 18
};

Object.freeze(obj);

冻结对象后，不能再添加或修改属性，也不能扩展对象，如下所示：

obj.name = '李四';
obj.age = 20;

obj.gender = '男';

console.log(obj); // { name: '张三', age: 18 }

四、手写 Object.freeze

下面是一个自己手写的 Object.freeze 方法的例子：

function freezeObject(obj) {
  for (const key in obj) {
    const descriptor = Object.getOwnPropertyDescriptor(obj, key);
    descriptor.writable = false;
    descriptor.configurable = false;
    Object.defineProperty(obj, key, descriptor);
  }
  return obj;
}

const obj = {
  name: '张三',
  age: 18
};

freezeObject(obj);