prototype和proto的区别

在 JavaScript 中，prototype 和 __proto__ 都与原型链和继承机制有关，但它们的含义和作用是不同的。下面来详细讲解它们的区别。

一、prototype 和 proto 的区别

二、prototype 和 proto 的详细解析

1. prototype 的作用

• 每个构造函数都有一个名为 prototype 的属性，它指向一个对象。
• 这个对象是用来共享方法和属性的。
• 当通过构造函数创建对象时，实例会继承 prototype 上的方法和属性。

示例：

// 构造函数
function Person(name) {
    this.name = name;
}

// 给构造函数的 prototype 添加方法
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

注意：

• 通过修改 Person.prototype，所有实例都能访问到新的方法或属性。
• prototype 只有在构造函数上存在，实例本身没有 prototype 属性。

2. proto 的作用

• 每个对象实例都有一个 __proto__ 属性，指向创建该实例的构造函数的原型对象。
• 这个属性是隐式原型，用于查找属性和方法。

示例：

console.log(person1.__proto__ === Person.prototype); // true
console.log(person2.__proto__ === Person.prototype); // true

作用：

• 当我们访问对象的属性或方法时，JavaScript 会先查找对象本身，如果没有，则沿着**__proto__** 继续查找，直到 null。
• 这种链式查找机制称为原型链。

三、构造函数、实例、原型三者关系

1. 构造函数：

   • Person.prototype：原型对象。
   • Person.prototype.constructor：指向构造函数本身。

2. 实例对象：

   • person1.__proto__：指向构造函数的原型对象，即 Person.prototype。

关系图：

Person --> prototype --> { sayHello, constructor }
                   ↑
                 __proto__
                   ↑
              person1 / person2

四、示例验证原型链

console.log(person1.__proto__ === Person.prototype);  // true
console.log(Person.prototype.constructor === Person); // true
console.log(Object.getPrototypeOf(person1) === Person.prototype); // true

五、修改 prototype 和 proto 的区别

修改 prototype：影响所有实例

Person.prototype.greet = function() {
    console.log("Greetings from " + this.name);
};

person1.greet(); // Greetings from Alice
person2.greet(); // Greetings from Bob

修改 proto：仅影响当前对象

const obj = {};
obj.__proto__ = {
    customMethod: function() {
        console.log("I am custom!");
    }
};

obj.customMethod(); // I am custom!

六、在类中的表现（ES6+）

在 ES6 中，使用 class 语法定义类，原型机制依然有效：

class Animal {
    speak() {
        console.log("Animal speaks");
    }
}

const dog = new Animal();

console.log(dog.__proto__ === Animal.prototype);  // true
console.log(Animal.prototype.constructor === Animal); // true

七、为什么 proto 不推荐使用？

1. 性能问题： __proto__ 是非标准特性，访问速度较慢。
2. 兼容性问题： 早期版本的 IE 不支持。
3. 规范性： 建议使用 Object.getPrototypeOf() 代替：

   console.log(Object.getPrototypeOf(person1) === Person.prototype); // true
   

八、总结

面试高频问题

1. prototype 和 proto 有什么区别？

   • prototype 是构造函数的属性，__proto__ 是实例对象的属性。
   • prototype 用于定义共享方法和属性，__proto__ 用于访问原型链。

2. 如何修改实例的原型？

   • 可以直接使用 Object.setPrototypeOf(obj, newProto); 或 obj.__proto__ = newProto;，但前者性能更优。

3. 为什么不推荐使用 proto？

   • 性能差且非标准化，推荐使用 Object.getPrototypeOf()。

希望这些讲解能帮你彻底搞清楚 prototype 和 __proto__ 的区别！