ES6class-构造函数的另一种写法1

Class基础使用

JavaScript 语言中，生成实例对象的传统方法是通过构造函数。
在ES6中，提供一种新的方式 class (类)来实现。
基本上，ES6 的class可以看作只是一个语法糖，它的绝大部分功能，ES5 都可以做到，新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。

现在公司用的这种方式，感觉语义是清晰了很多，现在闲暇之余整理一下，免得写代码的时候卡壳。

例子1：基本使用

        function OldFather(type){
            this.type = type
        }



        class Father{
            constructor(type){
                this.type = type
            }
        }

        let oldFather = new OldFather('旧父类')
        console.log(oldFather);
        let father = new Father('父类')
        console.log(father);

输出结果

可以发现，他们实例的原型的构造器的实现方式不一样之外，ES6 的类，完全可以看作构造函数的另一种写法。

例子2：类的数据类型

class Point {
  // ...
}

typeof Point // "function"
Point === Point.prototype.constructor // true

上面代码表明，类的数据类型就是函数，类本身就指向构造函数。

使用的时候，也是直接对类使用new命令，跟构造函数的用法完全一致。

例子3：类的所有方法都定义在类的prototype属性上面

class Point {
  constructor() {
    // ...
  }

  toString() {
    // ...
  }

  toValue() {
    // ...
  }
}

// 等同于

Point.prototype = {
  constructor() {},
  toString() {},
  toValue() {},
};

constructor方法

constructor方法是类的默认方法，通过new命令生成对象实例时，自动调用该方法。一个类必须有constructor方法，如果没有显式定义，一个空的constructor方法会被默认添加。
由例子1的结果，可以看到，当new 一个类时，就是调用的constructor，这里不再赘述。

有关set与get

在“类”的内部可以使用get和set关键字，对某个属性设置存值函数和取值函数，拦截该属性的存取行为。

例子4: 设置set与get

        class Father{
            constructor(type){
                this.type = type   
            }
            
            set flower(val){
                console.log('当设置实例的flower时，会调用该方法')
            }

            get flower(){
                console.log('当取值flower时，会调用该方法');
                
                return 'aa'
            }
        }

        let father = new Father('父类')
        father.flower = '玫瑰'
        console.log(father.flower);//aa

输出结果

从上述代码可以得出，将father实例设置flower属性时，会调用类里的set方法，log flower属性时，会调用到get方法，由于get方法是拦截到输出结果的，所以函数体里要给出返回值，如果没有return ‘aa’，那么将会返回undefined。

注意事项：

1. 当你使用了set，他会拦截到该属性的赋值过程，也就是之前的赋值操作不存在了，改造一下上述例子：

	set flower(val){
		console.log('当设置实例的flower时，会调用该方法')            
	}

上述例子，只留了set方法，get注释掉，看看输出结果：

会发现 father.flower = ‘玫瑰’，并没有赋值成功，所以，如果需要原值，请不要对他进行set拦截

2.当你使用了get，他会拦截到该属性的取值过程，在这里，需要你自行return一个值。
3.无论你是使用set和get，切记里面不要返回同名的属性，讲人话就是，set flower 里面不要出现this.flower的赋值操作，get flower 里面不要return this.flower ,如果你这样做的话，会陷入死循环。

后续有时间会写一下继承及其扩展.