原型链继承通过[[Prototype]]链接实现,子对象可访问父对象属性方法。使用Object.create()设置原型避免共享问题,constructor需手动修正。原型链顶端为Object.prototype,其[[Prototype]]为null。用hasOwnProperty()判断属性是否属于对象自身,防止原型链污染应避免修改内置原型,可用Object.create(null)或Object.freeze()。ES6 class底层仍基于原型链。
![js 原型链继承详解 - 探索对象间隐藏的 [[prototype]] 连接机制](https://www.chuangxiangniao.com/wp-content/themes/justnews/themer/assets/images/lazy.png)
JS 原型链继承是通过对象间的
[[Prototype]]
链接实现的,允许子类继承父类的属性和方法。理解原型链是掌握 JavaScript 面向对象编程的关键。
解决方案
JavaScript 中,每个对象都有一个内部属性
[[Prototype]]
,通常可以通过
__proto__
(非标准,但广泛使用)或
Object.getPrototypeOf()
访问。当我们试图访问一个对象的属性时,如果该对象本身没有这个属性,JavaScript 引擎会沿着
[[Prototype]]
链向上查找,直到找到该属性或到达原型链的顶端(
null
)。
原型链继承的核心在于设置构造函数的
prototype
属性。当我们使用
new
关键字创建一个对象时,新对象的
[[Prototype]]
会指向构造函数的
prototype
属性。通过修改构造函数的
prototype
,我们可以实现属性和方法的继承。
例如:
function Animal(name) { this.name = name;}Animal.prototype.sayHello = function() { console.log("Hello, I'm " + this.name);};function Dog(name, breed) { Animal.call(this, name); // 调用父类构造函数,继承属性 this.breed = breed;}// 设置 Dog 的原型为 Animal 的实例Dog.prototype = Object.create(Animal.prototype);Dog.prototype.constructor = Dog; // 修正 constructor 指向Dog.prototype.bark = function() { console.log("Woof!");};const myDog = new Dog("Buddy", "Golden Retriever");myDog.sayHello(); // 输出 "Hello, I'm Buddy" (继承自 Animal)myDog.bark(); // 输出 "Woof!" (Dog 自身的方法)console.log(myDog instanceof Animal); // trueconsole.log(myDog instanceof Dog); // true
这段代码首先定义了一个
Animal
构造函数,并为其
prototype
添加了一个
sayHello
方法。然后,定义了一个
Dog
构造函数,并在其中调用
Animal.call(this, name)
,这允许
Dog
实例继承
Animal
的
name
属性。
关键的一步是
Dog.prototype = Object.create(Animal.prototype)
。
Object.create()
创建了一个新对象,其
[[Prototype]]
指向
Animal.prototype
。这样,
Dog
的实例就可以访问
Animal
的
prototype
上的方法。
Dog.prototype.constructor = Dog
这一行也很重要。如果不修正
constructor
,
Dog.prototype.constructor
会指向
Animal
,这会造成混淆。
最后,
myDog
实例既是
Animal
的实例,也是
Dog
的实例,验证了继承关系。
为什么要使用
Object.create()
而不是直接
Dog.prototype = new Animal()
?
直接
Dog.prototype = new Animal()
会创建一个新的
Animal
实例作为
Dog.prototype
。这意味着
Dog
的所有实例都会共享
Animal
实例的属性,如果
Animal
构造函数中设置了某些属性,可能会导致意外的共享和修改。
Object.create(Animal.prototype)
创建了一个新对象,其
[[Prototype]]
指向
Animal.prototype
,但不会执行
Animal
构造函数,避免了这个问题。
原型链的顶端是什么?如何判断一个对象是否具有某个属性?
原型链的顶端是
Object.prototype
。
Object.prototype
的
[[Prototype]]
指向
null
。这意味着所有对象最终都继承自
Object.prototype
。
可以使用
hasOwnProperty()
方法来检查一个对象是否自身拥有某个属性,而不是从原型链上继承来的。例如:
const obj = { name: "Alice" };console.log(obj.hasOwnProperty("name")); // trueconsole.log(obj.hasOwnProperty("toString")); // false (继承自 Object.prototype)
hasOwnProperty()
返回
true
表示该属性是对象自身的属性,
false
表示该属性是从原型链上继承来的。
如何避免原型链污染?
原型链污染指的是通过修改
Object.prototype
或其他内置对象的
prototype
,影响所有基于这些原型创建的对象。这可能导致安全漏洞和不可预测的行为。
避免原型链污染的方法包括:
避免修改内置对象的
prototype
: 尽量不要直接修改
Object.prototype
、
Array.prototype
等内置对象的
prototype
。使用
Object.create(null)
创建对象:
Object.create(null)
创建一个没有原型的对象,可以防止从原型链上继承任何属性。使用
hasOwnProperty()
进行属性检查: 在访问对象的属性之前,使用
hasOwnProperty()
检查该属性是否是对象自身的属性,避免受到原型链污染的影响。使用
Object.freeze()
冻结对象:
Object.freeze()
可以冻结一个对象,防止其属性被修改或添加。
虽然原型链继承是 JavaScript 中实现继承的一种方式,但它也有一些局限性。随着 ES6 的引入,
class
关键字提供了一种更简洁和易于理解的语法来实现继承,但其底层仍然是基于原型链的。理解原型链对于深入理解 JavaScript 的面向对象编程至关重要。
以上就是JS 原型链继承详解 – 探索对象间隐藏的 [[Prototype]] 连接机制的详细内容,更多请关注创想鸟其它相关文章!
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1521302.html
微信扫一扫
支付宝扫一扫