new操作符都做了哪些事情

发布时间 2023-06-21 15:01:22作者: 有只小菜猫

一、概念

  • new 能创建一个实例对象;
  • 这个对象是给定的构造函数
function Person(name, age){
    this.name = name;
    this.age = age;
    console.log(this) // Person { name: 'Tom', age: 20 }
}
Person.prototype.sayName = function () {
    console.log(this.name)
}
const person1 = new Person('Tom', 20)
console.log(person1)  // Person {name: "Tom", age: 20}
person1.sayName() // 'Tom'
  • new 通过构造函数 Person 创建出来的实例可以访问到构造函数中的属性
  • new 通过构造函数 Person 创建出来的实例可以访问到构造函数原型链中的属性(即sayName)
  • 构造函数 Person 的 this 指向是 new 通过构造函数 Person 创建出来的实例

二、

【实例化对象、继承原型、this指向创建的对象、返回创建的对象】

  • 创建新的空对象

  • 设置原型,将对象的原型设置为函数的prototype对象【将对象的proto指向构造函数Func的原型对象prototype】=》建立对象的原型链

  • 让函数的this指向这个对象,执行构造函数的代码(为这个新对象添加属性)

  • 判断函数的返回值类型,如果是值类型,返回创建的对象。如果是引用类型,就返回这个引用类型 的对象

function newFunc(Func,...args) {
    // 1.创建一个新对象
    let newObj = {}
    // 2.将新对象和构造函数通过原型链连接
    newObj.__proto__ = Func.prototype
    // 3.将构造函数的this绑定到新对象上
    const result = Func.apply(newObj,args)
    // 4.根据返回值类型判断,如果是值类型返回newObj,如果是引用类型返回正常引用类型
    return result instanceof Object ? result : newObj   
}

测试:

function Person(name, age) {
    this.name = name;
    this.age = age;
}
Person.prototype.sayName = function(){
    console.log(this.name);
}
const person1 = newFunc(Person,'Tom','18')
console.log(person1) // Person { name: 'Tom', age: '18' }
person1.sayName() // Tom
person1.getFullName() // TypeError: person1.getFullName is not a function

给构造函数添加属性需要通过原型链=====》person1.getFullName():报错

参考地址:(4条消息) new操作符具体干了什么_new操作符具体干了什么呢_蔡姐的博客-CSDN博客