返回

原来prototype、__proto__、constructor之间关系是这样的!技术人员直呼666!

前端

一、什么是prototype、__proto__和constructor?

1. prototype

原型是JavaScript内置的一个属性,可以被Function和Object访问。它是Function和Object的构造函数的实例。

Function.prototype // [Function: Function]
Object.prototype // {}

2. proto

__proto__是JavaScript内置的一个属性,用于访问对象的原型。

const obj = {};
obj.__proto__ // Object {}

3. constructor

constructor也是JavaScript内置的一个属性,用于访问创建对象的函数。

const obj = new Object();
obj.constructor // [Function: Object]

二、它们之间的关系是什么?

1. prototype与__proto__的关系

prototype属性指向创建对象的构造函数的prototype属性。

const obj = new Object();
obj.__proto__ === Object.prototype // true

2. constructor与__proto__的关系

constructor属性指向创建对象的函数。

const obj = new Object();
obj.constructor === Object // true

三、它们在JavaScript中的作用

1. prototype的作用

prototype属性用于为对象添加属性和方法。

Function.prototype.myMethod = function() {
  // ...
};

const func = new Function();
func.myMethod(); // ...

2. __proto__的作用

__proto__属性用于访问对象的原型,从而可以访问原型上的属性和方法。

const obj = {};
obj.__proto__.toString() // "[object Object]"

3. constructor的作用

constructor属性用于创建新的对象。

const obj = new Object();

四、面向对象编程中的应用

1. 继承

在JavaScript中,可以通过修改对象的__proto__属性来实现继承。

const Parent = function() {
  this.name = "Parent";
};

const Child = function() {
  this.name = "Child";
};

Child.prototype = new Parent();

const child = new Child();
console.log(child.name); // "Child"

2. 实例

在JavaScript中,对象是通过构造函数创建的,而构造函数就是Function的实例。

const obj = new Object();
obj instanceof Object // true

五、ES6中的变化

1. class

在ES6中,可以通过class来定义类。

class Parent {
  constructor() {
    this.name = "Parent";
  }
}

class Child extends Parent {
  constructor() {
    super();
    this.name = "Child";
  }
}

const child = new Child();
console.log(child.name); // "Child"

2. extends

在ES6中,可以通过extends来实现继承。

class Parent {
  constructor() {
    this.name = "Parent";
  }
}

class Child extends Parent {
  constructor() {
    super();
    this.name = "Child";
  }
}

const child = new Child();
console.log(child.name); // "Child"

六、总结

prototype、__proto__和constructor是JavaScript中三个重要的概念,它们在面向对象编程中扮演着重要的角色。理解它们的联系和作用,可以帮助我们更好地理解JavaScript的运行机制。