您现在的位置是:首页 > 文章详情

JavaScript 类继承

日期:2019-04-23点击:305
  1. 和其他功能一样,ECMAScript 实现继承的方式不止一种。这是因为 JavaScript 中的继承机制并不是明确规定的,而是通过模仿实现的。这意味着所有的继承细节并非完全由解释程序处理。作为开发者,你有权决定最适用的继承方式。
  2. 创建的子类将继承超类的所有属性和方法,包括构造函数及方法的实现。记住,所有属性和方法都是公用的,因此子类可直接访问这些方法。子类还可添加超类中没有的新属性和方法,也可以覆盖超类的属性和方法。
  3. 继承的方式:
  • 对象冒充方式方式一

 /*被继承类*/ function Animal_1(name) { this.name = name; this.printName = function () { console.log(this.name); } } function Person_1(name,age) { this.method1 = Animal_1; this.method1(name); this.age = age; this.printAge = function () { console.log(this.age); } } var o1 = new Person_1("ysw",18); var o2 = new Animal_1("ysw"); console.log(o1); console.log(o2); console.log(o1 instanceof Animal_1); console.log(o1 instanceof Person_1); console.log(o2 instanceof Animal_1); console.log(o2 instanceof Person_1);
  • 对象冒充方式方式二:利用call方法和apply方法

 function Animal_2(name) { this.name = name; this.printName = function () { console.log(this.name); } } function Person_2(name,age) { Animal_2.call(this,name); // Animal_2.apply(this,new Array(name)); this.age = age; this.printAge = function () { console.log(this.age); } } o1 = new Person_2("ysw",18); o2 = new Animal_2("ysw"); console.log(o1); console.log(o2); console.log(o1 instanceof Animal_2); console.log(o1 instanceof Person_2); console.log(o2 instanceof Animal_2); console.log(o2 instanceof Person_2);
  • 原型链方式

 /*被继承类*/ function Animal_3() { } Animal_3.prototype.name = "ysw"; Animal_3.prototype.printName = function () { console.log(this.name); }; function Person_3() { } Person_3.prototype = new Animal_3(); Person_3.prototype.age = 18; Person_3.prototype.printAge = function () { console.log(this.age); }; o1 = new Person_3(); o2 = new Animal_3(); console.log(o1); console.log(o2); console.log(o1 instanceof Animal_3); console.log(o1 instanceof Person_3); console.log(o2 instanceof Animal_3); console.log(o2 instanceof Person_3);
  • 混合方式:结合对象冒充方式和原型链方式的优点,是ES6之前最常用的继承方式

 /*被继承类*/ function Animal_4(name) { this.name = name; } Animal_4.prototype.printName = function () { console.log(this.name); }; function Person_4(name,age) { Animal_4.call(this,name); this.age = age; } Person_4.prototype = new Animal_4(); Person_4.prototype.printAge = function () { console.log(this.age); }; o1 = new Person_4("晏沈威",22); o2 = new Animal_4("晏沈威"); console.log(o1); console.log(o2); console.log(o1 instanceof Animal_4); console.log(o1 instanceof Person_4); console.log(o2 instanceof Animal_4); console.log(o2 instanceof Person_4);
  • ES6语法 class extends继承

 /*被继承类*/ class Animal_5 { constructor(name){ this.name = name; } printName(){ console.log(this.name); } } class Person_5 extends Animal_5{ constructor(name,age){ super(name); this.age = age; } printAge() { console.log(this.age); }; } o1 = new Person_5("晏沈威",22); o2 = new Animal_5("晏沈威"); console.log(o1); console.log(o2); console.log(o1 instanceof Animal_5); console.log(o1 instanceof Person_5); console.log(o2 instanceof Animal_5); console.log(o2 instanceof Person_5);
原文链接:https://yq.aliyun.com/articles/699696
关注公众号

低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。

持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。

转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源。

文章评论

共有0条评论来说两句吧...

文章二维码

扫描即可查看该文章

点击排行

推荐阅读

最新文章