关于js原型链 的一些小知识

本文深入解析JavaScript中的七种继承方式,包括原型链继承、借用构造函数、组合继承、原型式继承、寄生式继承和寄生组合继承。每种方式都有其独特之处,适用于不同的场景。

             1.引用类型的原型会被所有实例共享。再通过原型实现继承时,原型会变成另一个类型的实例,所以原先的实例属性也就变成了现在的原型属性。

             2.在创建子类型的实例时,不能向超类的构造函数中传递参数

             3.借用构造函数。apply()和call()方法。思想是在子类构造函数的内部调用超类型的构造函数。

             4.组合继承:将原型链和借用构造函数的技术结合到一起使用。思想是使用原型链实现对原型属性和方法的继承,通过借用构造函数来实现对实例属性的继承。

             5.原型式继承:可以在不必预先定义构造函数的情况先进行,本质是执行对给定对象的潜复制,复制得到的副本也可以进一步得到改造。

             6.寄生式继承:与原型式继承非常相似,是基于某个对象或某些信息创建一个对象,然后增强对象,然后返回对象。

             7.寄生组合继承,集寄生式继承和组合式继承的优点于一身,是实现基于类型继承的最有效的方式。

 

JavaScript 中的原型链是一个非常重要的概念,理解它可以让你更好地掌握 JavaScript 的工作原理和对象之间的关系。接下来我将为你详细解释什么是原型链以及它是如何工作的。 ### 什么是原型链? 每个 JavaScript 对象都有一个内部属性称为 `[[Prototype]]`(也叫做“__proto__”,注意这不是标准属性),这个属性指向另一个对象——即它的“原型”。而该原型对象本身也有自己的原型...以此类推形成了一条链条结构,这条链条就是所谓的**原型链**。当访问对象的某个属性时,如果找不到的话就会沿着原型链向上查找,直到找到对应的属性或到达最顶端的对象 `null`(因为 `Object.prototype.__proto__ === null`)。因此可以说,所有函数实例都共享同一个构造函数所关联的原型对象。 #### 构造函数与 prototype 在 JavaScript 中,当你定义一个新的函数时,默认会给它添加一个名为 `prototype` 的公共属性,并且这个属性会自动成为一个新对象(我们称作原型对象)。如果你使用这个函数去创建实例化对象 (`new`) ,那么每一个生成的新对象都会有一个隐含指针指向原始函数的 `prototype` 属性: ```javascript function Person(name) { this.name = name; } // 这里给Person设置了prototype属性 Person.prototype.sayHello = function() { console.log(`Hi, I'm ${this.name}`); }; let p1 = new Person('Alice'); console.log(p1 instanceof Person); // true p1.sayHello(); // Hi, I'm Alice ``` 在这个例子中,`p1` 实际上是通过其内部链接到 `Person.prototype` 来获取方法 `sayHello()` 的引用。这也说明为什么我们可以直接修改原型上的成员而不必担心会影响已经存在的对象;同样地,只要更改了某一处原型内的内容,所有的子节点都能立即看到更新后的结果。 ### 原型链的实际应用 利用好原型机制能够带来很多好处,比如减少内存占用(只需要存储一次共有功能)、方便拓展已有库等。此外还有一些常见的模式如寄生组合式继承、工厂模式等等都可以借助原型完成高效的代码复用。然而值得注意的是滥用这种特性也可能导致性能问题甚至难以调试的问题发生,所以在日常编码实践中需要谨慎对待。 --- ### 示例代码展示原型链的关系: 假设我们现在有两个自定义类型 A 和 B,其中 B 继承自 A: ```javascript function Animal(type){ this.type = type; } Animal.prototype.eat = function(){ return `${this.type} is eating.`; }; function Dog(name){ Animal.apply(this, arguments); this.name = name; } Dog.prototype = Object.create(Animal.prototype); // 创建新的原型对象 Dog.prototype.constructor = Dog; // 恢复 constructor 引用 Dog.prototype.bark = function(){ // 添加特有行为 return `${this.name}: Woof!`; }; const myDog = new Dog("Max"); console.log(myDog.eat()); // 输出 "is eating." console.log(myDog.bark()); // 输出 "Max: Woof!" ``` 这里可以看到我们不仅可以在 `myDog` 上调用来自 `Dog.prototype` 的 `.bark()` 方法,也可以顺利调用了来源于更高级别原型的方法 `.eat()` 。这就是典型的原型链工作机制! --- 为了帮助你进一步理解和探索关于 JavaScript 原型链知识,请考虑以下几个相关话题进行学习:
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值