ES6的类Class基础知识点

Posted 汪培

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了ES6的类Class基础知识点相关的知识，希望对你有一定的参考价值。

原始生成实例对象的方法是通过构造函数：

function Person(name, age) {
  this.name = name;
  this.age = age
}
Person.prototype.sayName = function () {
  console.log(this.name);
}
var person = new Person(‘wang‘, 18);
person.sayName();

　　

ES6引入了类的概念，通过class关键字用来定义类。
// es6
class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  say() {
    console.log(this.name)
  }
}

　　

说明：constructor() {} 为类的构造方法。而this代表实例对象。  constructor之外用来定义方法。注意：方法之间不需要用逗号或是分号分隔。
 
实际上，Person就是就是构造函数的语法糖：
console.log(typeof Person);  // function
console.log(Person === Person.prototype.constructor);  // true

　　

 
注：所有类的自身属性，都定义在constructor里，在constructor之外定义的方法，都是在类的prototype上；
 
和es5的构造函数类的区别：
1. es5的prototype中的属性和方法是可枚举（enumerable）的：
console.log(Object.keys(Person.prototype)); // ["sayName", "name"]

　　

    es6的prototype中的属性和方法是不可枚举的（non-enumerable）的：
console.log(Object.keys(Person.prototype)); // []

　　

2.es6的类的内部，默认使用严格模式，es5不是
3.es6必须使用new调用，否则会报错；es5可以直接用
4.es6不存在变量提升（let变量声明也不会提升），es5因为是普通的函数，所以存在变量提升
 
 
(hasOwnProperty可以用来判断类的属性是否在类自身还是类的原型上)
(由于__proto__并不是js本身拥有，而是浏览器单方面实现的私有属性，因此不建议在开发中使用，替代方法为：Object.getPrototypeOf(person)，参数为实例对象，可以得到实例对象的类的原型： 
console.log(Object.getPrototypeOf(person) === Person.prototype) // true

　　

)
 
注：es6有提案，用来实现私有属性和方法（现有能用的方法是加下划线表示私有属性和方法，或者使用Symbol生成独特的仅供内部使用的属性和方法），即在属性或方法之前加#；
 
this指向问题：
es6类的方法内部如果含有this，则默认指向类的实例。但是，如果将类的方法提取出来用，this将会指向其运行的环境，而不是类的实例。解决方法就是绑定this（.bind(this)）或是使用箭头函数；
例如：
class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  say() {
    console.log(this.name)
  }
}
var person = new Person(‘wang‘, 12);
person.say();
var { say } = person;
say();  // Uncaught TypeError: Cannot read property ‘name‘ of undefined

　　

 
Class的取值（getter）和存值（setter）：
与es5一样，在类的内部可以使用get，set关键字，对某个属性设置存值函数和取值函数，在相应操作中会执行get或set函数： 
class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  say() {
    // console.log(this.name)
  }
  get name() {
    console.log(‘get name‘);
  }
  set name(value) {
    console.log(‘set name = ‘ + value)
  }
}
var person = new Person(‘wang‘, 12);
person.name = ‘wangpei‘;  // set name = wangpei
person.name;  // get name
 
Class可以在内部使用Generator方法
在某个方法之前加上*，就表示该方法是一个Generator函数
 
Class的静态方法
说明：即只能通过类本身来调用，不能在实例化对象中调用。但是可以被子类继承，子类同样不能在实例中调用
注意：和私有方法(即只能在类内部调用，不能通过类本身调用，例如在类的内部定义var a = 1;这个变量a就只能在类内部调用，外部无法使用)的概念区别
注：在es5中，静态方法是直接定义在构造函数自身的方法：
Person.write = function(){}

　　

es6中：需要通过static关键字定义，表示该方法不会被实例继承，但会被子类继承；
class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  say() {
    // console.log(this.name)
  }
  static write() {
    console.log(this.name);
  }
  get name() {
    console.log(‘get name‘);
  }
  set name(value) {
    console.log(‘set name = ‘ + value)
  }
}
var person = new Person(‘wang‘, 12);
Person.write();  // Person
person.write();  // Uncaught TypeError: person.write is not a function

　　

注意：静态方法内部无法访问到类的实例对象的属性和方法。只能访问到类本身的属性和方法
注意：es6规定，Class的内部只有静态方法，没有静态属性，即类的内部不能通过static为属性定义值（static name: ‘wang‘）
 
Class的实例属性：
Class的实例属性也可以写在constructor方法外部，相当于在constructor内部写入this.xxx = xxx;
例: 
class Person {
  sex=33;
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
}
var person = new Person(‘wang‘, 12);
console.log(person.sex);  // 33

　　

注：这个特性是es7的新提案。目前需babel转码器支持，浏览器暂不支持
 
