【ES6系列】Class

ES5 中怎么声明一个类？ES6 如何实现？

ECMAScript 2015 中引入的 JavaScript 类实质上是 JavaScript 现有的基于原型的继承的语法糖。类语法不会为JavaScript引入新的面向对象的继承模型。

// ES5 类的定义和实例化
let Animal = function (type) {
	this.type = type
}

Animal.prototype.eat = function () {
	console.log('I am eat food')
}

let dog = new Animal('dog')
let monkey = new Animal('monkey')
console.log(dog)
console.log(monkey)
monkey.constructor.prototype.eat = function () {
	console.log('eat')
}
dog.eat()
monkey.eat()
// ES5 声明类时，共有的元素放在原型链 prototype 上，构造函数内实例对象可以单独定义的放在构造函数体内，通用的放在原型链上 protytype

// ES6 类的定义的实例化
class Animal {
	constructor(type) { // 构造函数，用来传参
		this.type = type
	}
	eat() {
		console.log('I am eat food')
	}
}

let dog = new Animal('dog')
let monkey = new Animal('monkey')
console.log(dog)
console.log(monkey)
dog.eat()
monkey.eat()

console.log(typeof Animal) // function

二、ES5 中怎样读写一个属性？ES6 如何实现？

ES5 中几乎无法实现属性读写保护。

// ES6 属性读写保护，利用get 和 set 配合闭包实现
let _age = 4
class Animal {
	constructor(type) {
		this.type = type
	}
	get age() { // 只读 --ES6 允许属性放在类的顶层 前面一定要加 get 或 set，使之与方法区别开来
		return _age //闭包实现。 返回值变量名需和访问时的变量名不同
	}
	set age(val) { //   --ES6 允许属性放在类的顶层 前面一定要加 get 或 set，使之与方法区别开来
		if (val < 7 && val > 4) { // 满足该条件可写
			_age = val
		}
	}
	eat() {
		console.log('I am eat food')
	}
}
let dog = new Animal('dog')
console.log(dog.age) // 注意调用方法，此处以属性调用
dog.age = 8
console.log(dog.age) // 注意调用方法，此处以属性调用

三、ES5中怎样操作一个方法？ES6 如何操作？

什么是静态方法？不属于实例，而是属于类。

// ES5 添加静态方法及调用静态方法示例
let Animal = function (type) {
	this.type = type
}

Animal.prototype.eat = function () {
	// this.walk() // 此时this指的是Animal的实例对象，而实例对象上并没有walk方法
	Animal.walk() // 静态方法的引用
	console.log('I am eat food')
}
// ES5 增加静态方法
Animal.walk = function () {
	console.log('I am walking')
}

let dog = new Animal('dog')
dog.eat()
dog.walk() // dog.walk is not a function

// ES6 添加静态方法及调用静态方法示例
class Animal {
	constructor(type) {
		this.type = type
	}
	eat() {
		Animal.walk() // 引用静态方法
		console.log('I am eat food')
	}
	static walk() { // ES6 类的静态方法定义
		console.log('I am walking')
	}
}
let dog = new Animal('dog')
dog.eat()

如果方法依赖于对象的某些属性或方法，也就是说方法内部要引用实例对象的信息，要用类的静态方法，类的静态方法拿不到当前的实例对象。

四、ES5 中怎么继承另一个类？ES6中如何实现？

// ES5 继承
let Animal = function (type) {
	this.type = type
}
Animal.prototype.eat = function () {
	Animal.walk() // 静态方法的引用
	console.log('I am eat food')
}
Animal.walk = function () {
	console.log('I am walking')
}
// 定义子类
let Dog = function () {
	Animal.call(this, 'dog') // 执行/初始化 Animal（父类） 构造函数，不涉及原型型 
	this.run = function () {
		console.log('I can run')
	}
}
// 至此为部分继承，只会继承 Animal 构造函数中的属性和方法
// 继续 将Dog 原型链上的属性和方法指向Animail 以实现完全继承
Dog.prototype = Animal.prototype;

let dog = new Dog('dog')
dog.eat()

// ES6 继承
class Dog extends Animal {
	constructor(type) { // 显式调用构造函数
		super(type)
		this.age = 2 // 如果子类构造函数是空的
	}
}

let dog = new Dog('dog')
dog.eat()