JavaScript 原型和原型链 面试题

### JavaScript 原型与原型链 面试题解析 JavaScript 的原型和原型链是前端开发中非常重要的概念，尤其是在面试时经常被问到。以下是对这一主题的详细解析。 #### 1. 原型 (Prototype) 在 JavaScript 中，每个函数都有一个 `prototype` 属性，它指向一个对象，这个对象就是该函数作为构造函数创建的实例的原型[^1]。通过原型可以为所有实例共享的方法或属性赋值。 例如： ```javascript function Person(name) { this.name = name; } Person.prototype.sayHello = function() { console.log("Hello, my name is " + this.name); }; const person1 = new Person("Alice"); person1.sayHello(); // 输出: Hello, my name is Alice ``` #### 2. 原型链 (Prototype Chain) 当访问一个对象的属性或方法时，如果该对象本身没有定义，则会沿着其内部的 `__proto__` 属性指向的原型链向上查找，直到找到该属性或方法为止[^2]。 示例代码： ```javascript function Animal() {} Animal.prototype.eat = function() { console.log("I am eating"); }; function Dog() {} Dog.prototype = Object.create(Animal.prototype); Dog.prototype.bark = function() { console.log("Woof!"); }; const dog = new Dog(); dog.bark(); // 输出: Woof! dog.eat(); // 输出: I am eating ``` #### 3. 判断继承关系 可以使用 `isPrototypeOf` 方法来判断一个对象是否存在于另一个对象的原型链上[^4]。 ```javascript console.log(Dog.prototype.isPrototypeOf(dog)); // true console.log(Animal.prototype.isPrototypeOf(dog)); // true ``` #### 4. `instanceof` 运算符 `instanceof` 是用来检测构造函数的 `prototype` 属性是否出现在某个实例对象的原型链上的算法[^5]。 ```javascript console.log(dog instanceof Dog); // true console.log(dog instanceof Animal); // true console.log(dog instanceof Object); // true ``` #### 5. 原型链继承中的问题 直接将父类的原型赋值给子类会导致父类和子类共享同一个原型对象，修改任意一方会影响另一方，这是不推荐的做法。 #### 6. 实战练习题 编写一个函数去掉数组中的重复值，并将其定义在原型链上[^3]。 ```javascript Function.prototype.unique = function() { return this.filter(function(item, index, array) { return array.indexOf(item) === index; }); }; const arr = [1, 2, 3, 2, 1]; console.log(arr.unique()); // 输出: [1, 2, 3] ``` #### 7. 总结 - 每个函数都有一个 `prototype` 属性，用于定义所有实例共享的属性和方法。 - 对象的 `__proto__` 属性指向其构造函数的 `prototype`。 - 原型链允许我们实现继承，但需要注意避免共享状态带来的问题。 - 使用 `isPrototypeOf` 和 `instanceof` 可以判断继承关系。