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("国歌")
输出结果为:
未完,待续。。。。