new操作符都干了什么

641 字

3 分钟

new操作符都干了什么

2022-08-05

前端

JS

`new`是什么#

因为比较简单，直接看一个例子复习一下:

1
function Person(name,age) {
2
    this.name = name
3
    this.age = gae
4
}
5
Person.prototype.sayName = function () {
6
    console.log(this.name)
7
}
8
const p1 = new Person('Ocean',20)
9
console.log(p1)  // Person {name:'Ocean',age:20}
10
p1.sayName() // 'Ocean'

new 通过构造函数 Person 创建出来的实例可以访问到构造函数中的属性

new 通过构造函数 Person 创建出来的实例可以访问到构造函数原型链中的属性（即实例与构造函数通过原型链连接了起来）

1. 在构造函数中显式加上返回值，并且返回值是一个原始类型#

1
function Test(name) {
2
    this.name = name
3
    return 1
4
}
5
const t = new Test('Ocean')
6
console.log(t.name) // 'Ocean'

TIP
可以发现，构造函数中返回一个原始值，然而这个返回值并没有作用

2. 在构造函数中返回一个对象#

1
function Test(name) {
2
    this.name = name
3
    console.log(this) // Test {name:'Ocean'}
4
    return {age:20}
5
}
6
const t = new Test('Ocean')
7
console.log(t) // {age:20}
8
console.log(t.name) // undefined

WARNING
从上面可以发现，构造函数如果返回值为一个对象，那么这个返回值会被正常使用

`new`的流程🏷#

TIP

创建一个新的对象obj

将对象与构造函数通过原型链连接起来

将构造函数中的this绑定到新建的对象上

根据构造函数返回类型作判断，如果是原始值则忽略，如果返回的是对象，就正常处理

手写`new`操作符🏷#

实现#

1
function my_new(Func,...args) {
2
    // 创建一个新对象
3
    const obj = {}
4
    // 新对象的原型指向构造函数原型对象
5
    obj._proto_ = Func.prototype
6
    // 将构造函数的this指向新对象
7
    let result = Func.apply(obj,args)
8
    // 根据返回值判断
9
    return result instanceof Object? result : obj
10
}

测试#

1
function my_new(Func,...args) {
2
    // 创建一个新对象
3
    const obj = {}
4
    // 新对象的原型指向构造函数原型对象
5
    obj._proto_ = Func.prototype
6
    // 将构造函数的this指向新对象
7
    let result = Func.apply(obj,args)
8
    // 根据返回值判断
9
    return result instanceof Object? result : obj
10
}
11
function Person(name,age) {
12
    this.name = name
13
    this.age = age
14
}
15
Person.prototype.say = function () {
16
    console.log(this.name)
17
}
18
let p = my_new(Person,'Ocean',20)
19
console.log(p) // Person {name:'Ocean',age:20}
20
p.say() // 'Ocean'

`new.target的应用`#

TIP
new.target属性允许你检测函数或构造方法是否是通过new运算符被调用的
在通过new运算符被初始化的函数或构造方法中，new.target返回一个指向构造方法或函数的引用。在普通的函数调用中，new.target 的值是undefined。

1
function Foo() {
2
  if (!new.target) throw "Foo() must be called with new";
3
  console.log("Foo instantiated with new");
4
}
5

6
Foo(); // throws "Foo() must be called with new"
7
new Foo(); // logs "Foo instantiated with new"