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 实现了灵活的继承机制，使得对象可以共享和继承其他对象的属性和方法。这种机制与基于类的继承有所不同，但同样提供了强大的继承能力