构造函数（非Class）独有的命令：new.target
new.target 命令一般用于构造函数中，用于判断构造函数是怎么调用的；如果构造函数不是通过new调用的，会返回undefined，否则会返回构造函数：如果有子类继承父类，它总是返回子类构造函数;利用这个特性，可以写出不能独立使用，必须继承后才能使用的类（构造函数）
注：只能在构造函数内部使用，不能在构造函数原型上使用（undefined）
例如：
function Person(name, age) {
  console.log(new.target);  // Person函数本身
  this.name = name;
  this.age = age
}
Person.prototype.sayName = function () {
  console.log(new.target);
}
var person = new Person(‘wang‘, 18);
person.sayName();  // undefined

　　

 

Class的继承

语法：
// es6
class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  say() {
    console.log(this.name);
    // console.log(this.name)
  }
  static write() {
    console.log(this.write);
  }
}
var person = new Person(‘wang‘, 12);
person.say();
class Student extends Person {
}
var student = new Student(‘yao‘, 24);
student.say(); // yao
Student.write(); // write函数本身

　　

注：子类的内部如无constructor，则默认会添加constructor()和super()函数；
如子类定义了constructor，则必须同时定义super()方法（否则报错），因为子类没有自己的this对象，而是靠父类继承的this对象，再对其进行加工。如果不调用super方法，子类就得不到this对象；
由此可以理解，super是用来返回父类的实例对象的，然后才能在父类的实例上进行加工，从而构建子类的实例。
因此，子类使用this时，必须在super()之后，此时子类才会拥有父类实例的this对象
例如：
class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  say() {
    console.log(this.name);
    // console.log(this.name)
  }
  static write() {
    console.log(this.write);
  }
}
var person = new Person(‘wang‘, 12);
person.say();
class Student extends Person {
  constructor() {
  }
}
var student = new Student(‘yao‘, 24);  // Uncaught ReferenceError: this is not defined

　　

值得注意的是：
super()虽然返回的是父类的实例对象，但是子类中的this指向的仍是子类，而不是父类。super()相当于Person.prototype.constructor.call(this)
 
super也可以作为对象来使用：（作为函数使用时，只能在constructor()方法中使用）
在普通方法中，super指向父类的原型对象，在静态方法中，super指向父类
例如：
class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  say() {
    console.log(this.name);
    // console.log(this.name)
  }
  static write() {
    console.log(this.write);
  }
}
class Student extends Person {
  constructor() {
    super();
    this.class = 1
    console.log(super.say)
  }
  run() {
    console.log(super.say)
  }
}
var student = new Student(‘yao‘, 24);
student.run(); // function say(){...}

　　

注：作为对象时，不能直接使用super对象，只能使用super上的属性或方法（否则报错：Uncaught SyntaxError: ‘super‘ keyword unexpected here）；因为super指向的是父类的原型对象，因此可以取得父类的原型上的属性或方法，但不能取到父类实例的属性或是方法；
class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  say() {
    console.log(this.name);
    // console.log(this.name)
  }
  static write() {
    console.log(this.write);
  }
}
class Student extends Person {
  constructor() {
    super();
    this.class = 1
  }
  run() {
    console.log(super.say);  // function say(){...}
    console.log(super);  // 报错
    console.log(super.name);  // undefined
  }
  static eat() {
    console.log(super.name);  // Person
  }
}
var student = new Student(‘yao‘, 24);
student.run();
Student.eat();

　　

**注意：es6规定，super()虽然指向的是父类的原型或实例，但是this指向的却是子类，如下：

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  say() {
    console.log(this.name);
  }
}
class Student extends Person {
  constructor() {
    super();
    this.class = 1
    this.name = ‘dong‘
  }
  run() {
    console.log(super.say());  // dong
  }
}
var student = new Student(‘yao‘, 24);
student.run();

　　

 
子类获取父类的方法：
Object.getPrototypeOf(subClass);  // 父类
 
类的prototype属性和__proto__属性
__proto__是指向父类的指针
（1）子类的__proto__,表示构造函数的继承，指向父类
（2）子类prototype属性的 __proto__属性，表示方法的继承，总是指向父类的prototype属性
（3）子类原型的原型，是父类的原型，即子类的__proto__属性的__proto__属性，指向父类实例的__proto__属性。
class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  say() {
  }
}
class Student extends Person {
  constructor() {
    super();
  }
}
console.log(Student.__proto__ === Person);  // true
console.log(Student.prototype === Person);  // false
console.log(Student.prototype.__proto__ === Person.prototype);  // true

　　

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

以上是关于ES6的类Class基础知识点的主要内容，如果未能解决你的问题，请参考以下文章

ES6：Class类的知识补充

ES6----class用法

ES6：Class类的知识补充

ES6中的类

ES6中的类

ES6知识点-class类