简介
JavaScript言语中，天生实例对象的传统要领是经由过程组织函数。下面是一个例子。
function Point(x,y){
this.x = x;
this.y = y;
}
Point.prototype.toString = function(){
return '(' + this.x + ', ' + this.y + ')';
};
var p = new Point(1,2);基本上，ES6的class能够看做只是一个语法糖，它的绝大部分功用，ES5都能够做到，新的class写法只是让对象原型的写法越发清楚、更像面向对象编程的语法罢了。上面的代码用ES6的class改写。
//定义类
class Point{
constructor(x,y){
this.x = x;
this.y = y;
}
toString(){
return '(' + this.x + ', ' + this.y + ')';
}
}上面代码定义了一个类，能够看到内里有一个constructor要领，这就是组织要领，而this关键字则代表实例对象。也就是说ES5的组织函数point，对应ES6的point类的组织要领。
Point类除了组织要领，还定义了一个toString要领。注重，定义类的要领的时刻，前面不须要加上function这个关键字，直接把函数定义放进去就能够了。别的，要领之间不须要逗号支解，加了会报错。
ES6的类，完整能够看做组织函数的另一种写法。
class Point{
//...
}
typeof Point//function
Point === Point.prototype.constructor//true;上面代码表明，类的数据类型就是函数，类本身就指向组织函数。
运用的时刻，也就是直接对类运用new敕令，跟组织函数的用法完整一致。
class Bar{
doStuff(){
console.log('stuff');
}
}
var b = new Bar();
b.doStuff();组织函数的prototype属性，在ES6的类上面继续存在。事实上，类的一切要领都定义在类的prototype属性上面。
class Point{
constructor(){}
toString(){}
toValue(){}
}
//等同于
Point.prototype = {
constructor(){},
toString(){},
toValue(){},
}在类的实例上面挪用要领，实在就是挪用原型上的要领。
class B{}
let b = new B{};
b.constructor === B.prototype.constructor;上面代码中，b是B类的实例，它的constructor要领就是B类原型的constructor要领。
由于类的要领都定义在prototype对象上面，所以类的新要领能够增加在prototype对象上面。Object.assign要领能够很轻易地一次向类增加多个要领。
class Point{
constructor(){}}
Object.assign(Point.prototype,{
toString(){},
toValue(){}})
prototype对象的constructor属性，直接指向类的本身，这与ES5的行动是一致的。
Point.prototype.constructor === Point//true.别的，类的内部一切定义的要领，都是不可罗列的。
class Point{
constructor(x,y){}
toString(){}
}
Object.keys(Point.prototype);
Object.getOwnPropertyName(Point.prototype);上面代码中，toString要领是Point类内部定义的要领，它是不可罗列的。这一点与ES5的行动不一致。
var Point = function(x,y){}
Point.prototype.toString=function(){}
Object.keys(Point.prototype);
//["toString"]
Obejct.getOwnPtopertyName(Point.prototype)
//["constructor","toString"]上面代码采纳ES5的写法，toString要领就是可罗列的。
类的属性名，能够采纳表达式。
let methodName = 'getArea';
class Square{
constructor(length){}
[methodName](){}
}上面代码中，Square类的要领名getArea，是从表达式获得的。
constructor要领
constructor要领是类的默许要领，经由过程new敕令天生对象的实例时，自动挪用该要领。一个类必需有constructor要领，假如没有显式定义，一个空的constructor要领会被默许增加。
class Point{}
//等同于
class Point{
constructor(){}
}上面代码中，定义了一个空的类Point，JavaScript引擎会自动为它增加一个空的constructor要领。
constructor要领默许返回实例对象（即this），完整能够指定返回另一个对象。
class Foo{
constructor(){
return Object.create(null);
}
}
new Foo() instanceof Foo
//false上面代码中，constructor函数返回一个全新的对象，效果致使实例对象不是Foo类的实例。
类必需运用new挪用，不然会报错。这是它跟一般组织函数的一个重要区分，后者不必new也能够实行。
类的实例对象
天生类的实例对象的写法，与ES5完整一样，也是运用new敕令。前面说过，假如遗忘加上new，像函数那样挪用Class，将会报错。
class Point{}
//报错
var point = Point(2,3);
//准确
var point = new Point(2,3);与ES5一样，实例属性除非显式定义在其本身（即this对象上），否者都定义在原型上。
//定义类
class Point{
constructor(x,y){
this.x = x;
this.y = y;
}
toString(){
return '('+this.x+','+this.y+')';
}
}
var point = new Point(2,3);
point.toString();//2,3
point.hasOwnProperty('x')//true
point.hasOwnProperty('y')//true
point.hasOwnProperty('toString');//false
point.__proto__.hasOwnProperty('toString')//true上面代码中，x和y都是实例对象point本身的属性（由于定义在this变量上），所以hasOwnProperty要领返回true，而toString是原型对象的属性（由于定义在Point类上），所以hasOwnProperty要领返回fasle。这些都与ES5的行动保持一致。
与ES5一样，类的一切实例同享一个原型对象。
var p1 = new Point(2,3);
var p2 = new Point(3,2);
p1.__proto__ === p2.__proto__
//true上面代码中，p1和p2都是Point的实例，它们的原型都是Point.prototype,所以__proto__属性是相称的。
这也意味着，能够经由过程实例__proto__属性为类增加要领。
;__proto__ 并非言语本身的特征，这是各大厂商详细完成时增加的私有属性，虽然现在许多当代浏览器的 JS 引擎中都供应了这个私有属性，但照旧不发起在临盆中运用该属性，防止对环境发生依靠。临盆环境中，我们能够运用 Object.getPrototypeOf 要领来猎取实例对象的原型，然后再来为原型增加要领/属性。
请输入var p1 = new Point(2,3);
var p2 = new Point(3,2);
p1.__proto__.printName = function () { return 'Oops' };
p1.printName() // "Oops"
p2.printName() // "Oops"
var p3 = new Point(4,2);
p3.printName() // "Oops"上面代码在p1的原型上增加了一个printName要领，由于p1的原型就是p2的原型，因而p2也能够挪用这个要领。而且，今后新建的实例p3也能够挪用这个要领。这意味着，运用实例的__proto__属性改写原型，必需相称郑重，不引荐运用，由于这会转变“类”的原始定义，影响到一切实例。
Class表达式
与函数一样，类也能够运用表达式的情势定义。
const MyClass = class Me{
getClassName(){
return Me.name;
}
}上面代码中运用表达式定义了一个类。须要注重的是，这个类的名字MyClass而不是Me，Me只在Class的内部代码可用，指代当前类。
let inst = new MyClass();
inst.getClassName()//me;
Me.name // ReferenceError: Me is not defined上面代码示意，Me只在Class内部定义。
假如类的内部没用到的话，能够省略Me，也就是能够写成下面的情势。
const MyClass = class{};采纳Class表达式，能够写出马上实行的Class。
let person = new class{
constructor(name){
this.name = name;
}
sayName(){
console.log(this.name);
}
}('张三');
person.sayName();上面代码中，person是一个马上实行的类实例。
不存在变量提拔
类不存在变量提拔，这一点与ES5完整差别。
new Foo();// ReferenceError
class Foo{}上面代码中，Foo类运用在前，定义在后，如许会报错，由于ES6不会把类的申明提拔到代码头部。这类划定的缘由与下文要提到的继续有关，必需保证子类在父类以后定义。
{
let Foo = class{};
class Bar extends Foo{}
}上面的代码不会报错，由于Bar继续Foo的时刻，Foo已经有定义了。然则，假如存在class提拔，上面的代码就会报错，由于class会被提拔到代码头部，而let敕令是不提拔的，所以致使Bar继续Foo的时刻，Foo还没有定义。
私有要领和私有属性
现有的要领
私有要领是罕见需求，然则ES6不供应，只能经由过程变通要领模仿完成
一种做法是在定名上加以区分。
class Widget{
foo(baz){
this._bar(baz);
}
//私有要领
_bar(baz){
return this.snaf = baz;
}
}上面代码中，_bar要领前面的下划线，示意这是一个只限于内部运用的私有要领。然则，这类定名是不保险的，在类的外部，照样能够挪用到这个要领。
另一种要领就是干脆将私有要领移出模块，由于模块内部的一切要领都是对外可见的。
class Widget {
foo (baz) {
bar.call(this, baz);
}
// ...
}
function bar(baz) {
return this.snaf = baz;
}上面代码中，foo是公有要领，内部挪用了bar.call(this, baz)。这使得bar现实上成为了当前模块的私有要领。
另有一种要领是应用Symbol值的唯一性，将私有要领的名字定名为一个Symbol值。
const bar = Symbol('bar');
const snaf = Symbol('snaf');
export default class myClass{
//公有要领
foo(baz){
this[bar](baz);
}
//私有要领
[bar](baz){
return this[snaf] = baz;
}
}私有属性的提案
现在有一个提案，为class加了私有属性。要领是在属性名之前，运用#示意。
class Point{
#x;
constructor(x=0){
#x=+x;//写成this.#x亦可
}
get x(){return #x}
set x(value){#x=+value}
}上面代码中，#x就是私有属性，在Point类以外是读取不到这个属性的。由于井号#是属性的一部分，运用时必需带有#一同运用，所以#x和x是两个差别的属性。
私有属性能够指定初始值，在构建函数实行时举行初始化。
class Point{
#x = 0;
constructor(){
#x;//0
}
}this指向
类的要领内容假如含有this，他默许指向类的实例。然则，必需异常警惕，一旦零丁运用该要领，极可能报错。
class Logger{
printName(name='three'){
this.print(`Hellow ${name}`);
}
print(text){
console.log(text);
}
}
const logger = new Logger();
const {printName} = logger;
printName();上面代码中，printName要领中的this，默许指向Logger类的实例。然则，假如将这个要领提取出来零丁运用，this会指向该要领运行时地点的环境，由于找不到print要领而致使报错。
一个比较简单的解决要领是，在组织要领中绑定this，如许就不会找不到print要领了。
class Logger{
constructor(){
this.printName = this.printName.bind(this);
}
}另一种解决要领是运用箭头函数。
class Logger{
constructor(){
this.printName = (name = 'three')=>{
this.print(`Hellow ${name}`)
}
}
}另有一种解决要领是运用Proxy，猎取要领的时刻，自动绑定this。
function selfish(target){
const cache = new WeakMap();
const handler = {
get(target,key){
const value = Reflect.get(target,key);
if(typeof value !== 'function'){
return value;
}
if(!cache.has(value)){
cache.set(value,value.bind(target));
}
return cache.get(value);
}
};
const proxy = new Proxy(target,handler);
return proxy;
}
const logger = selfish(new Logger());class继续
class 能够经由过程extends关键字完成继续，这比ES5的经由过程修正原型链完成继续，要清楚和轻易许多。
class Point{}
class ColorPoint extends Point{}上面代码定义了一个ColorPoint类，该类经由过程extends关键字，继续了Point类的一切属性和要领。然则由于没有布置任何代码，所以这两个类完整一样，即是复制了一个Point类。下面，我们在ColorPoint内部加上代码。
class ColorPoint extends Point{
constructor(x,y,color){
super(x,y);//挪用父类的constructor(x,y)
this.color = color;
}
toString(){
return this.color+ '' + super.toString();//挪用父类的toString()要领。
}
}上面代码中，constructor要领和toString要领当中，都涌现了super关键字，它在这里示意父类的组织函数，用来新建父类的this对象。
子类必需在constructor要领中挪用super要领，不然新建实例时会报错。这是由于子类本身的this对象，必需先经由过程父类的组织函数完成塑造，获得与父类一样的实例属性和要领，然后再对其举行加工，加上子类本身的实例属性和要领。假如不挪用super要领，子类就得不到this对象。
假如子类没有定义constructor要领，这个要领会被默许增加，代码以下。也就是说没有显式定义，任何一个子类都有constructor要领。
class ColorPoint extends Point{
}
//等同于
class ColorPoint extends Point{
constructor(...arguments){
super(...arguments)
}
}另一个须要注重的处所是，在子类的组织函数中，只要挪用super以后，才够运用this关键字，不然会报错。这是由于子类实例的构建，基于父类实例，只要super要领才挪用父类实例。
class Point {
constructor(x, y) {
this.x = x;
this.y = y;
}
}
class ColorPoint extends Point {
constructor(x, y, color) {
this.color = color; // ReferenceError
super(x, y);
this.color = color; // 准确
}
}上面代码中，子类的constructor要领没有挪用super之前，就运用this关键字，效果报错，而放在super要领以后就是准确的。
Object.getPrototypeOf()
Obejct.getPrototypeOf要领能够用来从子类上猎取父类。
Object.getPrototypeOf(ColorPoint) === Point因而，能够运用这个要领推断，一个类是不是继续了另一个类。
super关键字
super关键字既能够看成函数运用，也能够看成对象运用。在这类状况下，它的用法完整差别。
第一种状况，super作为函数挪用时，代表父类的组织函数。ES6请求，子类的组织函数必需实行一次super函数。
class A{}
class B extends A{
constructor(){
super();
}
}上面代码中，子类B的组织函数当中super()，代表挪用父类的组织函数。这是必需的，不然JavaScript引擎会报错。
注重，super虽然代表了父类A的组织函数，然则返回的是子类B的实例，即super内部的this指向的是B，因而super()在这里相称于
A.prototype.constructor.call(this)。
class A {
constructor() {
console.log(new.target.name);
}
}
class B extends A {
constructor() {
super();
}
}
new A() // A
new B() // B代码上面代码中，new.target指向当前正在实行的函数。能够看到，在super()实行时，它指向的是子类B的组织函数，而不是父类A的组织函数。也就是说，super()内部的this指向的是B。
作为函数时，super()只能用在子类的组织函数当中，用在别的处所就会报错。
class A {}
class B extends A {
m() {
super(); // 报错
}
}上面代码中，super()用在B类的m要领当中，就会形成语法错误。
第二种状况，super作为对象时，在一般要领中，指向父类的原型对象；在静态要领中指向父类。
class A{
p(){
return 2;
}
}
class B extends A{
constructor(){
super();
console.log(super.p())//2
}
}
let b = new B();上面代码中，子类B当中的super.p()，就是将super看成一个对象运用。这时候，super在一般要领当中，指向A.prototype,所以super.p()就相称于A.prototype.p().
这里须要注重，由于super指向父类的原型对象，所以定义在父类实例上的要领或属性，是没法经由过程super挪用的。
class A{
constructor(){
this.p = 2;
}
}
class B extends A{
get m(){
return super.p;
}
}
let b = new B();
b.m//undefined上面代码中，p是父类A实例的属性，super.p就援用不到它。
假如属性定义在父类的原型对象上，super就能够取到。
class A{}
A.prototype.x = 2;
class B extends A{
constructor(){
super();
console.log(super.x)//2
}
}
let b = new B();上面代码中，水星X是定义在A.prototype上面的，所以super.x能够取到它的值。
ES6划定，在子类一般要领中经由过程super挪用父类的要领时，要领内部的this指向当前的子类实例。
class A{
constructor(){
this.x =1;
}
print(){
console.log(this.x);
}
}
class B extends A{
constructor(){
super();
this.x =2;
}
m(){
super.print()
}
}
let b = new B();
b.m()//2上面代码中，super.print()虽然挪用的是A.prototype.print(),然则A.prototype.print()内部的this指向子类B的实例，致使输出的是2，而不是1。也就是说，现实实行的是super.print.call(this).
由于this指向子类实例，所以假如经由过程super对某个属性赋值，这时候super就是this，赋值的属性会变成子类实例的属性。
class A{
constructor(){
this.x = 1;
}
}
class B extends A{
constructor(){
super();
this.x = 2;
super.x = 3;
console.log(super.x)//undefined
console.log(this.x)//3
}
}
let b = new B();上面代码中，super.x赋值为3，这时候等同于对this.x赋值为3.而当读取super.x的时刻，读的是A.prototype.x,所以返回undefind。
假如super作为对象，用在静态要领当中，这时候super将指向父类，而不是父类的原型对象。
class Parent{
static myMethod(msg){
console.log('static',msg)
}
myMethod(msg){
console.log('instance',msg)
}
}
class Child extends Parent{
static myMethod(msg){
super.myMethod(msg);
}
myMethod(msg){
super.myMethod(msg);
}
}
Child.myMethod(1);//static 1
var child = new Child();
child.myMethod(2);//instance 2上面代码中，super在静态要领当中指向父类，在一般要领当中指向父类的原型对象。
别的，在子类的静态要领中经由过程super挪用父类的要领时，要领内部的this指向当前的子类，而不是子类的实例。
class A{
constructor(){
this.x =1
}
static print(){
console.log(this.x)
}
}
class B extends A{
constructor(){
super();
this.x = 2;
}
static m(){
super.print();
}
}
B.x = 3;
B.m()//3上面代码中，静态要领B.m内里，super.print指向父类的静态要领。这个要领内里的this指向的是B，而不是B的实例。
注重，运用super的时刻，必需显式指定是作为函数、照样作为对象运用，不然会报错。
class A{}
class B extends A{
constructor(){
super();
console.loog(super)//报错
}
}上面代码中，console.log(super)当中的super，没法看出是作为函数运用，照样作为对象运用，所以JavaScript引擎剖析代码的时刻就会报错。这时候，假如能清楚地表明super的数据类型，就不会报错。
class A{}
class B extends A{
constructor(){
super();
console.log(super.valueOf() instance B)//true
}
}
let b = new B()上面代码中，super.valueOf()表明super是一个对象，因而就不会报错。同时，由于super使得this指向B的实例，所以super.valueOf()返回的是一个B的实例。
末了，由于对象老是继续别的对象的，所以克以在恣意一个对象中，运用super关键字。
var obj = {
toString() {
return "MyObject: " + super.toString();
}
};
obj.toString(); // MyObject: [object Object]类的 prototype 属性和__proto__属性
大多数浏览器ES5完成中，每个对象都有__proto__属性，指向对应的组织函数的prototype属性。Class作为组织函数的语法糖，同时有prototype属性和__proto__属性，因而同时存在两条继续链。
1.子类的__proto__属性，示意组织函数的继续，老是指向父类。
2.子类prototype属性的__proto__属性，示意要领的继续，老是指向父类的prototype属性。
class A {
}
class B extends A{}
B.__proto__ === A //true
B.prototype.__proto__ === A.prototype //true上面代码中，子类B的__proto__属性指向父类A,子类B的Prototype属性的__proto__属性指向父类A的prototype属性。
如许的效果是由于，类的继续是根据下面的形式完成。
class A{}
class B{}
//B的实例继续A的实例
Object.setPrototypeOf(B.prototype,A.prototype);
//B继续A的静态属性
Object.setPrototypeOf(B,A);
const b = new B();对象的扩大一章给出过Object.setPrototypeOf要领的完成。
Object.setPrototypeOf = function(obj,proto){
obj.__proto__ = proto;
return obj;
}因而，就获得了上面的效果
Object.setPrototypeOf(B.prototype,A.prototype);
//等同于
B.prototype.__proto__ = A.prototype;
Object.setPrototypeOf(B,A);
//等同于
B.__proto__ = A;这两条继续链，能够如许明白：作为一个对象，子类B的原型（__proto__属性）是父类A；作为一个组织函数，子类B的原型对象是父类的原型对象（prototype属性）的实例。
