基础JavaScript知识点

228 阅读4分钟

JS基础知识图谱

一. 从几道题说起

思路:考点==>不变应万变==>题目到知识再到题目

  • JS中使用typeof能得到哪些类型?
    • 考点:JS变量类型
  • 何时使用===何时使用== ?
    • 考点:强制类型转换
  • window.onload和DOMContentLoaded的区别?
    • 考点:浏览器渲染过程
  • 用JS创建10个a标签,点击时候弹出来对应的序号
    • 考点:作用域,闭包
  • 手写节流和防抖
    • 考点:性能,体验优化
  • 简述如何实现一个模块加载器,并实现类似require.js的基本功能
    • 考点:JS模块化
  • 实现数组的随机排序
    • 考点:JS基础算法

二.JS基础知识

1.变量类型和变量计算

属性很多的情况会占用很大内存,引入引用类型

null相当于定义了一个空指针,空引用类型,所以是一个object

typeof 只能详细判断出值类型,引用类型只能区分object和function

何时可能会发生类型转换

100转化成字符串100, 0 '' null undefined都转化成false

空字符串转化成false

window.abc是false

1.1解题

除了上图中jquery推荐写法用==,其它全部用===

引用类型为了节省内存空间,值修改相互干预

2.原型和原型链

所有引用类型都有构造函数

都可以扩展a属性 __proto__等

实例都具有的__proto__等于(指向)构造函数的prototype

通过构造函数,函数的原型链,this指向这个对象本身

三个属性 name printname alertname

遍历对象属性时候,hasOwnProperty 验证是否是自身属性,否则为原型链中的属性

JS为了避免死循环,最上面是null,Object中有toString

2.1 解题

  • 原型继承实例
    • 写一个封装dom查询的例子
    • return this 可以保证每次返回 然后链式调用

JQuery也是用此种链式调用

3.作用域和闭包

执行上下文

执行第一行之前,把变量声明和函数声明拿出来占位,没有赋值

fn拿出来最上面,执行时候,里面的声明,this argument拿出来放最上面占位

会提前声明 var a = undefined

var fn1 = undefined // 函数表达式

fn()这个不是undefined,声明了函数体, function fn () { ... } 直接全部提上声明 // 函数声明

函数是function fn(){ ... } 形式定义的,直接提上顶部,this为window,arguments值为传入值, var age = undefined 变量提升。

this

作为构造函数执行,this就是传入参数 作为对象属性执行,this就是对象本身 作为普通函数执行,this就是window

name 是'zhangsan' this是call传入第一个参数

apply是把后面参数当成数组传入,this还是第一个参数

函数声明不能用.bind,所以会报错,函数表达式才能.bind

作用域

if(true){...} name和在外面声明一样,没有块作用域

自由变量:当前作用域没有定义的变量

作用域说的是定义声明时的作用域,而不是执行时的作用域

自由变量向父级作用域找,作用域链就是向外寻找

闭包

a是自由变量,执行f1()时候 找的作用域是F1的作用域 而不是全局作用域,所以是100

和执行时的作用域没有关系,只和声明时的作用域有关系,这就是所谓的闭包。

3.1 解题

十个标签创建,但是每次点击都是10

i是自由变量,不确定何时点击,点击时,父作用域的i早就变成了10

立即执行函数,作为函数作用域的一个变量

每次点击都有一个作用域,每次点击生成一个i值

判断是否第一次传入

变量放在外部容易被篡改

4.异步和单线程

100, 300, 200

同步会阻塞后面的代码执行

事件绑定,什么时候发生 (点击) 未知

img.src图片加载 onload事件

JS之所以异步是因为单线程

时间到了,请求返回了结果,事件触发,执行异步

4.1 解题

5. 其他知识点

日期和Math

前端中主要用来清除缓存

数组和对象的API

5.1 解题

三. JS-Web-API

1. DOM

XML HTML

每个dom节点都有style属性,className属性

property是有关JS的属性,x是obj的property,nodeName是p的property

get获取 set设置,Attribute是有关文档标签的属性

2. BOM

浏览器对象模型

3. 事件

通用事件绑定

a标签会跳页,阻止默认行为,然后才会alert

事件冒泡

只有p1是激活,阻止冒泡,取消的绑定在body上

代理(冒泡的应用)

不知何时新增,直接绑定在div1上,监听div1,但是target可以知道是在哪触发,绑定一次就好,不用每次都绑

使用代理的情况,事件触发的源头是a标签,使用this,用call,传入this

4. AJAX

XMLHttpRequest

跨域

script可以绕过跨域的限制

存储

cookie要参与通信不能太大

sessionStorage通信结束就结束.localStorage不会