javascript定义类 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();