JavaScript Prototype(原型)详解
在 JavaScript 中,原型(Prototype) 是理解对象、继承、构造函数的核心机制之一。原型让我们能够实现对象之间的继承,是 JavaScript 中面向对象编程的重要基础。
一、什么是 Prototype?
每个 JavaScript 函数在创建时,都会自动获得一个名为 prototype
的属性,它是一个对象。这个 prototype
对象包含了该函数构造出的所有实例共享的属性和方法。
简单理解:
1 2 3 4 5 6 7 8 9 10 11 |
function Person(name) { this.name = name; } Person.prototype.sayHello = function () { console.log("Hello, I am " + this.name); }; let p1 = new Person("Alice"); p1.sayHello(); // Hello, I am Alice |
sayHello
定义在Person.prototype
上;- 所有通过
new Person()
创建的对象都可以访问这个方法。
二、构造函数与原型的关系图示
1 2 3 4 5 6 |
Person → prototype → { sayHello: function() { ... } } ↑ [[Prototype]] ↑ p1 = new Person() |
也可以通过代码验证:
1 2 |
console.log(p1.__proto__ === Person.prototype); // true |
三、prototype 和 proto 的区别
名称 | 说明 |
---|---|
prototype |
函数对象的属性,指向将被用作原型的对象 |
__proto__ |
实例对象的内部属性,指向其构造函数的 prototype |
1 2 3 4 5 6 |
function Animal() {} let a = new Animal(); console.log(Animal.prototype); // 原型对象 console.log(a.__proto__); // 指向 Animal.prototype |
四、原型链(Prototype Chain)
JavaScript 中对象的属性访问是通过原型链进行的:
- 首先查找对象自身;
- 如果找不到,就查找其
__proto__
(也就是构造函数的prototype
); - 一直向上查找,直到找到
Object.prototype
; - 如果仍未找到,返回
undefined
。
1 2 3 |
let obj = {}; console.log(obj.toString); // 来自 Object.prototype |
五、给所有对象添加方法
由于所有对象最终都会继承自 Object.prototype
,我们可以向其添加方法(不推荐,可能污染全局):
1 2 3 4 5 6 7 |
Object.prototype.sayHi = function () { console.log("Hi from Object"); }; let o = {}; o.sayHi(); // Hi from Object |
六、构造函数与原型继承
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
function Animal(name) { this.name = name; } Animal.prototype.speak = function () { console.log(this.name + " makes a noise"); }; function Dog(name) { Animal.call(this, name); // 继承属性 } Dog.prototype = Object.create(Animal.prototype); // 继承方法 Dog.prototype.constructor = Dog; let d = new Dog("Lucky"); d.speak(); // Lucky makes a noise |
七、ES6 中的 class 与原型的关系
1 2 3 4 5 6 7 8 9 10 11 12 13 |
class Person { constructor(name) { this.name = name; } sayHello() { console.log("Hello, " + this.name); } } let p = new Person("Tom"); p.sayHello(); |
实际上,sayHello
方法仍然是挂载在 Person.prototype
上的。
八、小结
原型知识点 | 描述 |
---|---|
每个函数都有 prototype 属性 |
用于定义实例共享的方法 |
每个对象都有 __proto__ 属性 |
指向构造函数的 prototype |
原型链 | 实现属性查找和继承 |
class 是语法糖 | 底层仍然基于 prototype |
除教程外,本网站大部分文章来自互联网,如果有内容冒犯到你,请联系我们删除!