JavaScript类

桃扇骨 2022-12-27 08:52 100阅读 0赞

### JavaScript类 ###

*  1 类声明
 *  2 为什么说它是语法糖
 *  3 类包含的属性和方法
 *   *  3.1 类的构造函数
     *  3.2 类的方法
     *  3.3 类的静态方法
     *  3.4 类的私有方法
     *  3.5 取值函数（getter）和存值函数（setter）
 *  4 类的继承
 *   *  4.1 通过extends实现继承
     *  4.2 super方法
 *  5 其他
 *   *  5.1 方法中的this指向
     *  5.2 区分是否继承了这个类

以前都是通过构造函数function和原型prototype来实现类的效果，在ES6中新增了class关键字用来定义类，使用class关键字定义类的写法更加清晰，更像面向对象的语法。但是可以看作是语法糖，因为它还是构造函数和原型的概念。

# 1 类声明 #

定义类有2中方式，类声明和类表达式：

// 类声明
    class Student { }
    // 类表达式
    const Student = class { }

# 2 为什么说它是语法糖 #

因为类实际上它是一个function，区别在于构造函数是函数作用域，类是块级作用域，类中的方法，都是定义在类的prototype上面，所以文章开头说它还是构造函数和原型的概念：

class Student { 
    	take() { }
    }
    const a = new Student()
    console.log(typeof Student)	// function
    console.log(a.take === Student.prototype.take) // true
    
    // 同等于
    function Student() { }
    Student.prototype.take = function() { }
    const a = new Student()
    console.log(typeof Student)	// function
    console.log(a.take === Student.prototype.take) // true

# 3 类包含的属性和方法 #

类可以包含**构造函数方法、实例方法、获取函数、设置函数和静态类方法**，但这些都不是必需的。空的类定义照样有效。

class Student { 
    	// 实例属性 也可以放在这
    	// b = 1
    	// 静态属性
    	static a = 1
    	// 构造函数
    	constructor() { 
    		// 实例属性 - 也可以放在类的最顶层
    		this.b = 1
    	}
    	// 获取函数
    	get myName() { }
    	// 设置函数
    	set myName() { }
    	// 静态方法 不会被实例继承
    	static show() { }
    	// 方法
    	take() { }
    	// 私有方法
    	_take() { }
    }

## 3.1 类的构造函数 ##

类的构造函数关键字是constructor，它同等于原型中的prototype.constructor。  
如果没有写constructor函数，那么会默认有一个空的constructor函数。

class A { 
    	constructor() { 
    		this.name = '小明'
    	}
    }
    const b = new A()
    b.constructor === A.prototype.constructor // true

当使用new操作符创建实例时，会调用constructor构造函数。

## 3.2 类的方法 ##

class Student { 
    	// 方法
    	take() { }
    }

## 3.3 类的静态方法 ##

跟类的方法一样，只不过前面加上static关键字。  
静态方法不会被实例继承。  
父类的静态方法可以被子类继承。

class A { 
    	// 静态方法
    	static show() { 
    		console.log('hi')
    	}
    }
    class B extends A { }
    const c = new A()
    c.show() // c.show is not a function
    B.show() // hi

## 3.4 类的私有方法 ##

es6中没有提供这个方法，但是通常都是在方法前面加上下划线来表示。

class A { 
    	// 私有方法
    	_show() { 
        	console.log('hi')
      	}
    }

## 3.5 取值函数（getter）和存值函数（setter） ##

在类中有set和get关键词，可以对某个属性设置存值和取值函数，拦截它的存取行为。

class A { 
      constructor () { 
        this.name = '小米'
      }
      get name () { 
        return 'get'
      }
      set name (val) { 
        console.log('set' + val)
      }
    }
    const b = new A()
    b.name // get
    b.name = 123 // set123

# 4 类的继承 #

## 4.1 通过extends实现继承 ##

类的继承通过extends关键字。

class A { 
    	// 静态方法
    	static show() { 
        console.log('hi')
      }
    }
    class B extends A { }

## 4.2 super方法 ##

注意如果子类如果没写constructor构造函数，则会默认有constructor构造函数和super方法，但是如果显性的写了constructor构造函数，那么必须在子类的构造函数中添加super方法，添加之后会调用父类的构造函数并得到父类的属性和方法，如果没有添加super方法则会报ReferenceError错误。

class A { 
      constructor () { 
        this.name = '小米'
      }
    	show() { 
        console.log('hi')
      }
    }
    class B extends A { 
      constructor () { 
      	super() // 如果不写super，则会报ReferenceError错误
      }
    }
    const c = new B()

super方法中也可以传参

class A { 
      constructor (name) { 
        this.name = name
      }
    	show() { 
        console.log('hi')
      }
    }
    class B extends A { 
      constructor () { 
        super('小红')
      }
    }
    const c = new B()
    c.name // 小红

# 5 其他 #

## 5.1 方法中的this指向 ##

类的方法中如果有this，那么它指向的是类的实例。但是如果将它单独拿出来使用那么会报错。

class A { 
      constructor () { 
        this.name = '小米'
      }
      show () { 
        console.log(this.name)
      }
    }
    const b = new A()
    b.show() // 小米
    const {  show } = b // Cannot read property 'name' of undefined

解决办法有2种:

1.  在构造函数中绑定this

class A { 
      constructor () { 
        this.name = '小米'
        this.show = this.show.bind(this)
      }
      show () { 
        console.log(this.name)
      }
    }

1.  使用箭头函数

class A { 
      constructor () { 
        this.name = '小米'
        this.show = () => this
      }
      show () { 
        console.log(this.name)
      }
    }

## 5.2 区分是否继承了这个类 ##

区分是否继承了这个类使用Object.getPrototypeOf函数。

class A { 
      constructor () { 
        this.name = '小米'
      }
    	show() { 
        console.log('hi')
      }
    }
    class B extends A { 
      constructor () { 
        super()
      }
    }
    class C { }
    Object.getPrototypeOf(B) === A // true 是继承的A类
    Object.getPrototypeOf(B) === C // false 没有继承C类