ES6之class

﹏ヽ暗。殇╰゛Y 2021-09-17 02:12 276阅读 0赞

### Class定义语法 ###

class point{
         constructor(x,y){
                   this.x = x;
    
                   this.y = y;
         }
    
         toString(){
                   return '[' + this.x + ',' + this.y + "]" ;
         }
       }
    
    var instance = new point(1,2);

等价于

function point(x, y){
           this.x = x;
           this.y = y;
       }
       point.prototype.toString = function(){
            return '[' + this.x + ',' + this.y + "]" ;
       }

var instance = new point(1,2);

在class中constructor方法就是构造方法，this关键字代表实例对象，toString方法实际上是protoType上的方法，方法的定义不需要加关键字，并且方法之间不能用逗号分隔。

注意：ES6的class中不存在变量提升，这与继承有关，必须保证子类在父类定以后使用。class内部默认就是严格模式。

### Class继承 ###

ES5中使用原型，让一个引用类型继承另一个引用类型的属性和方法。

class child extends point{
         constructor(x,y,z){
    
                   supor(x,y);
    
                   this.color = z;
         }
    
         childMethod(){
                   console.log(this.z);
         }
    
       }

通过extends关键字实现继承，在子类的constructor构造函数中调用super方法，继承父类的this。同时可以添加自己的实例属性z和原型函数childMethod。

与ES5区别：

（1）在ES5中是先创建 子类的this对对象，然后将父类的方法添加到this上，即Parent.apply(this)。而ES6中是用super方法创建父类的实例对象this，再用子类的构造函数修改this。因此在子类中必须调用super方法后才可以使用this。

（2）ES5中，每个对象都有\_proto\_属性，指向对应构造函数的原型对象；而prototype指向其方法的原型对象。

ES6中

l  子类的\_proto\_属性表示构造函数的继承，总是指向父类。

l  子类的prototype属性的\_proto\_属性表示方法的继承，总是指向父类的prototype属性。

l  子类的\_proto\_属性的\_proto\_属性，指向父类实例的\_proto\_属性。

在ES6中，使用class类实现继承，与ES5原型链继承相同的是，而子类prototype（原型对象）的\_\_proto\_\_属性总是指向父类的prototype（原型对象）属性，即child.prototype.\_\_protot\_\_ = parent.prototype。与ES5原型链继承不同的是，子类的\_\_proto\_\_总是指向父类，即child.\_\_proto\_\_ = parent（注意：ES5中，child.\_\_proto\_\_ = Function.prototype），表示构造函数的继承。而且子类\_\_proto\_\_的\_\_proto\_\_是父类的\_\_proto\_\_，也就是说，子类原型的原型是父类的原型。

class parent{
    
              constructor(x,y){
    
                       this.x = x;
    
                       this.y = y;
    
              }
    
              toString(){
    
                       return '[' + this.x + ',' + this.y + "]" ;
    
              }
    
       }
    
    //class 继承
    
       class child extends parent{
              constructor(x,y,z){
                       supor(x,y); //super()创建父类的实例
             }
              childMethod(){
                       console.log(this.z);
              }
    
       }
    
       console.log(child.__proto__ == parent); //true
       console.log(child.prototype.__proto__ == parent.prototype); //false

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2NzQyNzIw_size_16_color_FFFFFF_t_70][]

### 原文链接：[https://www.cnblogs.com/microcosm/p/7118356.html][https_www.cnblogs.com_microcosm_p_7118356.html] ###

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2NzQyNzIw_size_16_color_FFFFFF_t_70]: /images/20210813/78cff1f5c4804351bc1fe13a06df53d8.png
[https_www.cnblogs.com_microcosm_p_7118356.html]: https://www.cnblogs.com/microcosm/p/7118356.html