分析 JavaScript 原型及原型链可分为以下几个步骤:
1. 什么是原型
在JavaScript中,每个对象都有一个原型对象(prototype),当你访问一个对象的属性时,如果这个对象本身不存在这个属性,那么 JavaScript 就会从原型对象中找这个属性,如果原型对象中也不存在这个属性,那么就会从原型对象的原型对象中继续寻找,直到找到为止,这就是原型链。
2. 构造函数的 prototype 属性
每个函数都有一个 prototype 属性,同时,构造函数的 prototype 属性指向了实例化出来的对象的原型。
示例代码:
function Person(name, age){
this.name = name
this.age = age
}
Person.prototype.say = function(){
console.log(`My name is ${this.name}, I'm ${this.age} years old`)
}
const person1 = new Person('Tom', 18)
person1.say() // 输出: My name is Tom, I'm 18 years old
上面代码中,我们通过一个构造函数创建了一个实例,我们可以看到这个构造函数包含一个原型属性 prototype
,我们可以把一些函数当做方法添加到这个原型属性中,该方法就可以被实例所共享。所以上述代码中的 say()
方法就被所有通过 Person
构造函数实例化出来的对象所共享和调用。
3. 实例与构造函数的关系
通过构造函数创建的实例,会构成一个链式结构,例如上述代码中的 person1
,它的原型链如下:
person1 -> Person.prototype -> Object.prototype -> null
这意味着,访问实例 person1
的属性时,如果实例本身不存在该属性,则会沿着原型链向上查找。所以使用原型和原型链的好处是:可以将方法定义在原型上,使得所有实例都可以共享这些方法,并且减少内存的开销。
4. 原型链的继承
当一个对象的原型指向另一个对象时,就发生了原型链的继承,我们可以通过以下方式实现原型链的继承:
function Animal(name) {
this.name = name
}
Animal.prototype.say = function() {
console.log(`My name is ${this.name}`)
}
function Dog(name, age) {
Animal.call(this, name)
this.age = age
}
Dog.prototype = Object.create(Animal.prototype)
Dog.prototype.constructor = Dog
Dog.prototype.bark = function() {
console.log('Woof! Woof!')
}
上述代码中,我们通过一个构造函数 Animal
,创建了一个样板,然后我们通过 Dog
原型继承 Animal
原型,从而使得 Dog
实例化的对象,可以使用 Animal.prototype
上的所有方法和属性,也可以在 Dog.prototype
上添加独有的属性和方法。
这样,我们就可以使用 Dog
构造函数创建出的所有实例,调用 Animal
的方法,以及 Dog
自己独有的方法了。