前端提高篇(127):es6类的继承

es5继承

es5要继承，是这样的：

function Animal(name){this.name = name;this.thirsty = 100;this.food = [];
}
Animal.prototype.drink = function(){this.thirsty -= 10;return this;
}
Animal.prototype.eat = function(value){this.food.push(value);return this;
}function Dog(name, age){Animal.call(this, name); // 继承Animalthis.age = age;
}
// Dog.prototype = Animal.prototype; //Dog与Animal的原型指向相同，Dog和Animal对象的原型就一样了
Dog.prototype = Object.create(Animal.prototype);//Dog对象的原型是一个空对象，Dog原型的原型是Animal
Dog.prototype.constructor = Dog;
Dog.prototype.bark = function(){console.log(`我是${this.name}`);
}let lili = new Dog("lili", 2);

方法的使用：

查看原型：

es6继承

es6中引入了关键字：extends和super，仿类结构，方便地继承
可以继承父类的方法，也可以有自己的方法

class Animal {constructor(name){this.name = name;this.thirsty = 100;this.food = [];}drink(){this.thirsty -= 10;return this;}eat(item){this.food.push(item);return this;}
}
class Dog extends Animal {constructor(name, age){super(name);this.age = age;// 必须super，super之后子类才能使用this}bark(){console.log(`我是${this.name}`);}
}let lili = new Dog("lili", 2);

效果一致：

静态方法的继承

父类有的静态方法，子类也有
给父类Animal添加一个静态方法，用关键字static，子类不动

效果：父类Animal和子类Dog均可以使用该静态方法(静态方法直接由类调用，对象不可调用)

继承内置构造函数

class movieArr extends Array {constructor(name, ...movies){super(...movies); // 相当于new Array(...movies)this.name = name;}add(item){this.push(item);}//由于继承了Array，所以可以直接使用this.push添加数组topScore(limit){return this.sort( (a, b) => a.score > b.score ? -1 : 1 ).slice(0,limit);}// 评分从高到低排序，由用户指定要top几位
}let movies = new movieArr("我喜欢的动漫",{"name":"斗罗大陆",score:9.3},{"name":"斗破苍穹",score:9.1},{"name":"狐妖小红娘",score:9.6},{"name":"吞噬星空",score:8.7},
); //评分仅为当前数据

效果：对象内容一项项地添加到数组里
排序是按评分从高到低排序

前端提高篇(127):es6类的继承相关推荐

从babel实现es6类的继承来深入理解js的原型及继承
先聊个5毛钱的背景吧自从有了babel这一个利器之后,es6现在已经被广泛的使用.JavaScript 类实质上是 JavaScript 现有的基于原型的继承的语法糖.类语法不会为JavaScrip ...
Java提高篇 —— Java三大特性之继承
一.前言在<Think in java>中有这样一句话:复用代码是Java众多引人注目的功能之一.但要想成为极具革命性的语言,仅仅能够复制代码并对加以改变是不够的,它还必须能够做更多的事 ...
前端提高篇（十一）JS进阶8函数参数及arguments
形参与实参基础点可以看这篇文章获取形参个数:函数名.length function add(a,b,c,d,e){console.log('形参个数:' + add.length);} 运行效果: ...
前端提高篇(六十七)：HTML进阶8：canvas画布基本知识（二）绘制图形、曲线，设置图形样式，渐变
绘制图形绘制矩形 1.先创建矩形,再描边: canvas {border: 1px solid #000;width: 200px;height: 200px; } <canvas id=&q ...
前端提高篇（五十四）练习7：animation动画练习
效果:练习6的过渡效果基础上,对hover时描述的出现加一些动画效果,识别鼠标进出的方向,描述文字跟着鼠标的方向出现或消失问题1:判断鼠标进出的方向 e.offsetX和e.offsetY用于获取相 ...
前端提高篇（五十七）练习9：3d立方体旋转
6个面上标有数字1-6,数字和立方体各面的对应关系是: 前1 上2 后3 下4 左5 右6 .wrapper {perspective: 600px; } .box {transform-style: ...
前端提高篇(八十六)：jQuery的class属性操作addClass()与removeClass()、hasClass()、toggleClass()
1.addClass()与removeClass()基本使用 addClass:添加class:removeClass:移除class,返回this对象,支持链式操作 $('div').addClas ...
前端提高篇(116):简单了解postMessage通信
1.背景还是跨域问题,之前提到JSONP时,提到了src不受跨域影响的特性,可以来实现跨域获取不同源的资源当时主要用了script的src来做JSONP的案例这次对iframe举例,来了解pos ...
前端提高篇（101）：jQuery高级方法：extend使用
$.extend()作用: 1.用于将一个或多个对象的内容合并到目标对象 2.为全局对象jQuery添加新的函数参数: 合并对象的基本使用 //创建两个对象 var people1 = {ccy:{ ...