JavaScript - 原型及原型链

原型

__proto__

  • __proto__是每个 JavaScript 对象(除了 null)都有的一个内部属性,它指向该对象的构造函数的原型对象(即 prototype 属性)。这是一种隐式原型
  • __proto__决定了对象的原型链。如果我们访问一个对象的属性或方法,而该对象本身没有这个属性或方法,JavaScript 会沿着**proto**指向的原型链向上查找,直到找到该属性或方法,或者到达原型链的顶端null
__proto__
javascript
12345
const obj = {}
console.log(obj.__proto__ === Object.prototype) // true
const arr = []
console.log(arr.__proto__ === Array.prototype) // true

prototype

  • prototype是函数对象的一个属性。每当我们定义一个函数时,JavaScript 引擎会为这个函数自动创建一个prototype属性,该属性是一个对象(默认情况下只包含一个 constructor 属性,指向这个函数本身)
  • prototype是用于实现 JavaScript 继承的关键机制。当一个函数被用作构造函数来创建对象时,所有通过该构造函数创建的对象都将共享这个prototype对象中的属性和方法
  • 简单来说,该函数实例化的所有对象的proto的属性指向这个对象,它是该函数所有实例化对象的原型
prototype
javascript
12345678910111213
function Person(name) {
this.name = name
}
Person.prototype.sayHello = function () {
console.log(`Hello, my name is ${this.name}`)
}
const person1 = new Person('Alice')
const person2 = new Person('Bob')
person1.sayHello() // "Hello, my name is Alice"
person2.sayHello() // "Hello, my name is Bob"

原型链

原型链是由对象通过__proto__连接形成的链条。当你访问一个对象的属性或方法时,如果这个对象本身没有该属性或方法,JavaScript 会沿着__proto__指向的原型链向上查找,直到找到该属性或方法,或到达原型链的顶端null

原型链使得 JavaScript 的继承机制成为可能。通过原型链,一个对象可以继承另一个对象的属性和方法

对象的原形链
javascript
123456789
const obj = {}
obj.__proto__ === Object.prototype // true
//原型链是: obj -> Object.prototype -> null
obj.__proto__ (Object.prototype)
|
|--> Object.prototype (如 toString, hasOwnProperty 等方法)
|
|--> null
数组的原型链
javascript
1234567891011
const arr = []
arr.__proto__ === Array.prototype // true
//原型链是 arr -> Array.prototype -> Object.prototype -> null
arr.__proto__ (Array.prototype)
|
|--> Array.prototype (如 push, pop, forEach 等数组方法)
|
|--> Object.prototype (如 toString, hasOwnProperty 等方法)
|
|--> null
字符串的原型链
javascript
1234567891011
const str = 'str'
str.__proto__ === String.prototype // true
//原型链是 str -> String.prototype -> Object.prototype -> null
str.__proto__ (String.prototype)
|
|--> String.prototype (如 toUpperCase, toLowerCase 等字符串方法)
|
|--> Object.prototype (如 hasOwnProperty, toString 等方法)
|
|--> null
原型链
javascript
123456789101112131415161718192021
function Animal() {}
Animal.prototype.eat = function() {
console.log('Eating');
};
function Dog(name) {
this.name = name;
}
Dog.prototype = new Animal(); // Dog 继承了 Animal
Dog.prototype.constructor = Dog;
const dog = new Dog('Buddy');
dog.eat(); // "Eating"
dog.__proto__ (Dog.prototype)
|
|--> Animal.prototype (包含 eat 方法)
|
|--> Object.prototype (包含 toString, hasOwnProperty 等方法)
|
|--> null

总结

  • __proto__:是对象的隐式原型,指向其构造函数的prototype,用于实现属性和方法的查找。
  • prototype:是函数对象的属性,用于定义构造函数创建的实例共享的属性和方法。
  • 原型链:通过__proto__连接多个对象形成的链条,实现对象属性和方法的继承。

通过这三个概念,JavaScript 实现了灵活的继承机制,使得对象可以共享和继承其他对象的属性和方法。这种机制与基于类的继承有所不同,但同样提供了强大的继承能力