JS中new关键字的实现

我心飞翔 分类:javascript

js中的new关键字主要用在以构造函数的方式创建对象时,像这样:

 function Foo(name, age, sex) {
     this.name = name
     this.age = age
     this.sex = sex
     // return 1  //如果返回了一个基本数据类型数据,下方的person会生成一个对象
     // return {a:1} //如果返回了一个非基本数据类型数据,下方的person为{a:1}
 }
 var person = new Foo('小明', '18', '男')
 consloe.log(person)
 console.log(person.name)  //小明
 

我们发现这个构造函数没有显示返回任何值,如果有返回值会怎样呢?

 function Foo(name, age, sex) {
     this.name = name
     this.age = age
     this.sex = sex
     return 1  
 }
 var person = new Foo('小明', '18', '男')
 consloe.log(person)
 console.log(person.name)  //小明
 

返回了一个1,但是没有任何影响,结果没有变化
由此得出一个结论:构造函数如果返回了一个原始值类型,实际上会生成一个空对象,没有任何意义

如果返回对象会怎么样呢?

 function Foo(name, age, sex) {
     this.name = name
     this.age = age
     this.sex = sex
     return {a:1} //如果返回了一个非基本数据类型数据,下方的person为{a:1}
 }
 var person = new Foo('小明', '18', '男')
 consloe.log(person)  //{a:1}
 console.log(person.name)  //undefined
 

返回了一个对象,这个对象的值就会被正常返回

返回结果注意

通过这种方式获取对象时,最终不一定返回的是对象,要看构造函数的返回值是什么,如果构造函数返回的是原始值类型,实际会生成一个对象,如果构造函数返回的是引用值类型,则实际返回的是该引用值类型。

上一段代码很容易让人认为 Foo 是一个构造函数,因为我们使用 new 来调用它并且看到它“构造”了一个对象。实际上, Foo 和你程序中的其他函数没有任何区别。函数本身并不是构造函数,然而,当你在普通的函数调用前面加上 new 关键字之后,就会把这个函数调用变成一个“构造函数调用”。实际上, new 会劫持所有普通函数并用构造对象的形式来调用它。
换句话说,在 JavaScript 中对于“构造函数”最准确的解释是,所有带 new 的函数调用。
函数不是构造函数,但是当且仅当使用 new 时,函数调用会变成“构造函数调用”。
那么new关键字究竟是如何构造一个对象,使其拥有“构造函数”的属性和方法的呢?它的内部是如何实现的呢?

new关键字创建实例对象的步骤:

  • 1.创建一个新的对象,如:var person={},因为new关键字返回的是一个对象
  • 2.新对象的__proto__属性指向构造函数的原型对象
  • 3.将构造函数的作用域赋值给新对象(也就是this对象指向新对象)
  • 4.返回新对象person

我们就可以手动封装一个new关键字了

// fn是构造函数
function myNew(fn, ...args) {
    const obj = {};
    obj.__proto__ = fn.prototype;
    // 改变this指向
    let result = fn.apply(obj, args)
    // return result
    // 确保new出来的是一个对象
    return typeof result === "object" ? result : obj
}
 

来测试一下

 function Student(name, age, sex) {
    this.name = name;
    this.age = age;
    this.sex = sex;
    this.play=function(){
        console.log('hhhhhhh')
    }
}
var student1 = myNew(Student, '小明', 18, '男')
console.log(student1) //{name: "小明", age: 18, sex: "男", play: ƒ}
 

参考:《你不知道的JavaScript(上卷)》

回复

我来回复
  • 暂无回复内容