淘宝客网站如何做,网站设计公司营销crm系统,做空比特币网站,wordpress 设置不生效JS继承目录 一、原型链继承2、构造函数继承3、组合继承4、寄生组合继承5、ES6继承 js有几种经典的继承方式。比如
原型链继承、
构造函数继承、
组合继承、
寄生组合继承、
ES6继承。让我们一一分析并实现。同时了解每种方案的优缺点。 其实js的继承本质上是通过原型链机制… JS继承目录 一、原型链继承2、构造函数继承3、组合继承4、寄生组合继承5、ES6继承 js有几种经典的继承方式。比如
原型链继承、
构造函数继承、
组合继承、
寄生组合继承、
ES6继承。让我们一一分析并实现。同时了解每种方案的优缺点。 其实js的继承本质上是通过原型链机制实现的扩展。不管是哪种继承方式都是通过操作父类原型链和子类原型链形成关联关系实现的。只是不同实现中需要考虑不同的问题。在实际项目开发中建议尽可能使用ES6的class extends实现。 其他实现方式主要是理解背后的原理和思想。
一、原型链继承
// 定义父类
function Parent() {this.name parent;
}// 在父类的原型上定义方法
Parent.prototype.getName function() {return this.name;
}// 定义子类
function Child() {this.name child;
}// 子类继承父类这里是关键实现原型链继承
Child.prototype new Parent();// 实例化子类
var child1 new Child();console.log(child1.getName()); // 输出 child缺陷 原型链继承的一个主要问题是包含引用类型值的原型属性会被所有实例共享。 换而言之如果一个实例改变了该属性那么其他实例的该属性也会被改变
比如以下代码就会出问题我明明只想修改了 child1 的arr我不想修改 child2 的 arr。但是实际结果却是 child2 的 arr 也被修改了。 // 定义父类function Parent() {this.arr [1, 2, 3];}// 定义子类function Child() {}// 子类继承父类这里是关键实现原型链继承Child.prototype new Parent();// 实例化子类var child1 new Child();var child2 new Child();child1.arr.push(4);console.log(child1.arr); console.log(child2.arr);上述问题能否避免呢答案是可以的。我们可以通过构造函数继承来避免上述问题。
2、构造函数继承
构造函数继承通过使用 call 或 apply 方法我们可以在子类型构造函数中执行父类型构造函数从而实现继承。比如以下例子child1 和 child2 都继承了 Parent 的 sayHello() 方法。
这种继承方式的好处是原型属性不会被共享所以不会出现上述问题。我们可以尝试console.log() child1 和 child2 的 sayHello方法 通过 判断得知他们并不是同一个方法。换而言之 修改其中任何一个 sayHello 不会影响另一个 sayHello。 // 父类function Parent() {this.sayHello function () {console.log(Hello);};}Parent.prototype.a 我是父类prototype上的属性;// 子类function Child() {Parent.call(this);}// 创建两个 Child 实例var child1 new Child();var child2 new Child();console.log(child1.sayHello child2.sayHello); // 输出 false缺陷 那么这种方式的缺点是什么呢它不能继承父类 prototype 上的属性。比如以下例子父类的prototype 上有个 a 属性它是一个字符串。按理来说child 类继承了 parent 类因此 child 实例化的对象也得有 a 属性但 console.log(child1.a) 之后可以看出child1.a 是 undefined 。
为了解决以上缺点我们引入了组合继承。
3、组合继承
组合继承可以理解为原型链继承 构造函数继承。 可以看以下例子 // 父类function Parent() {this.sayHello function () {console.log(Hello);};}Parent.prototype.a 我是父类prototype上的属性; // 子类function Child() {Parent.call(this);}Child.prototype new Parent();var child1 new Child();实际上只是在构造函数继承的基础上加了一行代码Child.prototype new Parent();
这就解决了构造函数继承的缺点。 构造函数继承不能继承父类 prototype 上的属性。但是加上这行代码之后每当我们在 child 对象上找不到属性就会去 Child.prototype 上去寻找而 Child.prototype 是一个 Parent 对象如果 Parent 对象上还找不到就会去 Parent.prototype 上去寻找。如此以来组合继承就能继承父类 prototype 上的属性。
但是组合继承有没有缺点呢它也有缺点调用了 2 次 Parent()。 它在 child 的 prototype 上添加了父类的属性和方法。
很多读者可能读不懂上面这句话我们通过一个具体的例子来说明。child1 是一个子类对象这个对象本身有 sayHello 方法。而 Child.prototype 上也有一个 sayHello 方法。
为什么child1本身有 sayHello 方法因为在 Child() 构造函数内部我们调用了一次 Parent(), 这就给 child1对象添加了 sayHello 方法。
而为什么 Child.prototype 上也有一个 sayHello 方法因为 Child.prototype new Parent(); 细心的你·可能发现了我们每次调用 child1.sayHello() 的时候永远是调用的child1本身有 sayHello 方法。换句话说Child.prototype 上 sayHello 方法我们根本不需要。
那么有没有办法解决这个问题呢于是我们引入了寄生组合继承。
4、寄生组合继承 // 父类function Parent() {this.sayHello function () {console.log(Hello);};}Parent.prototype.a 我是父类prototype上的属性;// 子类function Child() {Parent.call(this);}// 创建一个没有实例方法的父类实例作为子类的原型Child.prototype Object.create(Parent.prototype);// 修复构造函数的指向Child.prototype.constructor Child;var child1 new Child();我们发现只需要在组合继承的基础上把 Child.prototype new Parent(); 替换为 Child.prototype Object.create(Parent.prototype);
这两者有什么区别呢 Object.create(Parent.prototype) 创造了一个空对象这个空对象的__proto__ 是 Parent.prototype 。所以它继承了 Parent 原型链上的属性和方法。由于我们删除了Child.prototype new Parent(); 我们不再调用 Parent() 构造函数因此 Child.prototype 不再包含 Parent 的属性和方法。所以第三小节部分提到的问题就解决了Child.prototype 上不再有 sayHello 方法。
那么寄生组合继承有没有缺点呢当然也有缺点。看以下例子: // 父类function Parent() {this.sayHello function () {console.log(Hello);};}Parent.prototype.a 我是父类prototype上的属性;// 子类function Child() {Parent.call(this);}Child.prototype.childFunction () {console.log(我是child方法);};// 创建一个没有实例方法的父类实例作为子类的原型Child.prototype Object.create(Parent.prototype);// 修复构造函数的指向Child.prototype.constructor Child;var child1 new Child();child1.childFunction();我们在 Child.prototype 上添加了 childFunction 。所有通过Child() 创建的实例对象都应该有该childFunction() 方法。但是当我们调用 child1.childFunction() 的时候却报错这是为什么呢因为 Child.prototype Object.create(Parent.prototype); 这一行代码使 Child.prototype 指向了一个新对象 原来对象上的属性和方法都会丢失。
所以寄生组合继承的缺点就是Child.prototype 的原始属性和方法会丢失。
5、ES6继承
ES6提供了class语法糖同时提供了extends用于实现类的继承。这也是项目开发中推荐使用的方式。
使用class继承很简单也很直观
class Parent {constructor() {this.name zzz}getName() {return this.name}
}class Child extends Parent {constructor() {// 这里很重要如果在this.topic z后面调用会导致this为undefined具体原因可以详细了解ES6的class相关内容这里不展开说明super()this.topic z}
}const child new Child()
child.getName() // zzz想通过图文教程学习可看JS继承
