js的传统生成一个类的方法,需要定义一个构造函数,然后通过new的方式生成。
function Cat() { this.name = 'kitty'; this.color = 'yellow'; } var cat = new Cat();
js中只有对象,没有类。这样的写法和传统面向对象语言差异很大,很容易让新手感到困惑。
一、定义类
ES6添加了类,作为对象的模板。通过class来定义一个类:
//定义类 class Cat { constructor() { this.name = 'kitty'; this.color = 'yellow'; } //不需要加分号隔开,否则会报错,而且不用加上function关键字 getNames() { console.log('name:' + this.name); } } //使用new操作符得到一个实力对象 let cat = new Cat()
其实ES6的类,完全可以看作构造函数的另一种写法。
class Cat { //... } typeof Cat // "function" Cat === Cat.prototype.constructor // true //类的数据类型就是函数,类本身就只想构造函数
而且构造函数的prototype属性,在ES6的“类”上面继续存在。事实上,类的所有方法都定义在类的prototype属性上面:
class Cat { constructor () { //... } like () { //... } eat(){ //... } } //等同于 Cat.prototype = { constructor () {}, like () {}, eat () {} } let miao = new Cat() miao.constructor === Cat.prototype.constructor // true
二、严格模式
类和模块的内部,默认就是严格模式,所以不需要使用use strict指定运行模式。只要你的代码写在类或模块之中,就只有严格模式可用。
考虑到未来所有的代码,其实都是运行在模块之中,所以 ES6 实际上把整个语言升级到了严格模式。
三、constructor 方法
constructor方法是类的默认方法,通过new命令生成对象实例时,自动调用该方法。一个类必须有constructor方法,如果没有显式定义,一个空的constructor方法会被默认添加。
四、类的实例对象
用new命令生成类的实例对象
class Cat { //... } var cat = Cat ( 'kitty' , 'blue');//报错 var cat = new Cat ( 'kitty' , 'blue'); //正确
实例的属性定义在原型上
//定义类 class Cat { constructor() { this.name = 'kitty'; this.color = 'yellow'; } getNames() { console.log('name:' + this.name); } } //使用new操作符得到一个实例对象 let cat = new Cat() cat.getNames() // name:kitty cat.hasOwnProperty('name')//true cat.hasOwnProperty('getNames')//false cat.__proto__.hasOwnProperty('getNames')//true
和ES5一样,类的所有实例共享一个原型对象
let cat1 = new Cat(); let cat2 = new Cat(); cat1.__proto__ === cat2.__proto__
五、Class 表达式
let dogClass = class Dog { getClassName() { return Dog.name; } } let dog = new dogClass(); dog.getClassName() // Dog
不存在变量提升
定义类不存在变量提升,只能先定义类后使用,跟函数声明是有区别的。
//-----函数声明------- //定义前可以先使用,因为函数声明提升的缘故,调用合法。 func(); function func(){} //-----定义类--------------- new Cat(); //报错,Cat is not defined class Cat{}
六、this的指向
类的方法内部如果如果含有this,它默认指向类的实例。但是,必须非常小心,如果单独使用,有可能会报错。
class Cat { eatFish ( kind = 'fish'){ this.print (`Hello ${fish}`); } print(str){ console.log(str) } } let cat = new Cat(); const { eatFish } = cat; eatFish;// TypeError: Cannot read property 'print' of undefined
上面代码中,eatFish方法中的this, 默认指向Cat类的实例。但是,如果将这个方法提取出来单独使用,this会指向该方法运行时所在的环境,因为找不到print() 方法而导致错误。
所以,可以在构造方法中绑定this,这样就不会找不到print方法了。
class Cat { constructor () { this.eatFish = this.eatFish.bind(this); } //... }
或者使用箭头函数
class Cat { constructor () { this.eatFish = (kind = 'fish') => { this.print(`Hello ${name}`) } } }
七、extends继承
使用extends 关键字实现类之间的继承。这比在ES5中使用继承要方便很多。
//定义类父类 class Parent { constructor(name,age){ this.name = name; this.age = age; } speakSometing(){ console.log("I can speek chinese"); } } //定义子类,继承父类 class Child extends Parent { coding(){ console.log("coding javascript"); } } var c = new Child(); //可以调用父类的方法 c.speakSometing(); // I can speek chinese
如果子类中有constructor构造函数,则必须使用调用super。
//定义父类 class Parent { constructor(name,age){ this.name = name; this.age = age; } speakSometing(){ console.log("I can speek chinese"); } } //定义子类,继承父类 class Child extends Parent { constructor(name,age){ //不调super(),则会报错 this is not defined //必须调用super super(name,age); } coding(){ console.log("coding javascript"); } } var c = new Child("job",30); //可以调用父类的方法 c.speakSometing(); // I can speek chinese
子类必须在constructor方法中调用super方法,否则新建实例时会报错(this is not defined)。这是因为子类没有自己的this对象,而是继承父类的this对象,然后对其进行加工。如果不调用super方法,子类就得不到this对象。