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类