码迷,mamicode.com
首页 > 其他好文 > 详细

ES6之class

时间:2017-02-03 14:36:12      阅读:194      评论:0      收藏:0      [点我收藏+]

标签:概念   blog   str   style   使用   poi   继承   函数定义   string   

ES6之class

  es6中的class是一个基于prototype继承的语法糖,它提供了更接近传统语言的写法,引入了class(类)这个概念作为对象的模版。通过class关键字可以定义类,但是通过class做的工作,es5也可以做到,只是通过class,可以使我们的工作更加方便。

  

第一部分:class定义

  class实际上是一种特殊的函数,就像我们可以通过函数表达式和函数声明来定义函数一样,class也有这两种定义方式。

  1.class声明

  只需使用class关键字,并在其后加上class名称即可,如:

class Polygon{

  constructor(width,height){

    this.width=width;

    this.height=height;

  }

}

   

   注意:普通的函数声明的特点在于:函数声明提升。但是class的函数声明没有函数声明提升,这一点要格外注意。

  

  2.class表达式

   class表达式可以是匿名的,也可以不是。

  不匿名:

  

var Polygon = class Polygon{

  constructor(width,height){

    this.width=width;

    this.height=height;

  }

};

   

  匿名:

  

var Polygon = class{

  constructor(width,height){

    this.width=width;

    this.height=height;

  }

}; 

  同样的,函数表达式也没有提升的效果

 

 

第二部分:class主体和方法

  class的主体部分使用{}括起来的,我们可以在其中定义class成员。比如方法和constructor。且他们都是在严格模式下运行的。

  constructor是为了创建和初始化一个有class产生的对象的,在class中只能有一个class方法, 并且在construtor中可以使用super关键字调用父类的constructor

  原型方法:

class Polygon {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
  
  get area() {
    return this.calcArea();
  }

  calcArea() {
    return this.height * this.width;
  }
}

const square = new Polygon(10, 10);

console.log(square.area);

 

  我们可以看到,在这个类中不仅有constructor方法,还有其他两个方法。

  值得注意的是:在定义“类”方法时,前面不需要加function关键字,直接把函数定义进去就可以了,且方法之间不需要加逗号分隔,否则会报错。

   

  重点:

  ES6中的类完全可以看作构造函数的另一种写法:

 class Polygon {

  //...  

}

  typeof Point //“function”

  Point === Point.prototype.constructor // true

 

   也就是说,对于下面的这个类:

class Polygon {
  constructor(){

     // ...

      }

     toString(){

  //...

  }

  toValue(){

  //...

  }

}

   使用es5来写可以写成这样:

  Polygon.prototype = {

    constructor(){},

    toString(){},

    toValue(){}

  }

   

  也就是就说,在类的实例上调用方法,实际上就是调用原型上的方法。

  class B {}

  let b = new B{};

  b.constructor === B.prototype.constructor //true

   即b是B类的实例,它的constructor方法就是B类原型的constructor方法。

  

  

 

 第三部分:实例对象

  生成实例对象的方法和ES5完全相同,使用new命令即可。如:

  var polygon = new Polygon();

   

  值得注意的是:实例的属性除非显示定义在其本身(即this对象)上,否则都是定义在原型上的。

  与ES5一样,类的所有实例共享一个原型对象。

  

 

 

 

  

ES6之class

标签:概念   blog   str   style   使用   poi   继承   函数定义   string   

原文地址:http://www.cnblogs.com/zhuzhenwei918/p/6362597.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!