ES6 中的类

一.关于类/class:

类是一种对象的模板，ES6 的 class 可以看作只是一个语法糖，它的绝大
部分功能，ES5 都可以做到，新的 class 写法只是让对象原型的写法更加清晰、更像
面向对象编程的语法而已。

⭐特点：面向对象，具备属性与方
人: Person
属性: name
展示名字: showName
Person.prototype.showName

⭐ES5 原型写法：

function Person(name,age){
this.name=name; //定义属性
 this.age=age;
}
Person.prototype.showName=function(){ 
 return `person's name is ${this.name}`
 }
 let p1 = new Person('King', 33);
 console.log(p1.showName());

⭐ES6 中变形:

class Person{ //构造类
 constructor(name,age){ 
 console.log(`构造函数执行了, ${name}, ${age}`); // 构造方法(函数), 调用
new，自动执行
 }
 }
 console.log(typeof Person); //function
 let p1 = new Person('Strive',18);

同下：

const Person = class{ //将类赋中一个表达式
 constructor(name,age){
 //console.log(`构造函数执行了, ${name}, ${age}`);
 this.name = name;
 this.age = age;
 }
 showName(){
 return `名字为: ${this.name}`;
 }
 showAge(){
 return `年龄: ${this.age}`;
 }
 }

注：构造函数的 prototype 属性，在 ES6 的“类”上面继续存在。事实上，类
的所有方法都定义在类的 prototype 属性上面。

class Point {
 constructor() {
 // ...
 }
 toString() {
 // ...
 }
 toValue() {
 // ...
 } }

等同于

Point.prototype = {
 constructor() {},
 toString() {},
 toValue() {},
};

注意：

1. ES6 里面 class 没有提升功能，必须在定义好了以后再执行。在 ES5，用函数模拟
   可以，默认函数提升
   类没有预解析，必须先定义再使用

 let p1 = new Person();
 console.log(p1.name);
 class Person{
 constructor(){
 this.name ='aaa';
 }
 }
//Cannot access 'Person' before initialization

2. 类必须使用 new 调用，否则会报错。

class Point {
 // ...
}
// 报错
var point = Point(2, 3);
// 正确
var point = new Point(2, 3);

3. 实例的属性除非显式定义在其本身（即定义在 this 对象上），否则都是定义在原型
   上（即定义在 class 上）。

//定义类
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
//彻底理解 JavaScript 原型链（一）—__proto__的默认指向 
https://www.jianshu.com/p/686b61c4a43d

矫正 this:

1. fn.call(this 指向谁, args1, args2…)
2. fn.apply(this 指向谁, [args1, args2…])
3. fn.bind() //只是矫正 this
   eg:10

二：关于类的其它用法

1. 在“类”的内部可以使用 get 和 set 关键字，对某个属性设置存值函数和取值函数，
   拦截该属性的存取行为。

class MyClass {
 constructor() {
 // ...
 }
 get prop() {
 return 'getter';
 }
 set prop(value) {
 console.log('setter: '+value);
 } }
let inst = new MyClass();
inst.prop = 123;
// setter: 123
inst.prop

class 里面取值函数(getter), 存值函数(setter),封装框架时用的，eg:10

2. 静态方法: 所有在类中定义的方法，都会被实例继承。如果在一个方法前，加上
   static 关键字，就表示该方法不会被实例继承，而是直接通过类来调用，这就称为“静态
   方法”。

class Foo {
static classMethod() {
 return 'hello';
 } }
Foo.classMethod() // 'hello'
var foo = new Foo();
foo.classMethod()
// TypeError: foo.classMethod is not a function

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

let person = new class {
 constructor(name) {
 this.name = name;
 }
 sayName() {
 console.log(this.name);
 }
}('张三');

4. 类的继承

//父类
 function Person(name){
 this.name = name;
 }
 Person.prototype.showName = function(){
 return `名字是: ${this.name}`;
 };
 //子类
 function Student(name,skill){
 Person.call(this,name); //继承属性
 this.skill = skill;
 }
 Student.prototype = new Person(); //继承方法

同下↓ ES6

 //父类
 class Person{
 constructor(name){
 this.name = name;
 }
 showName(){
 return `名字为: ${this.name}`;
 }
 }

//子类
 class Student extends Person{//es6 的特色
 }