黑马程序员技术交流社区

标题: 【成都校区】 -- ES6中的类使用 [打印本页]

作者: 小刀葛小伦 时间: 2020-1-2 17:42
标题: 【成都校区】 -- ES6中的类使用
类是一个模板，它描述一类对象的行为和状态。在ES5中简化为通过构造函数来描述。ES6恢复了过来。
1 class
要使用class关键字去定义一个类，用法如下：

[JavaScript] 纯文本查看 复制代码

class Person{

}

console.log(new Person());//Person {}

console.log(typeof Person);//function

可见Person有构造函数的作用，类似于ES5中的构造函数，但又不仅仅是一个构造函数，因为毕竟连写法都不一样了呢。
2 构造函数

[JavaScript] 纯文本查看 复制代码

class Person{

      constructor(name='zhangsan'){

          this.name = name;

          this.add = function(a,b){

                return a+b;

          }

      }

}

console.log(new Person());

//Person {

  name: "zhangsan"，

  add:function(){}

}

可见每一个类中的constructor才是对应的ES5中的构造函数本身。其内挂载到this上的属性和方法(函数)都是将来的实例属性和方法。但类的设计者认为方法（函数）应该是所有实例共享即可，没必要每个实例上都存一份，于是有了下面的写法。
3 原型上的函数

[JavaScript] 纯文本查看 复制代码

class Person{

      constructor(name='zhangsan'){

          this.name = name;

      }

      add(a,b){

          return a + b;

      }

}

console.log(new Person());

//Person {name: "zhangsan"}

console.log(Person.prototype.add);

//ƒ add(a,b){return a + b;}

如上写法，add函数即挂载到了原型上，供所有实例共享。注意上边的写法，定义原型上的函数时与constructor平级，且不需要使用,逗号隔开。
4 另外一种往实例上挂载非函数属性的写法
在构造函数外写key = value

[JavaScript] 纯文本查看 复制代码

class Person{

      constructor(name='zhangsan'){

          this.name = name;

      }

      age=18;

}

console.log(new Person());

//Person {age: 18, name: "zhangsan"}

这种写法不能接受构造函数的初始化参数，只能通过实例.操作符进行访问和设置。
5访问器get和set

[JavaScript] 纯文本查看 复制代码

class Day{

      constructor(day=1){

          this.day= day;

      }

      get proxyDay(){

          if(day < 10){

                return '0'+this.day;

          }

          return this.day;

      }

      set proxyDay(value){

          if(value < 31 && value >0){

              this.day = value;

          }

      }

}

var day = new Day();

console.log(day.proxyDay);//1

day.proxyDay = -1;

console.log(day.proxyDay);//1

day.proxyDay = 15;

console.log(day.proxyDay);//15

6 extends关键字继承

[JavaScript] 纯文本查看 复制代码

class Day{

      constructor(day=1){

          this.day= day;

      }

}

class Holiday extends Day{

      /*

       constructor(){

          super();

      }

     */

}

var holiday = new Holiday();

console.log(holiday);//{day:1}

以上代码中Holiday类继承了Day类，Day即为Holiday的父类，Holiday即为Day的子类，Holiday中的构造器已经注释掉了，可依然能得到一个实例{day:1}，可见Holiday默认执行了父类的构造器
子类构造器中可以新增挂载实例属性，且可覆盖继承自父类属性。

[JavaScript] 纯文本查看 复制代码

class Day{

      constructor(day=1){

          this.day= day;

      }

}

class Holiday extends Day{

       constructor(){

          super();

          this.day = 5;

          this.hour = 12;

      }

}

var holiday = new Holiday();

console.log(holiday);//{day:5,hour:12}

7 static关键字静态函数

[JavaScript] 纯文本查看 复制代码

class Day{

      constructor(day=1){

          this.day= day;

      }

      static add(a,b){

            return a + b;

      }

}

var day = new Day();

console.log(day.add);//undefined

console.log(Day.add);//ƒ add(a,b){return a + b;}

静态函数只可以通过类Day调用，实例不可调用。
需要注意的是，static只针对函数其作用。

8 静态属性（只能通过类调用的数据类型属性）[JavaScript] 纯文本查看 复制代码
class Day{
   constructor(day=1){
      this.day= day;
   }
   static add(a,b){
         return a + b;
   }
}
Day.dayType = '日子';
var day = new Day();
console.log(day.dayType);//undefined
console.log(Day.dayType);//日子

欢迎光临黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2