Javascript-new 关键字的具体实现
文章目录

new 关键字做了什么操作

  1. 创建了一个空对象 obj
  2. 构造函数中的 this 指向这个新对象 obj
    • 构造函数中会有一些 this.a = a , 这样就可以将传入的 a 通过 this 传给这个新对象, 通过操作 this 给 obj 添加属性
  3. 连接 prototype, 设置 obj 的 __proto__ 指向构造函数的 prototype
    • 所以修改 prototype 可以影响到所有的实例
  4. 如果构造函数没有额外返回, 那么返回这个处理过的 obj

代码示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
/* --------------------------------------------- */
/* 这里定义了一个 Person */
function Person(age) {
this.age = age;
}

/* --------------------------------------------- */
/* 下面来模拟 const x = new Person() */
/* --------------------------------------------- */

/* 这里传进来一个 fn, fn 就会传入我们希望初始化的 Person 函数 */
function myNew(fn, args) {
/* 步骤1: 定义一个空 object */
let obj = {};

/* 步骤2: 将我们想要初始化的方法的 prototype 传给 新定义的 object 的 __proto__ */
obj.__proto__ = fn.prototype;

/* 步骤3: 把参数传递到 */
let r = fn.call(obj, ...args);

/* 最终如果 fn 调用后没有返回值则返回 obj */
return typeof r === "object" ? r : obj;
}

/* --------------------------------------------- */
/* 下面来模拟 const x = new Person() */
/* --------------------------------------------- */

let kid1 = new Person(10);

console.log(kid1);
console.log(kid1.age); // 输出 10

let kid2 = myNew(Person, [10]);

console.log(kid2);
console.log(kid2.age); // 输出 10