ES6之Class

ES6之Class

推荐地址：http://es6.ruanyifeng.com/#docs/class

1、Class 的基本语法

1.1、简介

传统的javascript中只有对象，没有类的概念。它是基于原型的面向对象语言。原型对象特点就是将自身的属性共享给新对象。

JavaScript 语言中，生成实例对象的传统方法是通过构造函数。下面是一个例子。

function Point(x, y) {
  this.x = x;
  this.y = y;
}

Point.prototype.toString = function () {
  return '(' + this.x + ', ' + this.y + ')';
};

var p = new Point(5,7);//这里是new一个实例化对象，把参数1和参数2传到函数里。

用 ES6 的class改写，就是下面这样。

class Point {//声明一个类名叫Point，在class前面不需要function
  constructor(x, y) {//constructor这是一个构造方法
    this.x = x;//这里的this关键字代表实例对象
    this.y = y;
  }//两个方法之间不能用逗号分隔，要不会报错


  toString() {
    return '(' + this.x + ', ' + this.y + ')';
  }
}

1.2、 constructor 构造方法

constructor方法是一个特殊的方法，用来创建并初始化一个对象。在一个class中只能有一个命名为constructor的特殊方法，如果包含多个将会报错。

constructor中可以通过super关键字，调用父类的constructor方法。

1.3、实例属性和实例方法

class People{
	// 构造方法
	constructor(name,age,sex) {
		console.log("这是构造方法输出.......");
		// 实例属性
		this.name = name;
		this.age = age;
		this.sex = sex; 
	}
	static p =1;
	// 实例方法
	like(a){
		console.log("People like eat......"+a);
	}
	
	think(b){
		console.log("People want to be happy... "+b)
	}
}

// 实例化对象
var p1 = new People('limei',20,'女');
p1.like(1);

console.log(p1.name);//limei
console.log(p1.age);//20
console.log(p1.sex);//女

var p2 = new People('lilei',22,'男');
p2.think(2);

console.log(p2.name);//lilei
console.log(p2.age);//22
console.log(p2.sex);//男

实例属性除了定义在constructor()方法里面的this上面，也可以定义在类的最顶层。

1.4、静态属性和静态方法

静态属性指的是 Class 本身的属性，即Class.propName，而不是定义在实例对象（this）上的属性。

class Foo {
}

Foo.prop = 1;
Foo.prop // 1

目前，只有这种写法可行，因为 ES6 明确规定，Class 内部只有静态方法，没有静态属性。现在有一个提案提供了类的静态属性，写法是在实例属性法的前面，加上static关键字。

// 老写法
class Foo {
  // ...
}
Foo.prop = 1;

// 新写法
class Foo {
  static prop = 1;
}

2、Class 的继承

2.1、简介

Class 可以通过extends关键字实现继承，这比 ES5 的通过修改原型链实现继承，要清晰和方便很多。

2.2、this关键字

class中的this指向实例时的对象。

this表示当前对象：

• this.属性 区别成员变量和局部变量
• this.() 调用本类的某个方法
• this() 表示调用本类构造方法，只能用在构造方法的第一行语句。
• this关键字只能出现在非static修饰的代码中

2.2、super关键字

关键字super用于调用父类相应的方法，这是相较于原型继承的一个好处

super表示父类对象：

• super.属性 表示父类对象中的成员变量
• super.方法()表示父类对象中定义的方法
• super() 表示调用父类构造方法
  可以指定参数，比如super(“Tom”,23);
  任何一个构造方法的第一行默认是super();
  可以写上，如果未写，会隐式调用super();
• super()只能在构造方法的第一行使用。

this()和super()都只能在构造的第一行出现，所以只能选择其一。写了this()就不会隐式调用super()。

这就是我对 ECMAscript 6 中Class的知识总结，更多详情知识可以参考文章最开头的网址链接