首页  思维导图  详情

前端基础

2022-05-22 15:38:22   34  举报





AI智能生成

前端学习-思维导图

前端

软件开发

作者其他创作

大纲/内容

JavaScirpt

Web API

选择器获取元素

获取body/html元素

事件的三大部分

获取元素绑定事件

innerText/innerHTML

隐藏/显示密码

失去焦点

窗口改变触发

JS的垃圾回收

自动垃圾回收

基础总结

数据结构相关

基本类型
String、Number、boolean、undefined、null、symbol、bigint

对象引用类型
Object、Function、Array

判断方法
typeof：返回一个字符串，表示未经计算的操作数的类型
● 可以判断：undefined、数值、字符串、boolean、function
● 不能判断：null与Object、Object与array

instanceof：判断实例方法，专门判断对象的具体类型
用于检测构造函数的prototype属性是否出现在一个实例对象的原型链上。
简单点说：如果B函数的显示原型对象在A对象的原型链上，返回true，否则返回false

===：比较两个东西的时候，双等会执行类型转换后比较，三等不会类型转换，类型不同直接false

引出问题
1. undefined与null区别
2. 什么时候给变量赋值为null
3. 严格区分变量类型与数据类型
4. ><以及charCodeAt()方法

数据、变量、内存的理解

数据：

内存：

变量：

三者之间的联系：

引出问题
1. 赋值与内存问题
2. 引用变量赋值问题
3. js调用函数传递变量参数，都是值传递！！！
4. JS引擎是如何管理内存的

对象

函数

IIFE自调用函数

二者的第二个括号都是函数的参数

注意：
- 立即执行函数后面有语句，需要在其后补充 `；`
- 作用域不同

this指向

数组创建

字面量

构造函数

1.  构造函数名字首字母要大写
2. 我们构造函数不需要return 就可以返回结果
3.  我们调用构造函数必须使用 new
4. 我们只要new Star() 调用函数就创建一个对象 ldh  {}
5.  我们的属性和方法前面必须添加 this

new

1. new 构造函数可以在内存中创建了一个空的对象
2.  this 就会指向刚才创建的空对象
3. 执行构造函数里面的代码给这个空对象添加属性和方法
4. 返回这个对象

语句分号

正巧参加了2012的Backbone.js conference，现场很多大神也都讨论了这个非常火热的话题。最后大家公认的结论是这样的：
1、加与不加是风格问题，风格争议不需要有个定论。
2、关键的问题在于如何“争论”，处理好冲突，学会组织语言减少争议是最重要的。
3、分号问题在社区内部造成了很多况日持久的口水战，这些口水战是社区的损失……因为大家在这个时候可以写更多的代码带来更多的功能。
4、类似的问题还有AMD的module，有的库选择兼容AMD，有的人不愿意。
5、公认结论是应该尊重作者的选择，不要因为这些风格问题而fork。module loader应该设法绕过这些问题，提供兼容的解决方案。
6、How not to argue about semicolons?Andrew Dupont的Slides在这里，欢迎阅读：http://www.slideshare.net/savethec

作者：田乐
链接：https://www.zhihu.com/question/20298345/answer/14690437
来源：知乎
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

高级部分

很重要

原型

原型对象

原型的种类

显式原型

prototype：显式

隐式原型

__proto__：隐式，其中值都是显式原型的值

原型链（隐式原型链）

常见问题

● 所有函数的__ proto __都是一样的
● 函数现实原型默认值是一个空 Object 实例对象，（Object除外，它的__proto__属性为null）
● 所有函数都是Function函数的实例，包括它自己
● Object的原型对象是原型链的尽头，并且为null

属性问题

● 读取对象的属性是：会自动到原型链中查找
● 设置对象的属性时，不查原型链，如果当前对象没有该属性，会自动设置该值

变量提升与函数提升

示例

执行上下文和执行上下文栈

执行上下文

代码分类

1. 全局代码
2. 局部代码

全局执行上下文

函数执行上下文

执行上下文栈

示例代码

重要

作用域和作用域链

作用域

分类

● 全局作用域
● 函数作用域
● ES6新增块作用域

作用

● 隔离变量
● 不同作用域下同盟变量不会冲突

示例代码

作用域链

JS运行流程

预解析

代码执行

测试代码

