Javascript 原型与原型链深入详解
原型
在JavaScript中,每一个对象都有一个指向其原型的属性,称之为 __proto__
,原型本身也是一个对象。在Javascript中使用函数构造对象时,函数本身也有一个原型属性,称之为 prototype
。我们可以使用 Object.getPrototypeOf()
方法实现查找一个对象的原型。比如:
let arr = [1, 2, 3];
let arrProto = Object.getPrototypeOf(arr);
console.log(arrProto); //输出:[object Array]
通过查找到原型,我们可以发现,arr
的原型是一个 Array
对象。
原型链
原型链是基于原型的一个特性。每一个对象都有原型,原型也是对象,也有原型,这样随着原型的递归查找,我们就得到了一个原型链。在Javascript中,我们可以通过以下方式实现查找原型链:
let arr = [1, 2, 3];
let arrProto = Object.getPrototypeOf(arr);
let arrProtoProto = Object.getPrototypeOf(arrProto); //获取原型的原型
console.log(arrProto); // [object Array]
console.log(arrProtoProto); // [object Object], 最终的原型为 Object.prototype
在这个例子中,我们可以看到,arrProto
对象的原型是 Array.prototype
,Array.prototype
的原型是 Object.prototype
,这就形成了一个原型链。
原型继承
在Javascript中,对象的属性可以继承自它的原型,我们称之为原型继承。在创建一个对象时,我们可以将该对象的原型指向任何一个对象。比如,我们可以通过以下方式实现:
function Person(name) {
this.name = name;
}
let personProto = {
sayHello:function() {
console.log(`Hello ${this.name}`);
}
};
Person.prototype = personProto;
let tom = new Person('Tom');
tom.sayHello(); //输出:Hello Tom
在这个例子中,我们创建了一个 Person
函数以及一个 personProto
对象,然后将 Person.prototype
指向 personProto
,这就意味着所有使用 new Person()
创建的对象都将继承 personProto
对象中的属性和方法。
示例说明
示例一
function Animal(name) {
this.name = name;
}
Animal.prototype.sayName = function() {
console.log(`My name is ${this.name}`);
}
function Dog(name, color) {
Animal.call(this, name);
this.color = color;
}
Dog.prototype = Object.create(Animal.prototype); //继承 Animal的原型
Dog.prototype.constructor = Dog; //重置构造函数为 Dog
Dog.prototype.bark = function() {
console.log('Woof!');
}
let dog = new Dog('Buddy', 'Golden');
dog.sayName(); // 输出:"My name is Buddy"
dog.bark(); // 输出:"Woof!"
在这个例子中,我们创建了一个 Animal
函数,使用 Animal.prototype
创建一个原型,并绑定一个 sayName
方法。然后我们创建了一个 Dog
函数,并调用 Animal.call(this, name)
来实现其属性继承。然后我们使用 Object.create(Animal.prototype)
来创建一个新的 Dog
原型,并继承 Animal.prototype
,最后重置构造函数为 Dog
。
示例二
class Animal {
constructor(name) {
this.name = name;
}
sayName() {
console.log(`My name is ${this.name}`);
}
}
class Dog extends Animal {
constructor(name, color) {
super(name);
this.color = color;
}
bark() {
console.log('Woof!');
}
}
let dog = new Dog('Buddy', 'Golden');
dog.sayName(); // 输出:"My name is Buddy"
dog.bark(); // 输出:"Woof!"
在这个例子中,我们使用ES6的 class
语法创建了一个 Animal
类,和一个 Dog
类,并使用 extends
实现 Dog
对象继承 Animal
类。最后我们创建了一个 Dog
实例并调用其方法。
总结
原型与原型链是Javascript中非常重要的一部分,可以用于实现继承等功能,同时原型链也是Javascript中一个非常特殊的机制。我们需要掌握原型及其链的概念和实现方法,并应用到实际的代码中去。
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:Javascript 原型与原型链深入详解 - Python技术站