

首页  思维导图  详情



暑期带你不走偏快速学习 JavaScript 高级特性

2021-07-29 12:02:08   1  举报





AI智能生成

前端学习必备，暑期带你不走偏快速学习 JavaScript 高级特性

模板活动

暑期生活

暑期技能

暑假攻略

模版推荐

作者其他创作

大纲/内容

构造函数和原型对象

面向编程介绍

1. 面向过程

面向过程：凡是都是亲力亲为,所有代码都要自己写,每一步都要很清楚,注重的是过程

2. 面向对象

执行者成为指挥者,只要找到对象,然后然对象做相关的事情,注重的是结果

面向对象特性

封装性

就是代码的封装,把一些特征和行为封装在对象中

继承性

通过原型来实现继承

多态性

同一个对象表现出不同的类型

对象

具体特指的某个事物,有特征(属性)和行为(方法),对象可以看成是一坨无序属性的集合

创建读对象三种方式

字面量

调用系统构造函数

自定义构造函数

构造函数中的成员

1. 静态成员

在构造函数本身上添加的成元素称为为静态成员，只能由构造函数本身来访问

2. 实例成员

在构造函数内部创建的对象成员称为实例成员，只能够实例化对象来访问

new() 做了几件事

1. 申请空间存储对象

2. 把this设置当前的对象

3. 执行构造函数里面的代码，给这个新对象添加属性和方法

4. 返回这个对象

构造函数引来的问题

1. 通过定义构造函数,来创建对象,对象调用的方法不是同一个方法

2. 它是自己开辟了一块空间指向了自己那块空间的的方法

3. 解决办法：通过原型来解决-----&gt;数据共享，节省内存空间，作用之一

原型

为什么使用原型？

什么是原型？

构造函数中有一个属性prototype,是原型,程序员使用的

实例对象中有一个属性__proto__,是原型,浏览器使用的,不是很标准的

实例对象中的__proto__指向的就是该实例对象中的构造函数中的prototype

构造函数中的prototype里面的属性或者方法,可以直接通过实例对象调用

原型的作用

数据共享，节省内存空间

实现继承，还是节省内存空间

构造函数和原型

构造函数原型 prototype

1. 数通过原型分配的函数是所有对象所共享的

2. 我们可以把那些不变的方法，直接定义在 prototype 对象上，这样所有对象的实例就可以共享这些方法

3. 原型作用：数据共享，节省内存空间，可以实现继承

constructor构造函数

1. 构造器指向的是：原型对象所在的构造函数

2. 如果我们修改了原来的原型对象,给原型对象赋值的是一个对象,则必须手动的利用constructor指回原来的构造函数

实例对象原型__proto__

1. 实例对象可以使用构造函数prototype 原型对象的属性和方法，就是因为对象有 __ proto__ 原型的存在。

2. 它是一个非标准属性，因此实际开发中，不可以使用这个属性，它只是内部指向原型对象 prototype

原型链

是一种关系,实例对象和原型对象之间的关系,关系是通过原型(__proto__)来联系的

JavaScript 的成员查找机制

① 当访问一个对象的属性（包括方法）时，首先查找这个对象自身有没有该属性。

② 如果没有就查找它的原型（也就是 proto 指向的 prototype 原型对象）

③ 如果还没有就查找原型对象的原型（Object的原型对象）

④ 依此类推一直找到 Object 为止（null）

⑤ proto 对象原型的意义就在于为对象成员查找机制提供一个方向，或者说一条路线

继承

1. call()

2. 借用构造函数继承属性

3. 借用原型对象继承父构造函数方法

三者之间的关系

构造函数和实例对象和原型对象之间的关系

1. 构造函数可以实例化对象

2. 构造函数中有一个属性叫prototype，是构造函数的原型对象

3. 构造函数的原型( prototype )中有一个constructor构造器，这个构造器指向的就是自己所在的原型对象所在的构造函数

4. 实例对象的原型对象( __proto__)指向的是该构造函数的原型对象

5. 构造函数的原型对象( prototype )中的方法是可以被实例对象直接访问的

高阶函数

