类class
1. ES6中class的用法
ES6 提供了更接近传统语言的写法,引入了 Class(类)这个概念,作为对象的模板。通过class
关键字,可以定义类。
ES6 的class
可以看作只是一个语法糖,它的绝大部分功能,ES5 都可以做到,新的class
写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。
1.1 . 复习之前模拟的类
之前用函数模拟类
function Person(name, age) {
this.name = name;
this.age = age
}
Person.prototype = {
showName() {
return 'my name is ' + this.name
},
showAge() {
return 'my age is ' + this.age
}
}
let person = new Person('dou', 18)
console.log(person.showName())
console.log(person.showAge())
也可以将新增的方法放在一个对象里合并到原型上
function Person(name,age){
this.name = name;
this.age = age;
}
Object.assign(Person.prototype,{
showName(){
return `我的名字是:${this.name}`;
},
showAge(){
return `我的名字是:${this.age}`;
}
})
let p1 = new Person("wuwei",18);
console.log(p1.showName());
console.log(p1.showAge());
这个写法无非代码更优雅一点,无非都是在原型上加东西
1.2 ES 6 变形的类Class
class Person {
// 构造方法,创建对象会自动执行
constructor(name, age) {
this.name = name;
this.age = age
}
// 以下是构造函数原型上的方法
showName() {
return 'my name is ' + this.name
}
showAge() {
return 'my name is ' + this.age
}
}
// new 方法创建新对象
let person = new Person('dou', 18);
console.log(person.showName())
console.log(person.showAge())
2. constructor
constructor
方法是类的默认方法,通过new
命令生成对象实例时,自动调用该方法。一个类必须有constructor
方法,如果没有显式定义,一个空的constructor
方法会被默认添加。
class Fn {
}
// 等同于
class Fn {
constructor() {}
}
constructor
方法默认返回实例对象(即this
),完全可以指定返回另外一个对象。
class Foo {
constructor() {
return Object.create(null);
}
}
new Foo() instanceof Foo
// false
//constructor函数返回一个全新的对象,结果导致实例对象不是Foo类的实例。
3. 类必须使用new调用
类必须使用new
调用,否则会报错。这是它跟普通构造函数的一个主要区别,后者不用new
也可以执行。
class Foo {
constructor() {
return Object.create(null);
}
}
Foo()
// TypeError: Class constructor Foo cannot be invoked without 'new'
4. 方法名字可以是变量,
如果要是用变量,那么就要使用[]的表达式
var aaa = 'wu';
class Person{
constructor(name,age){
this.name = name;
this.age = age;
}
[aaa](){
return `此时属性名是一个变量,就是wu`
}
}
// console.log(typeof Person)
let p1 = new Person("wuwei",18);
console.log(p1.wu()); // 此时不能通过aaa调用函数,aaa是变量,通过wu调用,可以通过[aaa]调用 p1[aaa]();
这里就可以发现属性名可以为表达式
var aa = 'wu';
var bb = 'wei';
var obj = {
[aa + bb]: "无为"
}
5. ES6 class类没有提升和预解析的功能
也就是说如果写法会报错
var p1 = new Person()
console.log(p1);
class Person{
constructor(){
this.name = "aaa"
}
}
但是以前通过ES5 构造函数模拟类是可以变量提升的,因为本身就是函数
// 这种写法构造函数会提升,正常打印一个对象
var p1 = new Person()
console.log(p1);
this.name = "aaa"
}
6. get set
class 里面有两个函数负责取值和存值,用的比较少
取值函数 get 存值函数 set
class Person{
constructor(name,age){
this.name = name;
this.age = age;
}
get aa(){
console.log(`成功获取a的值`)
return this.age;
}
set aa(val){
console.log(`成功设置a的值为${val}`);
this.age = val;
}
}
var p1 = new Person('wuwei',18)
7.静态方法
类相当于实例的原型,所有在类中定义的方法,都会被实例继承。
如果在一个方法前,加上static
关键字,就表示该方法不会被实例继承,而是直接通过类来调用,这就称为“静态方法”。
ES6 明确规定,Class 内部只有静态方法,没有静态属性。
class Person{
constructor(name,age){
this.name = name;
this.age = age;
}
showName(){
return `这是通过构造对象调用方法`;
}
static aaa(){
return `这是静态方法,是通过类来调用的方法`;
}
}
var p1 = new Person('wuwei',18)
console.log(p1.showName);
console.log(Person.aaa());
8. 继承
子类继承父类
8.1 之前的子类继承父类
// 父类
function Student(name, age, number) {
this.name = name;
this.age = age;
this.number = number;
}
Student.prototype.play = function() {
return 'playing games'
}
// 子类
function Dou(name, age, number) {
// 继承父类的属性
Student.call(this, name, age, number);
}
// 继承父类的方法
Dou.prototype = new Student;
// 子类自己的方法
Dou.prototype.read = function() {
return 'reading...'
}
let dou = new Dou('dou', 18, '111')
console.log(dou.play());
console.log(dou.read())
8.2 ES6 类的继承 extends
通过super()扩展自己的属性和方法
// 父类
class Student {
constructor(name, age, number) {
this.name = name;
this.age = age;
this.number = number;
}
play() {
return 'playing games'
}
}
// 子类继承父类
class Dou extends Student {
constructor(name, age, number) {
// 继承父类得的属性
super(name, age, number)
}
// 父类的方法会默认继承
// 子类自己的方法
read() {
return 'reading...'
}
}
let dou = new Dou('dou', 18, '111')
console.log(dou.play());
console.log(dou.read())