JS的魔法三角:constructor、prototype与__proto__

在JavaScript中,constructorprototype__proto__是与对象创建和继承机制紧密相关的三个概念。理解它们之间的关系对于掌握JavaScript的面向对象编程至关重要。下面将详细介绍这个魔法三角:

1. constructor

  • 定义constructor是一个函数,它被用来初始化一个新创建的对象实例。当使用new关键字创建一个新的对象时,构造函数会被调用。

  • 作用:主要负责为新创建的对象设置初始属性和方法。

  • 示例

    复制代码
    function Person(name, age) {
      this.name = name;
      this.age = age;
    }
    
    const Kobe = new Person('Kobe', 24);

2. prototype

  • 定义 :每个函数都有一个prototype属性,它是一个对象,用于存储可以被该函数的所有实例共享的方法和属性。

  • 作用 :通过prototype属性,可以实现原型链继承,允许子类继承父类的属性和方法。

  • 示例

    复制代码
    Person.prototype.greet = function() {
      console.log(`my name is ${this.name}.`);
    };
    
    const Kobe = new Person('Kobe', 24);
    Kobe.greet(); // "my name is kobe."

3. __proto__

  • 定义__proto__是每个对象的一个内部属性(非标准属性),指向该对象的原型对象。在ES6中,推荐使用Object.getPrototypeOf()Object.setPrototypeOf()来获取或设置原型。

  • 作用__proto__是原型链的核心,当尝试访问一个对象的属性时,如果该对象本身没有这个属性,JavaScript引擎会沿着__proto__链向上查找,直到找到该属性或者到达原型链的末端(通常是null)。

  • 示例

    复制代码
    const Kobe = new Person('Kobe', 24);
    console.log(Kobe.__proto__ === Person.prototype); // true

4. 关系

  • 构造函数与prototype

    • 每个构造函数都有一个prototype属性,这是一个对象,包含所有实例共享的方法和属性。
    • 当使用new关键字创建对象时,新对象的__proto__属性会被设置为构造函数的prototype对象。
  • __proto__与原型链

    • __proto__属性使得对象能够访问其构造函数prototype上的方法和属性。
    • 通过__proto__,可以形成一个从子对象到父对象的链式结构,即原型链。
  • constructorprototype

    • prototype对象上有一个默认的constructor属性,它指向构造函数本身。
    • 这个constructor属性可以帮助我们识别一个对象是由哪个构造函数创建的。

5. 图解


6. 示例代码

复制代码
function Person(name, age) {
  this.name = name;
  this.age = age;
}

// 在构造函数的原型上添加方法
Person.prototype.greet = function() {
  console.log(`my name is ${this.name}.`);
};

const Kobe = new Person('Kobe', 24);

// 查看Kobe的原型
console.log(Kobe.__proto__ === Person.prototype); // true

// 查看Person.prototype的constructor属性
console.log(Person.prototype.constructor === Person); // true

// 使用Kobe调用greet方法
Kobe.greet(); // "my name is Kobe."

// 原型链
console.log(Object.getPrototypeOf(Kobe) === Person.prototype); // true

7. 总结

  • constructor:构造函数,用于初始化新创建的对象实例。
  • prototype:构造函数的原型对象,用于存储可以被所有实例共享的方法和属性。
  • __proto__ :对象的内部属性,指向该对象的原型对象,用于实现原型链继承。

这就是JS的魔法三角吗?看起来并不难吧?

相关推荐
qq_447663055 分钟前
手写SpringMVC(基本框架)
java·开发语言
程序员JerrySUN5 小时前
驱动开发硬核特训 · Day 22(下篇): # 深入理解 Power-domain 框架:概念、功能与完整代码剖析
linux·开发语言·驱动开发·嵌入式硬件
游离状态的猫16 小时前
JavaScript性能优化实战:从瓶颈定位到极致提速
开发语言·javascript·性能优化
GeekABC6 小时前
FastAPI系列06:FastAPI响应(Response)
开发语言·python·fastapi·web
小彭努力中6 小时前
7.Three.js 中 CubeCamera详解与实战示例
开发语言·前端·javascript·vue.js·ecmascript
why1516 小时前
腾讯(QQ浏览器)后端开发
开发语言·后端·golang
charade3126 小时前
【C语言】内存分配的理解
c语言·开发语言·c++
滿6 小时前
Vue3 Element Plus el-tabs数据刷新方法
javascript·vue.js·elementui
LinDaiuuj6 小时前
判断符号??,?. ,! ,!! ,|| ,&&,?: 意思以及举例
开发语言·前端·javascript
敲厉害的燕宝7 小时前
Pinia——Vue的Store状态管理库
前端·javascript·vue.js