JavaScript(ES6-10)语法详解 —— ES6基础知识【Class类】

Class基础语法

ES5声明一个类

• 定义既带属性，又带通用方法的类

let Animal = function(type) {
	this.type = type;
	this.eat = function() {
		console.log('jack eating')
	}
}
let dog = new Animal('dog');
let monkey = new Animal('monkey');
console.log(dog); // 在属性中即会有type属性,又会有eat函数
console.log(monkey);// 在属性中即会有type属性,又会有eat函数
// 然而eat函数是通用方法,我们并不应该定义在function中

• 定义带有属性的类，并使用原型链的方式声明通用方法

let Animal = function(type) {
	this.type = type;
}
Animal.prototype.eat = function() {
	console.log('jack eat');
}
let dog = new Animal('dog');
let monkey = new Animal('monkey');
console.log(dog); // 在属性中只会有type属性,打开_prototype属性查看原型链会发现eat函数定义在原型链中
console.log(monkey);// 在属性中只会有type属性,打开_prototype属性查看原型链会发现eat函数定义在原型链中
// 此时如果想修改通用方法,可以使用如下方式
monkey.constructor.prototype.eat = function() {
	console.log('changed');
}
// 此时即使是通过monkey修改的,依旧会修改dog原型链中的eat函数,因为他们是同一个Animal原型链

ES6声明一个类

class Animal {
	constructor(type) {
		this.type = type;
	}
	eat() {
		console.log('jack eat');
	}
}
let dog = new Animal('dog');
let monkey = new Animal('monkey');
console.log(dog); // 在属性中只会有type属性,打开_prototype属性查看原型链会发现eat函数定义在原型链中
console.log(monkey);// 在属性中只会有type属性,打开_prototype属性查看原型链会发现eat函数定义在原型链中
// 注意!!
// 在Class中定义function会声明在原型链中,因为没有放在constructor中
console.log(typeof Animal); // Animal查看类型同样是function

Setter&Getter

如何读写属性

未完待续…

Static Methods

如何操作方法

未完待续…

Sub Classes

如何继承一个类

未完待续…

Default Parameters

函数参数的默认值

未完待续…

Rest Parameter

怎么处理不确定参数

未完待续…

Spread Operator

rest参数的逆运算

未完待续…

Arrow Functions

箭头函数

未完待续…