class-创建类并通过 constructor 挂载实例属性|学习笔记

简介: 快速学习 class-创建类并通过 constructor 挂载实例属性

开发者学堂课程【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 这个类时给它提供一些参数,这些参数当作实例属性挂载给了每一个实例。

相关文章
|
4天前
|
搜索推荐
如何在构造函数中为类的实例添加方法?
在实际开发中,要根据具体的场景和需求来选择合适的方式来为类的实例添加方法,以确保代码的可读性、可维护性和性能。
|
3月前
类(Class)和实例(Instance)
【8月更文挑战第29天】类(Class)和实例(Instance)。
37 3
|
存储 JavaScript
如何使用 ref 属性获取子组件实例对象?
如何使用 ref 属性获取子组件实例对象?
144 0
|
Java 开发者
Class 类对象的三种实例化模式|学习笔记
快速学习 Class 类对象的三种实例化模式
174 0
Class 类对象的三种实例化模式|学习笔记
CLASSPATH环境属性
CLASSPATH环境属性自制脑图
69 0
CLASSPATH环境属性
|
JavaScript 前端开发 开发者
使用 class 关键字创建组件|学习笔记
快速学习使用 class 关键字创建组件
108 0
使用 class 关键字创建组件|学习笔记
20、利用class创建对象,防止数据覆盖
20、利用class创建对象,防止数据覆盖
53 0
|
JavaScript
使用class关键字创建组件
一、最基本的组件结构 二、用class关键字创建组件 三、两种创建组件方式的对比
使用class关键字创建组件
|
前端开发 开发者
class-为子类挂载独有的实例属性和实例方法|学习笔记
快速学习 class-为子类挂载独有的实例属性和实例方法
|
前端开发 开发者
class-constructor 构造器中 super 函数的使用说明|学习笔记
快速学习 class-constructor 构造器中 super 函数的使用说明
116 0