JavaScript - 原型及原型链
原型
__proto__
是每个 JavaScript 对象(除了 null)都有的一个内部属性,它指向该对象的构造函数的原型对象(即 prototype 属性)。这是一种隐式原型__proto__
决定了对象的原型链。如果我们访问一个对象的属性或方法,而该对象本身没有这个属性或方法,JavaScript 会沿着**proto**
指向的原型链向上查找,直到找到该属性或方法,或者到达原型链的顶端null
__proto__javascript
12345const obj = {}console.log(obj.__proto__ === Object.prototype) // trueconst arr = []console.log(arr.__proto__ === Array.prototype) // true
prototype
是函数对象的一个属性。每当我们定义一个函数时,JavaScript 引擎会为这个函数自动创建一个prototype
属性,该属性是一个对象(默认情况下只包含一个 constructor 属性,指向这个函数本身)prototype
是用于实现 JavaScript 继承的关键机制。当一个函数被用作构造函数来创建对象时,所有通过该构造函数创建的对象都将共享这个prototype
对象中的属性和方法- 简单来说,该函数实例化的所有对象的
proto
的属性指向这个对象,它是该函数所有实例化对象的原型
prototypejavascript
12345678910111213function 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
123456789const obj = {}obj.__proto__ === Object.prototype // true//原型链是: obj -> Object.prototype -> nullobj.__proto__ (或 Object.prototype)||--> Object.prototype (如 toString, hasOwnProperty 等方法)||--> null
数组的原型链javascript
1234567891011const arr = []arr.__proto__ === Array.prototype // true//原型链是 arr -> Array.prototype -> Object.prototype -> nullarr.__proto__ (或 Array.prototype)||--> Array.prototype (如 push, pop, forEach 等数组方法)||--> Object.prototype (如 toString, hasOwnProperty 等方法)||--> null
字符串的原型链javascript
1234567891011const str = 'str'str.__proto__ === String.prototype // true//原型链是 str -> String.prototype -> Object.prototype -> nullstr.__proto__ (或 String.prototype)||--> String.prototype (如 toUpperCase, toLowerCase 等字符串方法)||--> Object.prototype (如 hasOwnProperty, toString 等方法)||--> null
原型链javascript
123456789101112131415161718192021function Animal() {}Animal.prototype.eat = function() {console.log('Eating');};function Dog(name) {this.name = name;}Dog.prototype = new Animal(); // Dog 继承了 AnimalDog.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 实现了灵活的继承机制,使得对象可以共享和继承其他对象的属性和方法。这种机制与基于类的继承有所不同,但同样提供了强大的继承能力