new 操作符
new操作符的作用
- new 操作符会返回一个对象
- 这个对象也就是构造函数中的 this ,可以访问到挂载在 this 上面的任意属性
- 这个对象可以访问到构造函数原型上的属性,所以需要将对象与构造函数链接起来
- 返回原始值需要忽略,返回对象需要正常处理
手动实现代码
function create(Con, ...args) {
let obj = {}
Object.setPrototypeOf(obj, Con.prototype)
let result = Con.apply(obj, args)
return result instanceof Object ? result : obj
}
这就是一个手动实现new操作符的代码。
步骤如下:
- 首先在函数接受不定量的参数,第一个参数为构造函数,接下来的参数被构造函数使用
- 然后内部创建一个新对象 obj
- 因为 obj 对象需要访问到构造函数原型链上的属性,所以我们通过 setPrototypeOf 将两者联系起来,这段代码等同于 obj.proto = Con.prototype
- 将 obj 绑定到构造函数上,并且传入剩余的参数
- 判断构造函数返回值是否为对象没如果为对象就使用构造函数的返回的值,否则则使用 obj ,这样就实现了忽略构造函数返回的原始值
调用手动创建的构造函数
function Test(name, age) {
this.name = name
this.age = age
}
Test.prototype.sayName = function () {
console.log(this.name)
}
const a = create(Test, 'lxl', 25)
console.log(a.name); //'lxl
console.log(a.age);// 25
a.sayName() // 'lxl'
new 操作符 调用构造函数实际上会经历一下 4 个步骤:
- 创建一个新对象
- 将构造函数的作用域赋给对象 (因此 this 就指向了这个新对象)
- 执行构造函数中的代码 (为这个新对象添加属性)
- 返回新的对象
new操作符具体干了什么,具体就是三件事
var obj = {}
obj.protp = Base.protoType
Base.call(obj)
Base.prototype.toString = function(){
return this.id
}
1. 我们创建了一个空对象obj
2. 将这个空对象的 __prptp__成员指向Base函数对象prototype成员对象
3. 将Base函数对象的this指针替换成obj,然后再调用Base函数,于是我们就给obj对象赋值了一条个id成员变量,这个成员变量的值是 'base' 关于call函数的用法
参考链接:
new在js中的作用链接:https://blog.csdn.net/qq_27674439/article/details/99095336
new手动创建链接:https://juejin.im/post/5c7b963ae51d453eb173896e