满足两个条件的都可以叫做高阶函数

1. 函数作为参数传递时(回调函数)

2. 函数作为返回值时

函数的角色

函数的声明

function() {}

函数表达式

var fn = function() {

函数也是对象

1. 函数是对象,对象不一定是函数

2. 对象中有__proto__原型,是对象

3. 函数中有prototype原型,是对象

4. 如果一个东西里面有prototype,也有__proto__,说明是函数,也是对象

5. 所有函数实际上都是Function构造函数创建出来的实例对象

6. 所有函数都是Function 的实例

实例对象和构造函数之间有没有直接关系？

没有

而真正的实例对象和原型对象有关系,实例对象和原

型对象之间的关系叫原型链,这种关系通过__proto__

严格模式

1. 什么是严格模式？

2. 开启严格模式

3. 严格模式中变化

变量规定

严格模式下this指向问题

函数变化

获取某个对象的数据类型

1. tyof 变量返回值：数据类型

2. 对象 instanceof 数据类型返回值:布尔

3. Object.prototype.toString.call(对象)获取某个对象的数据类型

作用域和作用域链及预解析

作用域

就是变量的使用范围，js中没有块级作用域，一对括号中定义的变量,这个变量可以在大括号外面使用访问

作用域链

变量的使用，从里向外，层层的搜索，搜索到了就可以直接使用了

预解析

- 就是浏览器在解析代码之前，把声明的函数的声明和函数提升到该作用域的最上面

贪吃蛇项目

原型继承

目的：解决代码重复,造成的代码冗余

1. call()

调用这个函数,并且修改函数运行时this指向

2. 借用构造函数继承父构造函数属性

核心原理：通过 call() 把父构造函数的 this 指向改变成了子构造函数

中的 this ，这样就可以实现子构造函数继承父构造函数的属性

缺陷：父级类别的方法不能继承

3. 借用原型对象继承父构造函数的原型方法

①改变子原型对象的指向一定要放在前面，让子类的 prototype = new Father()

②本质上是将子原型对象的指向改变到了实例化父类的

对象中,添加的方法都是在实例化父类对象当中

③ 需要手动的改变：将子构造函数原型的构造器的指向改为自己

组合继承

原型继承+借用构造函数继承

为内置对象方法

有的时候内置对象，不满足我们开发需求

可以为内置对象原型添加方法

JS执行机制

JS执行队列

同步和异步

同步任务：同步任务都在主线程上执行，形成一个执行栈。

异步任务： JS 的异步是通过回调函数实现的

JS执行机制

1. 先执行执行栈中的同步任务

2. 异步任务（回调函数）放入任务队列中

3. 一旦执行栈中所有同步任务完成，系统就会按次序读取任务队列中的

一旦执行栈中所有同步任务完成，系统就会按次序读取任务队列中的

真数组和伪数组的区别

真数组的长度是可变

伪数组的长度不可变

真数组可以使用数组中的方法

伪数组不可以使用数组中的方法,forEach

改变this指向和闭包

改变函数内this指向

1. call(arg)

使用场景

2. apply( [arg1,arg2] )

使用场景

call() 和 apply

相同点

都可以改变函数内this指向

都是立即调用函数

不同点

参数传递时不同

3. bind(arg)

特点

bind() 方法不会调用函数，但是能改变函数内部 this 指向

返回的是原函数改变this之后的函数

使用场景

闭包

闭包概念

函数中有另一个函数,或者是一个函数中有另一个对象,里面的函数或者是对象都可以使用外面函数中定义的变量或者数据,此时形成了闭包

1. 什么是闭包？

闭包( closure )指有权访问另一个函数作用域中的变量的函数

简单理解,一个作用域可以访问另一个函数内部的据变量

2. 闭包的作用

缓存数据,延长作用域链,同时也是缺点,函数中的变量不能及时的释放

3. 闭包的缺点

4. 在 chrome 中调试闭包

沙箱

概念

递归

如果一个函数内部可以调用其本身，那么这个函数就是递归函数

简单理解：函数内部自己调用自己，这个函数就是递归函数

注意事项：在函数中调用自己,一定要有个判断条件不在调用,要不然就是死循环

深拷贝和浅拷贝

1. 浅拷贝

就是一个对象的地址给另一个对象

他们指向相同,两个对象之间有共同的属性或者方法,都可以使用

2. ES6新增的浅拷贝语法糖

3. 深拷贝

拷贝的是一个完整的对象,是在自己的内存空间中,直指向的并不是同一个对象

正则表达式

元字符

限定符

创建正则表达式对象

1、通过构造函数创建正则表达式对象

2、字面量创建正则表达式对象

简写方式：/[0-9]/.test()

正版则表达式验证

reg.test( &apos;value&apos; )

参数1:字符串返回值:布尔类型

正则表达式其他方法使用

正则表达式中：g 表示的是全局模式匹配

正则表达式中：i 表示的是忽略大小写

ES6

ES6 中的类和对象

1. 类

在 ES6 中新增了类的概念，可以使用关键字声明一个类，之后这个类来实例化对象

类抽象了对象公共的部分,它泛指某一类( class ),对象特指某一个,通过类来实例化具体的对象

2. 创建类

class Person { }

var xm = new Person();

3. 类 constructor 构造函数

constructor() 方法是类的构造函数

用于传递参数,返回实例对象

通过 new 命令生成对象实例时,自动调用该方法

如果没有显示定义, 类内部会自动给我们创建一个constructor()

注意事项

4. 类添加方法

注意：方法之间不能加逗号分隔，同时方法不需要添加 function 关键字。

类的继承

类的继承: class Son extends Father {// 子类继承父类 }

1. super关键字

super 关键字用于访问和调用对象父类上的函数

可以调用父类的构造函数,也可以调用父类中的普通函数

注意事项

2. super调用普通函数

代码

3. 类的注意事项

在 ES6 中类没有变量提升，所以必须先定义类，才能通过类实例化对象

类里面的共有属性和方法一定要加this使用

类里面的this指向问题

constructor 里面的this指向实例对象，方法里面的this指向这个方法的调用者

ES6新增的语法

1. let

2. const

3. var和let和const的区别

4. 解构赋值

5. 箭头函数

6. 剩余参数

内置对象扩展

Set数据结构

ES6 提供了新的数据结构 Set，它类似于数组，但是成员的值都是唯一的，没有重复的值

Set本身是一个构造函数，用来生成 Set 数据结构

1. 实例方法

add(value): 添加某个值，返回 Set 结构本身

delete(value): 删除某个值，返回一个布尔值(找到该值并删除返回true,找不到返回false)

has(value): 返回一个布尔值，表示该值是否为 Set 的成员

clear(): 清除所有成员，没有返回值

2. 遍历

s.forEach(valeu =&gt; console.log(value) )

Set 结构的实例与数组一样，也拥有forEach方法，用于对每个成员执行某种操作，没有返回值

Array扩展方法

1. 扩展运算符（展开语法）

let ary = [1, 2, 3]; //...ary // 被转为数组中的每一项值,以逗号分隔：1, 2, 3

扩展运算符应用数组合并

利用扩展运算符将伪数组转换为真正的数组

2. 构造函数方法：Array.from()

将伪数组或可遍历对象转换为真正的数组

3. 实例方法：find()

4. 实例方法：findIndex()

5. 实例方法： includes() 判断是否包含

String 的扩展方法

1. 模板字符串

可以换行进行拼接

在模板字符串中可以调用函数 ${fn}

拼接模板字符串可以不用 + ,用${变量名}

2. startsWith() 和 endsWith()

startsWith(&apos;值&apos;)：表示参数字符串是否在原字符串的头部，返回布尔值

endsWith(&apos;值&apos;)：表示参数字符串是否在原字符串的尾部，返回布尔值

3. repeat(&apos;Number&apos;)

repeat方法表示将原字符串重复n次，返回一个新字符串。

 Collect

Get Started

前端JavaScript高级语法

 Collect

Get Started

偏线

 Collect

Get Started

Java高级特性

 Collect

Get Started

随便走





0 条评论

下一页