es6 class extends
function MathHandle(x, y){
this.x = x;
this.y = y;
}
MathHandle.prototype.add = function () {
return this.x + this.y;
}
var m = new MathHandle(1,2);
console.log(m.add());
第一块是构造函数,第二块是构造函数的一个拓展,下面是将构造函数实例化,最后调用add方法,因为这个原型扩展之后,每个实例都会有这个方法。
class MathHandle{
constructor(x,y){
this.x = x;
this.y = y;
}
add() {
return this.x + this.y;
}
}
const m = new MathHandle(1,2);
console.log(m.add());
constructor是一个构造器,每个class都有一个constructor。es6中,用class来专门做构造函数的语法其实是有点模拟java,c#的语法,让初学者或后台熟悉一点。下面的add相当于在原型中定义add方法。这里定义class的方法跟js构造函数相比,更加简单。constructor在new的时候立马会执行。
typeof MathHandle // "function"
MathHandle === MathHandle.prototype.constructor // true
m.__proto__ === MathHandle.prototype // true
js的原理知识,能对上class的原理知识,一摸一样
// 动物
function Animal() {
this.eat = function(){
console.log('animal eat')
}
}
// 狗
function Dog() {
this.bark = function () {
console.log('dog bark');
}
}
// 绑定原型,实现继承
Dog.prototype = new Animal();
// 哈士奇
var hashiqi = new Dog();
继承就是抽象到具象的过程,从高级到低级的一个关系,首先有一个animal,动物是抽象的,然后是狗,再往下是哈士奇,哈士奇是一种狗。每个animal都有eat,动物都要吃。dog有个bark,叫。这两个构造函数比较简单,就是两个函数,里面有个属性。重点是我们把Dog的显示原型赋值成new Animal()。new Animal是出实话一个animal的实例。这样就实现了继承。再去new Dog(),肯定有bark的方法,执行了赋值之后,也有了eat的方法。
class Animal{
constructor(name){
this.name = name;
}
eat() {
console.log(this.name + ' eat')
}
}
class Dog extends Animal {
constructor(name) {
super(name);
this.name = name;
}
bark() {
console.log(this.name + ' bark');
}
}
const dog = new Dog('哈士奇');
dog.bark();
dog.eat();
Dog.prototype = new Animal() 相当于 class Dog extends Animal。后面跟java非常相似。这样已经继承了原型方法,不用再写.prototype这种。。super(name),也就是说在执行Dog的构造器的时候,我先把Animal的构造器执行一遍。Animal这个构造函数对应 class Animal。Dog这个构造函数,对应 class Dog。
es6 class extends的更多相关文章
- React入门 (1)—使用指南(包括ES5和ES6对比)
前言 本篇会简明扼要的介绍一下React的使用方法.代码会用JSX+ES5和JSX+ES6两种方式实现. React简介 React来自Facebook,于2013年开源.至今不断修改完善,现在已经到 ...
- JavaScript面向对象轻松入门之继承(demo by ES5、ES6)
继承是面向对象很重要的一个概念,分为接口继承和实现继承,接口继承即为继承某个对象的方法,实现继承即为继承某个对象的属性.JavvaScript通过原型链来实现接口继承.call()或apply()来实 ...
- ES6躬行记(21)——类的继承
ES6的继承依然是基于原型的继承,但语法更为简洁清晰.通过一个extends关键字,就能描述两个类之间的继承关系(如下代码所示),在此关键字之前的Man是子类(即派生类),而在其之后的People是父 ...
- es6入门总结
let和const命令 let命令 循环体的let变量只对花括号作用域可见,花括号外不可见 循环体的语句部分是一个父作用域,而循环体内部是一个单独的子作用域 let声明的变量不存在变量提升,未声明的使 ...
- 粗看ES6之面向对象写法
标签: es6 在es6以前,js没有类的概念,虽然有构造函数原型的方式用来做面向对向开发,但是对于书法并不是十分友好,而且对于继承实现也不是十分友好. es6引入class constructor ...
- ES6十大常用特性
. Default Parameters(默认参数) in ES6 2. Arrow Functions (箭头函数)in ES6 3. Block-Scoped Constructs ...
- Rollup 配置 es6 环境
前 为了可以使用新型的语法,顺便在兼容下老的浏览器,所以需要自己搭建个环境,目前我个人推崇使用 rollup,主要喜欢它的 tree-shake,打包出来的代码真的很简洁. 配置 rollup.con ...
- 一篇文章理解JS继承——原型链/构造函数/组合/原型式/寄生式/寄生组合/Class extends
说实在话,以前我只需要知道"寄生组合继承"是最好的,有个祖传代码模版用就行.最近因为一些事情,几个星期以来一直心心念念想整理出来.本文以<JavaScript高级程序设计&g ...
- es5继承和es6类和继承
es6新增关键字class,代表类,其实相当于代替了es5的构造函数 通过构造函数可以创建一个对象实例,那么通过class也可以创建一个对象实列 /* es5 创建一个person 构造函数 */ f ...
随机推荐
- html5 横向滑动导航栏
前提 需要引入: <script src="../assets/js/iscroll.js"></script> v4.2版本 ####html <! ...
- CSS网站框架及样式命名规范
CSS网站框架 复位:reset.css 基础:base.css 或 basic.css (字体大小.颜色.背景.行高.列表样式.按钮样式.表格样式等等) 布局:layout.css (非结构的布局) ...
- bootstrap-table和bootstrap-switch
{% load staticfiles %} <!DOCTYPE html> <html lang="en"> <head> <meta ...
- 微信小程序 与后台交互----传递和回传时间
wxml代码 <!--index.wxml--> <view class="container"> <view class="section ...
- Ubuntu 18.04 使用标准Ubuntu 仓库进行自动化安装NVIDIA驱动
首先,检测你的NVIDIA显卡型号和推荐的驱动程序的模型.在命令行中输入如下命令: $ ubuntu-drivers devices == /sys/devices/pci0000:/::::00.0 ...
- PAT(B) 1033 旧键盘打字(C) 字符
题目链接:1033 旧键盘打字 (20 point(s)) 题目描述 旧键盘上坏了几个键,于是在敲一段文字的时候,对应的字符就不会出现.现在给出应该输入的一段文字.以及坏掉的那些键,打出的结果文字会是 ...
- WUSTOJ 1341: Lake and Island(Java)
题目链接:1341: Lake and Island Description 北园孩子的专属福利来啦~学校从北区宿舍到湖心岛修建了一条通道让北园的同学们可以上去一(kuang)同(xiu)玩(en)耍 ...
- WUSTOJ 1298: 操作格子(Java)
题目链接:
- vue+iview+mock模拟数据遍历
下载安装iview, 进入根目录,用命令行启动 npm install npm run build npm run dev 安装mock.js和axios npm install mock.js -s ...
- 正整数序列 Help the needed for Dexter ,UVa 11384
题目描述 Description 给定正整数n,你的任务是用最少的操作次数把序列1, 2, …, n中的所有数都变成0.每次操作可从序列中选择一个或多个整数,同时减去一个相同的正整数.比如,1,2,3 ...