在函数内部用var声明变量和不用的区别是很大的：
- 用var声明的是局部变量，在函数外部访问是访问不到的；
- 没var声明的变量是全部变量，在函数外部是可以访问到的。
- 其次带var的声明是不可以被删除的（不具有删除属性），不带var的可以被删除。

- 多个上下级关系的作用域形成的链，它的方向时从内到外
- 查找变量时就是沿着作用域链来查找的

变量查找规则

- 当前作用域下的执行上下文中查找对应的属性，有就返回，否则进入2
- 在上一级作用域的执行上下文中找对应的属性，有返回，没有进3
- 同第二步，知道全局作用域，如果还是找不到就抛出找不到的异常

相关面试题

作用域在函数定义时就已经确认了，而不是函数调用

对象变量不能产生局部作用域

作用域和执行上下文

区别

联系

闭包

预备知识

高阶函数

定义：返回函数的函数：就是一个函数可以接收另一个函数作为参数，或者是返回一个函数------>map、reduce、filter、sort等

同步与异步

JS本身是单线程的任务

示例代码

多线程异步

1.先执行执行栈中的同步任务。
⒉.遇到异步任务时，（回调函数)将其放入任务队列中。
3.一旦执行栈中的所有同步任务执行完毕，系统就会按次序读取任务队列中的异步任务，于是被读取的异步任务结束等待状态，进入执行栈，开始执行。

情况二

异步进程处理

判断异步程序是否执行

由于主线程不断的重复获得任务、执行任务、再获取任务、再执行，所以这种机制被称为事件循环（event loop）

小点点

JS基础知识（小部分）

toString（）：Object对象的方法（顶层全局方法）

函数的方法

call

apply

伪数组（隐含的参数）

不是数组，类数组。即使不定义形参，也可以使用arguments来使用实参，
其中有个属性`callee` 指向使用此（函数）方法的对象。

浏览器执行JS文件会：读取到一行加载一行

定时器

window.setTimeout

window经常忽略

这个调用函数可以直接写函数，或者写函数名或者采取字符串‘函数名（）'三种形式。第三种不推荐

只是执行一次，等到时间到了执行回调函数

回调函数

需要等待时间，时间到了才去调用这个函数，因此称为回调函数。

停止定时器

clearTimeout

clearIntertval

事件监听器

addEventListener

setInterval

反复调用一个函数

location

子主题

跳转、重载方法

navigator

获取用户当前浏览器的信息（设备类型啥的）

history

PC网页特效

偏移量：offset

拖动模糊动态框

1、点击弹出层，模态框和遮挡层就会显示出来display:block;
2、点击关闭按钮，模态框和遮挡层就会隐藏起来display:none;
3、在页面中拖拽的原理︰鼠标按下并且移动，之后松开鼠标
4、触发事件是鼠标按下mousedown，鼠标移动mousemove鼠标松开mouseup
5、拖拽过程:鼠标移动过程中，获得最新的值赋值给模态框的left和top值，这样模态框可以跟着鼠标走了
6、鼠标按下触发的事件源是最上面一行，就是id 为title
7、鼠标的坐标减去鼠标在盒子内的坐标, 才是模态框真正的位置。
8、鼠标按下，我们要得到鼠标在盒子的坐标。

可视区：client

滚动系列：scroll

冒泡

mouseover

经历自身的盒子会触发，经历子盒子会重复触发

mouseenter

只是经历自身的盒子才会触发，经历子盒子不会重复触发

JQuery

$ (document) .ready ( function () {
. /此处是页面DOM加载完成的入口
} );
1．等着DOM结构渲染完毕即可执行内部代码，不必等到所有外部资源加载完成，jQuery帮我们完成了封装。2．相当于原生js 中的DOMContentLoaded。
3.不同于原生js 中的load事件是等页面文档、外部的js文件、css文件、图片加载完毕才执行内部代码。

$ 和 JQuery一样

Vue

变量

等价于innertext

vue中被：标明的属性，写入属性内容时，单引号内的内容被识别为字符串，如果被两层嵌套的话内部的引号内容识别为字符串。

1.blue不被""包裹就会提示找不到变量 -->
2.blue被""包裹就会、（因为本身就定义为了字符串）渲染为字符串
3.必须双引号嵌套单引号，或者双引号嵌套单引号，否则配对会错误

绑定样式

数组

子主题

常见命令

注意点

key