返回
原来prototype、__proto__、constructor之间关系是这样的!技术人员直呼666!
前端
2023-12-30 09:23:57
一、什么是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的运行机制。