react学习笔记1--class的用法和继承
之前或多或少的看过一些react的代码，也自己写了一些demo，会用一些简单的语法，最近疫情闲在家中，打算系统的学习一下，在此记录一些学习笔记。
关于class写法
相比于ES5中通过构造函数生成实例对象，ES6 提供了更接近传统语言的写法，引入了 Class（类）这个概念，作为对象的模板。通过class关键字，可以定义类。
在此之前，我们通常的构造函数的写法
function Person(name, age){
this.name = name
this.age = age
}
Person.staticAttribute = '构造函数的【静态属性/静态方法】，不可被new的对象访问'
Person.prototype = {
say: function(){
console.log('通过new出来的对象可以访问到的属性叫做【实例属性/实例方法】', this.name, this.age)
}
}
var xiaoming = new Person('小明', 18)
console.log(xiaoming)
console.log(xiaoming.staticAttribute)
xiaoming.say()
打印出来的结果
在写构造函数的时候，通常会涉及到【构造函数】、【静态属性】、【实例属性/实例方法】、【实例对象】这些东西。
这里用class语法来实现一次上面的功能。
class Person {
constructor (name, age) { // 当我们不写constructor时会有一个默认的constructor空函数
this.name = name
this.age = gae
}
// 声明静态属性用static
static staticAttribute = '构造函数的【静态属性/静态方法】，不可被new的对象访问'
static staticFunction = function () {
console.log('我是静态方法')
}
// 这里声明【实例属性/实例方法】就简单了很多
say() {
console.log('通过new出来的对象可以访问到的属性叫做【实例属性/实例方法】', this.name, this.age)
}
}
这里打印出Person和他的prototype
打印结果
再来new出class定义的构造函数
var xiaoming = new Person('小明', 18)
console.log(xiaoming)
console.log(xiaoming.staticAttribute)
xiaoming.say()
打印结果
class被称作语法糖，其原理还是使用构造函数来实现的
关于extends继承
写react使用最多的一个方法就是class xxx extends xxx{}
这里涉及到了继承的写法
class Person {
constructor(name, age){
this.name = name
this.age = age
// 这里的super写法等价于上面的两行语句
// super(name, age)
// super()函数不传参数时会执行
// this.name = undefiend;
// this.age = undefiend;
}
}
class Man extends Person {
manFun() {
console.log('Man独有的【实例方法】')
}
}
var he = new Man('辣个男人', 777)
console.log(he)
打印的结果
总结：class ... extends ...语句是ES6的语法糖，简化了构造函数的生成，也简化了继承父类的流程，同时对于代码的可读性也有了提升。
其实我们在写react组件时就是在写一个构造函数，面向对象的优势在react里体现的很明显，比较适合业务的设计模式也会在react中发挥的很好。
发表评论 (审核通过后显示评论)：