暑期带你不走偏快速学习 JavaScript 高级特性
2021-07-29 12:02:08 1 举报AI智能生成
前端学习必备，暑期带你不走偏快速学习 JavaScript 高级特性
作者其他创作
大纲/内容
1. 面向过程
封装性
通过原型来实现继承
继承性
同一个对象表现出不同的类型
多态性
面向对象特性
对象
2. 面向对象
面向编程介绍
字面量
调用系统构造函数
自定义构造函数
创建读对象三种方式
在构造函数本身上添加的成元素称为为静态成员，只能由构造函数本身来访问
1. 静态成员
在构造函数内部创建的对象成员称为实例成员，只能够实例化对象来访问
2. 实例成员
构造函数中的成员
1. 申请空间存储对象
2. 把this设置当前的对象
3. 执行构造函数里面的代码，给这个新对象添加属性和方法
4. 返回这个对象
new() 做了几件事
2. 它是自己开辟了一块空间指向了自己那块空间的的方法
3. 解决办法：通过原型来解决----->数据共享，节省内存空间，作用之一
构造函数引来的问题
为什么使用原型？
实例对象中的__proto__指向的就是该实例对象中的构造函数中的prototype
什么是原型？
数据共享，节省内存空间
实现继承，还是节省内存空间
原型的作用
原型
1. 数通过原型分配的函数是所有对象所共享的
2. 我们可以把那些不变的方法，直接定义在 prototype 对象上，这样所有对象的实例就可以共享这些方法
3. 原型作用：数据共享，节省内存空间，可以实现继承
构造函数原型 prototype
1. 构造器指向的是：原型对象所在的构造函数
constructor构造函数
1. 实例对象可以使用构造函数prototype 原型对象的属性和方法，就是因为对象有 __ proto__ 原型的存在。
2. 它是一个非标准属性， 因此实际开发中，不可以使用这个属性，它只是内部指向原型对象 prototype
实例对象原型__proto__
原型链
① 当访问一个对象的属性（包括方法）时，首先查找这个对象自身有没有该属性。
② 如果没有就查找它的原型（也就是 proto 指向的 prototype 原型对象）
③ 如果还没有就查找原型对象的原型（Object的原型对象）
④ 依此类推一直找到 Object 为止（null）
⑤ proto 对象原型的意义就在于为对象成员查找机制提供一个方向，或者说一条路线
JavaScript 的成员查找机制
1. call()
2. 借用构造函数继承属性
3. 借用原型对象继承父构造函数方法
继承
构造函数和原型
构造函数和实例对象和原型对象之间的关系
1. 构造函数可以实例化对象
2. 构造函数中有一个属性叫prototype，是构造函数的原型对象
3. 构造函数的原型( prototype )中有一个constructor构造器，这个构造器指向的就是自己所在的原型对象所在的构造函数
4. 实例对象的原型对象( __proto__)指向的是该构造函数的原型对象
5. 构造函数的原型对象( prototype )中的方法是可以被实例对象直接访问的
三者之间的关系
构造函数和原型对象
满足两个条件的都可以叫做高阶函数
1. 函数作为参数传递时(回调函数)
2. 函数作为返回值时
高阶函数
function() {}
函数的声明
var fn = function() {
函数表达式
函数的角色
5. 所有函数实际上都是Function构造函数创建出来的实例对象
6. 所有函数都是Function 的实例
函数也是对象
没有
实例对象和构造函数之间有没有直接关系？
概要
1. 什么是严格模式？
2. 开启严格模式
变量规定
严格模式下this指向问题
函数变化
3. 严格模式中变化
严格模式
1. tyof 变量 返回值：数据类型
2. 对象 instanceof 数据类型 返回值:布尔
3. Object.prototype.toString.call(对象)获取某个对象的数据类型
获取某个对象的数据类型
作用域
变量的使用，从里向外，层层的搜索，搜索到了就可以直接使用了
作用域链
- 就是浏览器在解析代码之前，把声明的函数的声明和函数提升到该作用域的最上面
预解析
作用域和作用域链及预解析
贪吃蛇项目
核心原理：通过 call() 把父构造函数的 this 指向改变成了子构造函数
中的 this ，这样就可以实现子构造函数继承父构造函数的属性
缺陷：父级类别的方法不能继承
2. 借用构造函数继承父构造函数属性
①改变子原型对象的指向一定要放在前面，让子类的 prototype = new Father()
②本质上是将 子原型对象的指向 改变到了实例化父类的
③ 需要手动的改变： 将子构造函数原型的构造器的指向改为 自己
3. 借用原型对象继承父构造函数的原型方法
原型继承+借用构造函数继承
组合继承
原型继承
有的时候内置对象，不满足我们开发需求
可以为内置对象原型添加方法
为内置对象方法
JS执行队列
同步任务：同步任务都在主线程上执行，形成一个执行栈。
异步任务： JS 的异步是通过回调函数实现的
同步和异步
1. 先执行执行栈中的同步任务
2. 异步任务（回调函数）放入任务队列中
3. 一旦执行栈中所有同步任务完成，系统就会按次序读取任务队列中的
一旦执行栈中所有同步任务完成，系统就会按次序读取任务队列中的
JS执行机制
真数组的长度是可变
伪数组的长度不可变
真数组可以使用数组中的方法
真数组和伪数组的区别
使用场景
1. call(arg)
都可以改变函数内this指向
都是立即调用函数
相同点
参数传递时不同
不同点
call() 和 apply
bind() 方法不会调用函数，但是能改变函数内部 this 指向
返回的是原函数改变this之后的函数
特点
3. bind(arg)
改变函数内this指向
闭包概念
闭包( closure )指有权访问另一个函数作用域中的变量的函数
1. 什么是闭包？
2. 闭包的作用
3. 闭包的缺点
4. 在 chrome 中调试闭包
闭包
概念
沙箱
如果一个函数内部可以调用其本身，那么这个函数就是递归函数
简单理解：函数内部自己调用自己，这个函数就是递归函数
递归
就是一个对象的地址给另一个对象
1. 浅拷贝
2. ES6新增的浅拷贝语法糖
3. 深拷贝
深拷贝和浅拷贝
元字符
限定符
1、通过构造函数创建正则表达式对象
2、字面量创建正则表达式对象
简写方式：/[0-9]/.test()
创建正则表达式对象
reg.test( 'value' )
参数1:字符串 返回值:布尔类型
正版则表达式验证
正则表达式中：g 表示的是全局模式匹配
正则表达式中：i 表示的是忽略大小写
正则表达式其他方法使用
正则表达式
改变this指向和闭包
在 ES6 中新增了类的概念，可以使用关键字声明一个类，之后这个类来实例化对象
1. 类
class Person { }
var xm = new Person();
2. 创建类
constructor() 方法是类的构造函数
注意事项
3. 类 constructor 构造函数
注意： 方法之间不能加逗号分隔，同时方法不需要添加 function 关键字。
4. 类添加方法
ES6 中的类和对象
类的继承: class Son extends Father {// 子类继承父类 }
super 关键字用于访问和调用对象父类上的函数
1. super关键字
代码
2. super调用普通函数
在 ES6 中类没有变量提升，所以必须先定义类，才能通过类实例化对象
类里面的共有属性和方法一定要加this使用
类里面的this指向问题
constructor 里面的this指向实例对象，方法里面的this指向这个方法的调用者
3. 类的注意事项
类的继承
1. let
2. const
3. var和let和const的区别
4. 解构赋值
5. 箭头函数
6. 剩余参数
ES6新增的语法
ES6 提供了新的数据结构 Set，它类似于数组，但是成员的值都是唯一的，没有重复的值
Set本身是一个构造函数，用来生成 Set 数据结构
add(value): 添加某个值，返回 Set 结构本身
has(value): 返回一个布尔值，表示该值是否为 Set 的成员
clear(): 清除所有成员，没有返回值
1. 实例方法
s.forEach(valeu => console.log(value) )
Set 结构的实例与数组一样，也拥有forEach方法，用于对每个成员执行某种操作，没有返回值
2. 遍历
Set数据结构
扩展运算符应用数组合并
利用扩展运算符将伪数组转换为真正的数组
1. 扩展运算符（展开语法）
将伪数组或可遍历对象转换为真正的数组
2. 构造函数方法：Array.from()
3. 实例方法：find()
4. 实例方法：findIndex()
5. 实例方法： includes() 判断是否包含
Array扩展方法
可以换行进行拼接
在模板字符串中可以调用函数 ${fn}
1. 模板字符串
startsWith('值')：表示参数字符串是否在原字符串的头部，返回布尔值
endsWith('值')：表示参数字符串是否在原字符串的尾部，返回布尔值
2. startsWith() 和 endsWith()
repeat方法表示将原字符串重复n次，返回一个新字符串。
3. repeat('Number')
String 的扩展方法
内置对象扩展
ES6
快速学习 JS 高级特性
0 条评论
回复 删除
下一页
