react基础学习（一）

Reactjs基础学习（一）

Class的语法

class为语法糖(大概解释下就是class类就是一个构造函数)

特别注意 ***constructor***为类的默认方法，会默认添加的

//定义一个‘类’
class newapp{
	//构造方法
	constructor(es5,es6){
		this.es5 = es5;
		this.es6 = es6;
	}
	//添加方法
	toString()=>{
		return `(${this.es5},${this.es6})`
	}
}
//没有使用语法糖写法
function newapp(es5,es6){
		this.es5 = es5;
		this.es6 = es6;
}
newapp.prototype.toString = function(){
	return `(${this.es5},${this.es6})`
}

使用方法有

//直接new
var newapp = new newapp();

在class类内部是可以使用get和set的

get为设置取值函数

set为设置存值函数

class newapp{
	//构造方法
	constructor(){
	}
	get luo(){
		return 'luoluo';
	}
	set luo(value){
		console.log('取值为'，value)
	}
}

class的属性名可以为表达式（变量）class也可以是表达式

let luo = 'luoluo';
class newapp{
	constructor(){}
	[luo](){}
}

const newapp= class Me {
  getClassName() {
    return Me.name;
  }
}
let inst = new newapp();
inst.getClassName() // Me
Me.name // ReferenceError: Me is not defined
// 可以省略名
const newapp = class{}
// 直接调用

let list = new class{}

静态方法 static

在属性前加上static便不会被继承也就是说通过new 是调用不了该方法的
父类的静态方法可以被子类继承

class newapp{
	static luo(){
		console.log(1)
	}
}

class luoluo extends newapp{}

luoluo.luo // 输出1

子类通过super调用父类的方法

class newapp{
	static luo(){
		console.log(1)
	}
}

class luoluo extends newapp{
	static luo(){
		 return `${super.luo}11` 
	}
}

luoluo.luo // 输出111

属性的值可以写外面

class newapp{
	ses = 0
	get luo(){
		console.log(this.ses)
	}
}