ES6系列_15之class类的使用
2018-12-08 17:57
555 查看
JS语言的传统方法是通过构造函数,定义并生成新对象,是一种基于原型的面向对象系统。在ES6中新增加了类的概念,可以使用 class 关键字声明一个类,之后以这个类来实例化对象。
1.先来看看es5与es6的写法:
(1)构造函数示例:
const Animal = function (name, age) { this.name= name; this.age = age; return this; }; Animal.prototype = { constructor: Animal, print: function () { console.log(this.name+ ' ' + this.age); } }; const panda= new Animal('熊猫', '3').print();
(2)使用ES6提供的class改写为:
class Animal { constructor(name,age){ this.name=name; this.age=age; return this; } print(){ console.log(this.name+''+this.age); } } const panda=new Animal('熊猫', '3'); panda.print()
2.现在来看看es6的类如何使用?
(1)类的声明
先声明一个最简单的Animal类,类里只有一个print方法,方法中打印出传递的参数。
class Animal{ print(val){ console.log(val); } }
(2)类的使用
我们已经声明了一个类,并在类里声明了print方法,现在要实例化类,并使用类中的方法。
class Animal{ print(val){ console.log(val); } } let p= new Animal(); p.print('熊猫');
输出结果为:熊猫。
(2.1)类的多方法声明
我们在上述基础上在声明一个eat方法。
class Animal{ print(val){ console.log(val); } eat(val){ console.log(this.print("熊猫"),"eat===>",val) } } let panda= new Animal(); panda.eat("竹子")
此时我们会发现输出的结果为:
也就是this.print("熊猫") 这句代码出现了undefined。这是为啥呢?
这是由于类中的print方法没有返回值造成的,我们给print方法返回值,代码如下:
class Animal{ print(val){ console.log(val); return val; } eat(val){ console.log(this.print("熊猫"),"eat===>",val) } } let panda= new Animal(); panda.eat("竹子")
此时的结果为:
这里需要注意的是两个方法中间不要写逗号了,还有这里的this指类本身,还有 使用return返回值。
(3) 类的传参
在类的参数传递中我们用constructor( )进行传参。传递参数后可以直接使用this.xxx进行调用。
例如一开始时我们改写的代码一样,现在再把该代码贴出如下:
class Animal { constructor(name,age){ this.name=name; this.age=age; return this; } print(){ console.log(this.name+''+this.age); } } const panda=new Animal('熊猫', '3'); panda.print()
使用constructor来约定了传递参数,然后在print方法中打印。
(4)class的继承
类的一大特点就是继承。ES6中也有继承,使用关键子extends。
例如,现在有一个动物,除了基本的姓名与年龄外,还有独特的爱好--唱歌,我们该怎么处理呢,这里用到了类的继承,代码如下:
class Bird extends Animal{ sing(val){ console.log("唱",val) } } let bird=new Bird("鹦鹉",3) bird.sing("国歌")
输出结果为:
未完,待续。。。。
相关文章推荐
- ES6 系列之 WeakMap的使用示例
- Azkaban的Web Server源码探究系列15:使用过程中几个需注意的配置&3.0中丢失的文件
- Angular 4入门教程系列:15:NG-ZORRO的使用方式
- ECMAScript 6 学习系列课程 (ES6 常用内置方法的使用)
- Struts1.x系列教程(15):使用DownloadAction类统计文件下载次数
- nw.js node-webkit系列(15)如何使用内部模块和第三方模块进行开发
- [Spring实战系列](15)使用Spring基于Java的配置
- ECMAScript 6 学习系列课程 (ES6 Modules的使用)
- mysql 开发基础系列15 索引的设计和使用
- 对STC15系列单片机EEPROM使用感受
- 安卓控件使用系列15:ImageView适屏和裁剪图片
- Android Api demo系列(15) (App>Fragment>FragmentAlertDialog高级使用)
- 使用 es6 class类创建对象 在其他页面 用vue引用报错 is not a constructor
- ECMAScript 6 学习系列课程 (ES6 默认值和解构赋值的使用)
- ECMAScript 6 学习系列课程 (ES6 Symbol语法的使用)
- ECMAScript 6 学习系列课程 (ES6 Generator 函数的使用)
- Selenium-webdriver系列教程(15)————使用已存在的profile启动firefox
- Struts1.x系列教程(15):使用DownloadAction类统计文件下载次数
- [Gradle中文教程系列]-跟我学Gradle-15:团队协作 - 使用Gradle Wrapper来统一构建版本
- 在react中如何使用tab组件-小白系列 es6