prototype 和 __proto__ 区别

本文深入探讨了JavaScript中prototype与__proto__属性的作用及其实例间的关联,通过具体示例解释了构造函数如何通过prototype属性为实例添加方法,以及实例如何通过__proto__属性访问这些方法。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

prototype是构造函数的属性

__proto__是每个实例都有的属性,可以访问[[prototype]] 属性。

实例的__proto__与其构造函数的prototype指向的是同一个对象。

function Student(name) {
    this.name = name;
}
Student.prototype.setAge = function(){
    this.age=20;
}
let Jack = new Student('jack');
console.log(Jack.__proto__);
//console.log(Object.getPrototypeOf(Jack));;
console.log(Student.prototype);
console.log(Jack.__proto__ === Student.prototype);//tru
### JavaScript 中 `prototype` `__proto__` 的区别 #### 定义作用范围 `prototype` 是函数对象独有的属性,用于定义该函数作为构造器创建的对象实例所继承的方法属性。当通过构造函数使用 `new` 关键字创建新对象时,这些对象会自动获得访问其构造函数的 `prototype` 属性中定义的所有方法属性的能力[^3]。 ```javascript function Animal(type) { this.type = type; } Animal.prototype.speak = function() { console.log(`The ${this.type} speaks.`); }; const dog = new Animal('dog'); dog.speak(); // 输出 "The dog speaks." ``` 相反,`__proto__` 并不是特定于任何类型的对象;几乎所有的对象都拥有此内部链接指向它们各自的原型对象。对于由构造函数产生的对象而言,`__proto__` 默认指向构造函数的 `prototype` 属性对应的对象。这使得对象能够沿着这条链向上查找未在其自身上找到的属性或方法[^4]。 ```javascript console.log(dog.__proto__ === Animal.prototype); // true ``` #### 创建方式的不同影响 由于 ES6 引入了类的概念,在现代浏览器环境下可以更直观地看到两者之间的关系: - 类声明中的静态成员会被添加到类自身的 `prototype` 上; - 实例化后的对象则持有对其构造器 `prototype` 的引用,即 `__proto__` 指向的地方。 ```javascript class Vehicle { constructor(wheels) { this.wheels = wheels; } move() { console.log(`${this.wheels}-wheeled vehicle moving`); } } // 静态方法被挂载到了Vehicle.prototype上 console.log(Vehicle.prototype.move); let bike = new Vehicle(2); // 自动设置bike.__proto__ -> Vehicle.prototype console.log(bike.__proto__.move === Vehicle.prototype.move); // true ``` 值得注意的是,尽管可以通过操作 `__proto__` 来改变现有对象的行为模式,但这通常被认为是不推荐的做法,因为它可能导致性能下降以及难以调试的问题。相比之下,利用好 `prototype` 可以为开发者提供一种更加优雅的方式来扩展功能而不破坏原有结构[^1]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值