开发者学堂课程【React 入门与实战:class-创建类并通过 constructor 挂载实例属性】学习笔记,与课程紧密联系,让用户快速学习知识。
课程地址:https://developer.aliyun.com/learning/course/585/detail/8093
class-创建类并通过 constructor 挂载实例属性
目录
一、 Class的基本使用
二、使用class关键字来创建对象
三、总结
一、 Class的基本使用
第二种创建组件的方式:使用 class 关键字来创建组件,是 ES6 中的新特性。
在 src 中创建将组件抽离为单独的文件.Js,在其中导入包:
import React from 'react
import ReactDOM from 'react-dom
并且调用 render 函数渲染:
ReactDOM.render(
123
,document.getElementById(‘app’))
在src 下创建 06 class-基本使用.js,在 06 class-基本使用.js中 console.log(ok),在index.js 中导入06,由于 console.log(ok) 没有向外暴露内容,所以在 index.js 中直接给它路径:import’@/’06 class-基本使用,这样就确定了基本结构。
ES6中 class 关键字,是实现面向对象编程的新形式。
范例一:传统的方式面向对象构造函数:
Function person
(){
}
Const p1=new person
()
Console.log(p1)
P1即为 new 出的实例,如果为 p1 提供属性,可以把 name 和 age 分配给 p1,首先在形参处先接收,通过 this 分配相关的属性,具体方法:一、在堆上创建一个空的内存。二、把 name=王多多age=18 挂载到内存上。三、把内存的指针引用交给p1
Function Person (name, age) {//
this.name = name
this.age = age
}
const p1 = newPerson('
王多多’,18)
console.1og(p1)
console.log(p1.name)
console.log(p1.age)
二、使用class关键字来创建对象
范例二:
首先用 class 定义一个类,创建了一个动物类。
class Animal {
constructor(name, age) {//
使用 class 关键字来创建对象,要把属性分配给 a1 ,不能直接使用 this 传递,需要类中的构造器,每一个类中,都有一个构造器,如果没有手动指定构造器,那么可以认为类内部有个隐形的空构造器,类似于 constructor () {},如果手动指定构造器就会把默认的隐形构造器覆盖。构造器相当于传统的方式面向对象中的构造函数。它的作用是每当 new 这个类时,必然会优先执行构造器中的代码。在构造器中,通过 this 分配的属性称为实例属性。
this.name = name
this.age = age
}
}
const al = new Animal('
大黄’,3)
console.log(a1)
三、总结
总结用法:class 类名加”{}”,其中,内部设置构造器,在 new 时传参数,形参处再进行接收,通过 this 分配给 new 出的实例。
在范例一中,访问 p1.name 和 p1.age 是通过实例进行访问的,所以 p1 的 name 和 age 属性被称为实例属性,通过 new 出的实例访问到的属性叫做实例属性。在范例二的构造器中通过 this 分配的属性也可以叫做实例属性。
以上通过简单的代码演示了如何创建一个类,并且在 new 这个类时给它提供一些参数,这些参数当作实例属性挂载给了每一个实例。