切换语言为:繁体

在 JavaScript 中,new对象的过程是怎样的?

  • 爱糖宝
  • 2024-06-02
  • 2063
  • 0
  • 0

前言

在JavaScript中, 当我们使用new关键字调用一个构造函数时,JavaScript会执行一系列隐式的步骤来创建并初始化一个新对象。具体来说,这个过程包括:

1. 创建空对象
2. 绑定`this`
3. 属性与方法初始化
4. 原型链连接
5. 返回对象

手写myNew函数

理解了new操作的内部机制后,我们可以尝试手动模拟这一过程。下面的myNew函数就是这样一个尝试:

function myNew(Fun, ...args) {
    let obj = {}; // 创建空对象
    Fun.apply(obj, args); // 调用构造函数,绑定this到obj,传递参数
    obj.__proto__ = Fun.prototype; // 设置原型链
    return obj; // 返回新对象
}

这段代码清晰地展示了创建实例的每一步,从创建空对象、绑定构造函数的上下文,到设置原型链,最后返回新对象,完全复现了new操作符的功能。

面向对象的核心概念

let obj={
    name:'鸭王'
}

let obj2 ={
    name:'鸭王2',
    getName:function(){
        console.log('///////////////////////')
        console.log(this.name)
    }
}
let obj3={}
//obj3是原型对象,查找obj2的属性
obj3.__proto__=obj2
console.log(obj3.name)

obj3.__proto__=obj
console.log(obj3.name)
  • 构造函数:如DuckPerson,用于初始化对象的属性和行为。

  • 原型对象(prototype):每个构造函数都有一个关联的原型对象,用于存放所有实例共享的方法。如Duck.prototype.singingPerson.prototype.sayHello

  • 原型链:通过__proto__属性,每个对象可以链接到其构造函数的原型对象,形成一条原型链,从而实现继承和方法查找机制。

实例与原型的互动

通过myNew创建的duck实例,能够访问到Duck.prototype上的singingfly方法,这是因为JavaScript引擎在查找一个对象的属性或方法时,如果在对象自身找不到,就会沿着原型链向上查找,直到找到为止或到达原型链的末端(通常是Object.prototype)。

总结

JavaScript的面向对象模型以其独特的原型链继承方式,提供了灵活而强大的对象创建与复用机制。通过深入理解new操作符的工作原理及手动实现类似功能的myNew函数,我们可以更加透彻地掌握JavaScript中面向对象编程的核心概念。这种机制不仅让每个对象拥有自己独特的属性,同时通过共享原型上的方法实现了高效代码复用,是JavaScript强大表现力和灵活性的一个重要体现。

0条评论

您的电子邮件等信息不会被公开,以下所有项均必填

OK! You can skip this field.