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;//MyPointvar MyPoint2 = class me{};MyPoint2.name;//MyPoint2mypoint = 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]可枚举

7. 实例对象

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

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

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

  point.__proto__ === Point.prototype;//truevar 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();//undefinedvar 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();