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

悠悠 2022-03-25 10:37 237阅读 0赞

## 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);

输出结果  
![构造函数方式与Class方式的差异][Class]  
可以发现，他们实例的原型的构造器的实现方式不一样之外，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

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

注意事项：

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

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

上述例子，只留了set方法，get注释掉，看看输出结果：  
![set][]  
会发现 father.flower = ‘玫瑰’，并没有赋值成功，所以，如果需要原值，请不要对他进行set拦截

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

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

[Class]: /images/20220325/7c4c1274ce144bbd882ba51fc143d63c.png
[set_get]: /images/20220325/281436d3a16d4ebeadaeff1d803e2af1.png
[set]: /images/20220325/9e36f9edeeba462fb7c8c73219b87f4f.png