JavaScript的ES6语法——Class基本语法

JavaScript的ES6——Class基本语法

1. JavaScript 语言中，生成实例对象的传统方法是通过构造函数。

   function Sum(a, b) {
       this.a = a;
       this.b = b;
   }
   Sum.prototype.sum = function() {
       console.log(this)
       return this.a + this.b;
   }
   let one = new Sum(1, 2);
   console.log(one.sum());
   

   
   这种写法跟传统的面向对象语言差异很大，很容易让新学习这门语言的程序员感到困惑,不是一般的困惑……

2. 所以ES6 提供了Class关键字，通过class关键字，可以用于定义类：

   class Phone{}
   

   而原来ES5中的构造函数也改为了constructor方法,this关键字则代表实例对象：

   class Sum {
       constructor(a, b) {
           this.a = a;
           this.b = b;
       }
       sum() {
           console.log(this);
           return this.a + this.b;
       }
   }
   let p = new Sum(1, 2);
   console.log(p.sum());
   

   

   定义“类”的方法的时候，前面不需要加上function这个关键字，直接把函数定义放进去了就可以了。

   构造函数的prototype属性，在 ES6 的“类”上面继续存在。事实上，类的所有方法都定义在类的prototype属性上面。

   在类的实例上面调用方法，其实就是调用原型上的方法。

   class B {}
   let b = new B();
   console.log(b.constructor === B.prototype.constructor);//true
   

3. constructor方法是类的默认方法，通过new命令生成对象实例时，自动调用该方法。

4. ES6 与 ES5 一样，也是使用new命令实例化对象，不过 ES5 使用的是构造函数，在不加new时会当做函数执行，而ES6则会直接报错。

5. 静态方法，类相当于实例的原型，所有在类中定义的方法，都会被实例继承。如果在一个方法前，加上static关键字，就表示该方法不会被实例继承，而是直接通过类来调用。

   class Phone {
       static wholesale() {
           console.log('批发');
       }
   }
   Phone.wholesale();
   let p = new Phone();
   p.wholesale();
   

   

6. Class 的继承：Class 通过extends关键字实现继承，这比 ES5 的通过修改原型链实现继承，要清晰和方便很多。

   class ParClass {}
   class SonClass extends ParClass {
       constructor(emm) {
           super();
           this.emm = emm;
       }
   }
   let p = new SonClass('我叫参数');
   

   子类必须在constructor方法中调用super方法，否则新建实例时会报错；super关键字表示父类的构造函数，用来新建父类的this对象。

   如果子类没有定义constructor方法，这个方法也会被默认添加。

7. 类的prototype属性和__proto__属性:

   大多数浏览器的 ES5 实现之中，每一个对象都有__proto__属性，指向对应的构造函数的prototype属性。Class 作为构造函数的语法糖，同时有prototype属性和__proto__属性，因此同时存在两条继承链。

   （1）子类的__proto__属性，表示构造函数的继承，总是指向父类。

   （2）子类prototype属性的__proto__属性，表示方法的继承，总是指向父类的prototype属性。