简单理解js的prototype属性及使用

在进入正文之前，我得先说说我认识js的prototype这个东西的曲折过程。 百度js的prototype的文章，先看看，W3School关于prototype的介绍： 你觉得这概念适合定义js的prototype这个东西吗？你是否也认为prototype是一个object对象的属性呢？是的话，请认真认真看我这篇文章，因为这篇文章会毁灭你的人生三观，呵呵，就是有这么严重，因为本人就是被这个定义给害惨的。 不得不说，看了网上的一些介绍prototype的文章，基本上都说prototype是对象的一个属性，于是，我也坚定的认为prototype是一个对象的属性，所以，我被了坑好久好久，由此，引 JavaScript中的`prototype`属性是一个非常核心且关键的概念，它与对象的继承机制紧密相关。`prototype`实际上并不属于对象，而是属于函数，是函数的一个特殊属性。错误地理解`prototype`会导致对JavaScript的理解偏差，因此深入理解这一概念至关重要。 我们要澄清一点：`prototype`不是对象的属性，而是函数的属性。当我们创建一个函数时，这个函数就自动拥有了`prototype`属性。`prototype`的主要作用是为函数创建的对象提供共享的属性和方法。例如，当你使用`new`关键字实例化一个函数时，新创建的对象会继承该函数`prototype`上的属性和方法。 让我们通过实验来验证这一点： ```javascript function Person() {} // 定义一个构造函数Person console.log(Person.prototype); // 打印Person函数的prototype，你会发现它是一个对象 ``` 上述代码中，`Person.prototype`是一个对象，这个对象包含了所有实例化`Person`函数时可以继承的属性和方法。当我们创建`Person`的一个实例时，如`let person = new Person();`，`person`就会继承`Person.prototype`上的内容。 如果我们想要在`Person`的所有实例上添加一个共同的方法，我们可以直接在`Person.prototype`上定义： ```javascript Person.prototype.sayHello = function() { console.log('Hello!'); }; let person1 = new Person(); person1.sayHello(); // 输出 "Hello!" let person2 = new Person(); person2.sayHello(); // 输出 "Hello!" ``` 可以看到，`sayHello`方法被所有`Person`的实例共享，这就是`prototype`实现继承的基本原理。 至于为何对象不能直接引用`prototype`，是因为对象的构造函数（即`__proto__`或`Object.getPrototypeOf()`）才是与`prototype`关联的。当你尝试访问一个对象的`prototype`时，实际上是在查找该对象的构造函数的`prototype`。例如： ```javascript let obj = {}; console.log(obj.__proto__); // 这将返回obj的构造函数Object的prototype ``` `__proto__`属性（非标准，但在许多环境中可用）和`Object.getPrototypeOf()`方法允许我们访问对象的原型链，而不是直接修改它。 总结一下，`prototype`是函数的属性，用于实现对象的继承和原型链。只有函数才能拥有`prototype`，并且对象的继承行为实际上是通过其构造函数的`prototype`来实现的。理解这一点对于深入学习JavaScript的面向对象编程至关重要。