类:

实例：

继承

封装

多态(函数的多种角色==> 类、普通函数、对象)

原型

原型链

in

hasOwnProperty

Object.defineProperty

==> ES5创建类(构造函数 + 原型)

    // ==> 定义类
    function Person(name, age) {
        this.name = name;
        this.age = age;
        this.getName = function() {
            console.log(this.name);
        }
    }
    // ==> 原型上加公用方法
    Person.prototype.getAge = function() {
        console.log(this.age);
    }
    //==> 静态方法
    Person.status = function(val) {
        
    };
    Person.x = 1;
    注意:
        1) 类名第一个字母大写，区分其他的函数
        2) 使用new 执行
        3) 里面没有返回值，浏览器默认返回这个类的一个实例， 如果你返回的引用类型，会覆盖掉返回的实例，基本数据类型不会
        4)如果不适用new， 函数返回undefined，里面的this是window，普通函数执行，前面没有点，默认window，严格模式是undefined
        
    // 实例
    var person1 = new Person('clh', 23);
    var person2 = new Person('wdd', 123);
    person1.__proto__.getAge = person2.__proto__.getAge // ==> true 公用一个方法
    
    person1 instanceof Person; // === true
    person1 instanceof Object; // === true
    person1.constructor === Person.prototype.constructor === Person;
    person1.__proto__.getAge(); // ==>> undefined  考察this指向
    
    ***类表达式
    const Person = function(name) {
        this.name;
    };
    Person.prototype.getName = function(){
        return this.name;
    };
    Person.getAge = function() {
        return this.age;
    }

==>> ES6类(语法糖) class、 extends

class Person {
    // ==> 构造函数
    construcor(name, age) {
        // ==> 私有的属性和方法
        this.name = name;
        this.age = age;
        this.getAge = function() {
            console.log(this.age);
        }
    }
    
    // ==> getter 和 setter
    get name() {
        return this.name
    }
    set name(val) {
        this.name = name;
    }
    // ==> 原型
    getName() {
        console.log(this.name);
    }
    
    // ==> 静态方法
    static changeStatus() {
        
    }
}
// ==>>静态属性
Person.x = 1;
var person1 = new Person(1, 2);
person1.name;
person1.name('wdd');


***class表达式:
 const A = class A1 {
     constructor(x, y) {
        this.x = x;
        this.y = y;
     }
     
     getX() {
         cosole.log(this.x);
     }
 }
注意
    1. 必须使用new
    2.constructor默认不写，会有一个
    3.Object.assign可以添加多个 
        Object.assign(Person.prototype, {
            getName() {},
            getAge() {}
        });
    4.不存在变量提升(没有预解释)

class类

定义类

  class 类名 {
    name = 'class';   //私有属性 草案中...
    static name = 'class-static'; //静态属性 草案中...
  //构造器
   constructor() {
   //私有属性
   this.x = x = ;  //私有属性
   this.getX = this.getX.bind(this); //改变this的指向，在外面直接调用这个方法 原型链查找到原型上的getX方法
   
   this.test1 = function() {
       console.log(this); //实例
   }
   this.test2 = () => {   //可不能使用箭头函数，vue里面的 methods里面的方法都不可以用，找不到this
       console.log(this); // ==>> undefined
   }
   }
   
   //原型上的方法prototype
   getX() {
      console.log(this); // ===>> 实例对象 
   }
   getY() {
       
   }
   
   //静态方法
   static getX() {
      console.log(this); //===>> 类本身 
   }
   
   static getY() {
       
   }
   
   //get和set
   get html() {
       return this.html;
   }
   set html(val) {
       this.html = val;
   }
}

类名.x = 1;  //静态属性

类名首字母大写
类必须使用 new关键字进行调用类 ( new一个类发生了什么，一个函数加new和不加new的区别 )
类没有预解释(不存在提升)
箭头函数没有prototype, constructor，不能使用箭头函数定义类
取值函数（getter）和存值函数（setter）自己定义的属性， Vue里面也有这东西
在原型上的方法内容this是实例，在静态方法中内部this是当前类本身
this 的指向 ( 类的方法内部如果含有this，它默认指向类的实例。但是，必须非常小心，一旦单独使用该方法，很可能报错。)

必要的时候在构造函数里面用bind绑定this的指向 (React推介)

constructor() {
    this.getX = this.getX.bind(this);
}

使用箭头函数

  constructor() {
    this.getThis = () => this;
  }

私有属性(实例， this.x=x)，私有方法(实例,this.getX=funciton(){}), 原型共享属性(prototype)，原型共有方法，静态方法(static)，静态属性

静态属性

在定义完毕类后面写

  class A() {
      
  }
  A.name = 'hellow'

ES6草案在constructor上面用static定义

class A() {
    static name = 'hello';
    static age = 23;
}  
A.name;

私有属性, 私有方法

在构造函数里面this写

  constructor(x) {
      this.x = x;
      this.getX = function() {
          return this.x;
      }
  }

类的最顶层

class A() {
    x = 1;
    y = 2;
    constructor() {
        
    }
}