前端面试题-JavaScriptl原型,原型链?有什么特点?(2024.2.2)
一、先理解下构造函数,实例对象 (看代码的打印结果和解释)
构造函数(Constructor)的
prototype
属性: 当你创建一个函数时,JavaScript 会自动为该函数创建一个prototype
属性。这个prototype
属性是一个对象,它包含可以由该构造函数创建的所有实例共享的属性和方法。对象的
__proto__
属性: 每个对象都有一个__proto__
属性,它指向该对象的原型。当你访问一个对象的属性时,JavaScript 引擎会首先查找对象本身是否有这个属性,如果没有,就会去查找对象的原型(通过__proto__
找到原型对象),以此类推,直到找到该属性或到达原型链的末尾。// 构造函数 function Person(name) { this.name = name; } // 通过构造函数创建对象 var person1 = new Person('Alice'); // person1 的原型是 Person 构造函数的 prototype 属性 console.log(person1.__proto__ === Person.prototype); // 输出: true // Person 构造函数的 prototype 的原型是 Object 构造函数的 prototype console.log(Person.prototype.__proto__ === Object.prototype); // 输出: true // Object 构造函数的 prototype 的原型是 null,这是原型链的终点 console.log(Object.prototype.__proto__ === null); // 输出: true
__proto__
是访问原型的非标准方法,它通常被称为“隐式原型”。- 在现代 JavaScript 中,你应该使用
Object.getPrototypeOf()
或Object.create()
等方法来访问和设置原型。
二、原型、原型链
-
原型(prototype):
- 每个 JavaScript 对象都有一个原型对象,它是一个指向另一个对象的引用。
- 原型对象可以包含属性和方法,它们可以被对象实例继承。
- 在 JavaScript 中,对象实例可以通过
Object.prototype
访问到它的原型对象。
-
原型链(prototype chain):
- 当访问一个对象的属性或方法时,JavaScript 引擎会先查找该对象本身是否具有这个属性或方法。如果没有,它会继续查找对象的原型对象,以此类推,直到找到该属性或方法,或者达到原型链的顶端(即
Object.prototype
)。 - 这种对象之间通过原型链连接起来的结构被称为原型链。
- 当访问一个对象的属性或方法时,JavaScript 引擎会先查找该对象本身是否具有这个属性或方法。如果没有,它会继续查找对象的原型对象,以此类推,直到找到该属性或方法,或者达到原型链的顶端(即
-
特点:
- 继承关系:原型链实现了对象之间的继承关系,允许对象实例继承原型对象的属性和方法。
- 动态性:可以在运行时动态地改变和扩展对象的原型。这意味着你可以在程序执行过程中修改对象的原型,对所有继承自该原型的对象都会产生影响。
- 原型和实例之间的关系:对象实例与它的原型之间存在连接,通过
__proto__
属性(不建议直接使用,可以使用Object.getPrototypeOf
或Object.setPrototypeOf
)可以访问到实例的原型对象。
// 示例
function Animal(name) {
this.name = name;
}
// 创建 Animal 的实例
const cat = new Animal('Cat');
// 演示原型链
console.log(cat.hasOwnProperty('name')); // true,实例本身有 name 属性
console.log(cat.hasOwnProperty('toString')); // false,toString 是从原型链继承而来的
console.log('toString' in cat); // true,toString 是在原型链上找到的
console.log(Object.getPrototypeOf(cat) === Animal.prototype); // true,实例的原型是 Animal.prototype
console.log(Animal.prototype.isPrototypeOf(cat)); // true,Animal.prototype 是 cat 的原型