一. Javascript类的定义
JS语法补充
- ES5中定义类
function Person(name, age) {
this.name = name;
this.age = age;
}
var p = new Person("why", 18);
console.log(p.name, p.age);
分析.png
- class ES6开始才有的关键字
- ES6中通过class 创建类
class Person {
// ES6中所有的类可以实现一个构造方法, 名字是固定的, new自动调用, 不能手动调用
constructor(name, age) {
this.name = name;
this.age = age;
}
// 定义方法
running() {
console.log(this.name, this.age, "running");
}
}
const p = new Person("why", 18);
console.log(p.name, p.age);
p.running();
// this绑定题目
const func = p.running;
func();
//1. 能不能正常的调用方法? 可以.
//2. 这里打印的name age是什么? 报错信息
// undefined, 当前的this没有绑定任何东西, 没有绑定也没有隐式绑定
var obj = {
name: "kobe",
age: 40
}
func.call(obj);// call主动绑定this
let func2 = p.running;
//重新给func赋值
func2 = func2.bind(obj);// 明确的绑定obj
// 可以打印, 显示绑定
报错.png
二. JavaScript类的继承
- 面向对象有三大特性: 封装/继承/多态
- 继承: 1. 减少重复的代码 2. 多态的前提
- JavaScript是一种弱类型的语言, 鸭子类型(看起来像是鸭子, 走起来像鸭子, 就是鸭子)
- 不严格的要求传入的类型, 好处是灵活, 坏处是类型不安全
- TypeScript越来越重要, 替代JavaScript的一个原因, 安全
class Person {
constructor(name, age) {
this.name = name;
this.age = age;
}
running() {
console.log("running");
}
}
class Student {
constructor(name, age, sno) {
this.name = name;
this.age = age;
this.sno = sno;
}
}
class Teacher {
constructor(name, age, title) {
this.name = name;
this.age = age;
this.title = title;
}
}
// 重复的代码非常多 => 继承
// 将公共的代码抽取到父类里面
=> 2.0版本, 继承
class Student2 extends Person {
constructor(name, age, sno) {
// 调用父类的构造方法
super(name, age);
this.sno = sno;
}
}
const stu = new Student("why", 18, 110);
console.log(stu.name, stu.age, stu.sno);
stu.running();
class Teacher2 extends Person {
constructor(name, age, title) {
// 子类中是必须初始化父类对象, 不然有问题, 报错, 见图
super(name, age);
this.title = title;
}
}
const stu = new Student("why", 18, 110);
console.log(stu.name, stu.age, stu.sno);
stu.running();
const teacher = new Teacher2("why", 18, 110);
console.log(teacher.name, teacher.age, teacher.title);
teacher.running();
子类中是必须初始化父类对象, 不然有问题.png
- babel -> ES5 语法糖
三. React知识点, 两个案例, 对之前学的东西做个巩固
1. 电影列表
电影列表.png
- 引入依赖, 必须依赖三个东西
- 把三个东西放在本地, 本地引入
<script src="../react/react.development.js"></script>
...
- 编写React代码
<script type="text/babel">
ReactDOM.render(要渲染的东西, document.getElementById("app"));
</script>
- EMT语法, HTML基础知识
- 真是开发中, 先从服务器获取, 存到某一个地方
this.state = {movies: []} - 先写死, 定义一组数据
- for循环生成多个<li>, 多个<li>放到<ul>里面
const liArray = [];
//ES6语法 in拿到的是下表值
for (let movie of this.state.movies) {
liArray.push( <li>{movie}</li>);
}
return (
<div>
<ul>
{liArray}
</ul>
</div>
)
- 还有一种办法, {}里面可以跟的是一个表达式
<ul>
{
}
</ul>
补充: 数组的高阶函数
- map用的特别多, 必须掌握
- names里面追加一个000
const names = ["aaa", "bbb", "ccc"];
// names.map(回调函数, 给前面的回调函数绑定this, 很少用到)
// forEch是做一个遍历 map映射
// 回调函数有3个参数
// 参数1: 执行时的对应元素
// 参数2: 对应的下标值
// 参数3: 完整的数组对象
const newNames = names.map((item, index, array) => {
return item + "000"
})
console.log(newNames);
打印结果.png
-
map函数应用
map函数应用.png
<ul>
{
this.state.miveis.map((item) => {
return <li>{item}</li>
})
}
</ul>
- React的自主性会更强
- v-for 指令
- Vue有一个缺点, 使用的一个模板, 相似的组件不单独抽成一个组件, 不好复用
-
React只需要抽成一个变量, 更灵活, 各有好处
Vue模板.png
2. 计数器案例
计数器.png
-
体验React
-
每次创建都需要先引入三个文件, 比较多的重复的东西 => 搞一个公共的东西
-
之后只要是新创建一个文件快速生成一个代码 => 代码片段, VSCode创建代码片段
image.png
image.png
-
选择html片段
-
规则有点麻烦, 键值对, 描述, 对象, 前缀, body数组双引号写, 手动太麻烦 => 一个网站
转换网站 -
绑定事件<button onClick={.increment}>
increment() {
console.log("+1");
this.
// this是一个正确的this吗? undefined
//=> `{this.increment.bind(this)}`
this.setState({
counter: this.state.counter - 1
})
}
decrement() {
console.log(-1);
}
this绑定.png
- Component里面有个setState
- 快捷键 ctrl + 点击
四. 认识JSX
1. 认识JSX的语法
- 这段变量的声明右侧赋值的标签语法是什么?
// jsx语法, 没有三个引入会报错
const element <h2>Hello World</h2>
ReactDOM.render(element, cocument.getElementById("app"))
报错.png
JSX.png
为什么React选择了JSX?
- 看起来有点奇怪, html + js 融在一起, 不好的编程习惯, 结构要和样式分离, 低耦合 => React的设计哲学♂, all in js
- React认为渲染逻辑本质上与其他的UI逻辑存在内在耦合
-- 比如UI需要绑定事件(button a原生等等)
-- 比如UI中需要展示数据状态, 在某些状态发生改变时, 有需要改变UI - 组合, 放到一个组件, Vue分离了, 看起来很清晰, 不灵活
-
如果是单标签, 必须以/>结尾! 否则报错.
image.png
JSX语法小括号包裹起来任意换行, 看起来更清晰.png
jsx中的注释
- 比较特殊
- HTML
< !-- 注释 --> - jsx:
//
cmd + / 注释被渲染出来了
=>
{js表达式}
{/* 我是一段注释 */}
image.png
JSX嵌入数据
JSX嵌入数据.png
- 在{}中可以正常显示的内容 String Number Array
- 在{}中不能显示(忽略) null undefined Boolean
test1: null,
test2: undefined,
test3: false, - 为什么不显示? React在设计的时候, 真是渲染内容时, 经常做一些判断,
flag: true,三目运算符显示null还需要手动写成空字符串 - 逻辑与 &&
flag && "你好啊" - 如何显示? 转换成字符串
String(null)this.state.test1 + "" - 对象不能作为jsx的子类, 放到jsx中展示
friend: {
name: "kobe",
age: 40
}
JSX嵌入表达式
- 对象的解构 ES6语法
const {firstname, lastname } = this.state; - 运算符表达式
-
三目运算符
image.png
- 进行函数调用
getFullName() {
// 不需要bind, 自己在调用
// hooks不需要this, 社区沸腾
// 很多还是用this, 类组件, 还是需要掌握, 蚂蚁金服开源的
return this.state.firstname + " " + this.state.lastname;
}
ps: this公开课, 面试题的视频, 讲了两三个小时
链接: https://pan.baidu.com/s/1cHkGsDF1xB9mxnsqcmSLAw
提取码: xnws
这个视频里面，前3天讲的this
coderwhy的React核心技术与开发实战课程链接
少年~来做同学呀~.png
网友评论