js——class基础

js的类？其实还是原型！

1 class Point{
2     constructor(x, y){
3         this.x = x;
4         this.y = y;
5     }
6     toString(){
7         return ‘(‘ + this.x + ‘,‘ + this.y + ‘)‘;
8     }
9 }

基本点

1. class是关键字，class Point定义了一个“类”。其它变量名不能与类名相同

2. Point的类型(typeof)：function，必须通过new来调用

• class的pototype=>包含在class中所有定义的方法(包括constructor)

  Point.protoype;//{constructor: ?, toString: ?}

3. 与函数一样，类也可以使用表达式的形式定义 

• var MyPoint = class{};
  var mypoint= new Mypoint();

  不会变量提升：必须先定义才可以使用class

• name属性（就像函数名），同样的，class后的名称只能在类内部使用

  MyPoint.name;//MyPoint
  var MyPoint2 = class me{};
  MyPoint2.name;//MyPoint2
  mypoint = new me();//报错，me未定义，只能在类内部使用

4. constructor是构造函数

• 通过new Point来实例化一个对象，且会自动调用class中的contructor
• 返回值：默认返回实例对象this，可指定其它返回值（与es5相同）
• 可省略？如果不显式写一个constructor，会自动添加一个空的（与C++相同）
• Point.prototype.contructor是class，而不是contructor函数

• var point = new Point();
  console.log(point.constructor===Point);//true

  constructor中的this指向实例化后的对象，与es5中的相同 

  console.log(point);//Point {x: undefined, y: undefined}

5. 对象属性的定义：在constructor中用this来添加; 对象方法的定义：在class中直接定义(不加function和逗号)

6. 在class中定义的方法不可枚举

1 Object.keys(Point.prototype);//结果为空，说明不可枚举
2 //es5中可枚举
3 function Test(){}
4 Test.prototype.fun1 = function(){};
5 Object.keys(Test.prototype);//[fun1]可枚举

View Code

7. 实例对象

• 共享一个原型对象（与es5相同）

• var p1 = new Point();
  var p2 = new Point();
  p1.__proto__ === p2.__proto__;//true

  原型对象的方法可直接在class中添加，那如果要添加属性呢=>getPrototypeOf / Point.prototype上添加

  point.__proto__ === Point.prototype;//true
  var pProto = Object.getPrototypeOf(point);
  pProto.newAttr = 1;
  point.newAttr;//1

8. 静态方法和属性（static）

• 它们是属于class，而不属性实例（与C++相同）
• 静态属性只能在class外由类来添加

• class StaticClass{
      static constructor(){//定义一个静态方法
          console.log(this);//class{...}
      }
      constructor(){
          console.log(this);//指向实例对象
      }
  }
  StaticClass.attr = 1;//定义一个静态属性

  静态方法中的this指向的是class！

9. new的新属性new.target

• 函数或class通过new调用，那么在它们内部使用new.target返回自身，否则返回undefined
• 可以用于区分一个函数是否是通过new调用的

• function Point1(){
      console.log("new.target结果：", new.target);
  }
  Point1();//undefined
  var p = new Point1();//function Point1(){...}

  在class中使用

  var targetClass = class me{
      constructor(){
          console.log(new.target===targetClass);//true
          console.log(new.target===me);//true
      }
  }
  var tclass = new targetClass();