前端面试课程笔记
以上方链接内课程内容为主，知识点可能不全面，仅作为自用备忘
Ch3 作用域和闭包
3.1 作用域和自由变量
题目：
- this的不同应用场景，如何取值？
- 手写bind函数
- 实际开发中闭包的应用场景
知识点： - 作用域
- 全局作用域
- 函数作用域
- 块级作用域（ES6新增）
- 自由变量
- 一个变量在当前作用域没有定义，但被是使用了
- 向上级作用域，一层一层依次寻找，直至找到为止
3.2 闭包
- 作用域应用的特殊情况，有两种表现：
- 函数作为参数被传递
- 函数作为返回值被返回
所有的自由变量的查找，是在函数定义的地方，向上级作用域查找，而不是在执行的地方（this相反）。
上图答案是100
上图答案是200
3.3 this
- 作为普通函数
- 使用call apply bind
- 作为对象方法被调用
- 在class方法中调用
- 箭头函数
3.4 问题解答
1.手写bind函数
2.闭包的实际应用场景
- 隐藏数据
- 如何做一个简单的cache工具
3.创建10个a标签 点击弹出序号
上图是错误答案，结果全是alert(10)。因为添加事件监听是点击才会alert，此时i已经循环完毕，都是10。开头let i是在全局作用域，alert（i）会在上级作用域——也就是全局作用域里找，此时i=10。
上图是正确答案：此时alert(i)的i会向上级作用域——也就是这个块级作用域里找i，即aler对应的i（例如1,2,3,4，，，10）。
3.5 知识点小结
- 作用域和自由变量
- 闭包：两种常见方式&自由变量查找规则
- this
3.6 补充-原型中的this
Ch4 异步
4.1 同步和异步的区别
异步和单线程
- JS是单线程语言，只能同时做一件事儿
- 浏览器和node.js已支持JS启动进程，如Web Worker
- JS和DOM渲染共用同一个线程，因为JS可修改DOM
- 遇到等待（网络请求、定时任务）不能卡住
- 需要异步
- 回调callback函数形式
异步和同步
-
基于JS是单线程语言
-
异步不会阻塞代码执行
-
同步会阻塞代码执行
4.2 应用场景
- 网络请求，如ajax图片加载
- 定时任务，如setTimeout
4.3 promise回调地狱 callback hell
Promise
Promise解决回调地狱
function getData(url){
return new Promise((resolve,reject)=>{
$.ajax({
url,
success(data){
resolve(data)
},
error(err){
reject(err)
}
})
})
}
const url1='/data1.json'
const url2='/data2.json'
const url3='/data3.json'
getData(url1).then(data1=>{
console.log(data1)
return getData(url2)
}).then(data2=>{
console.log(data2)
return getData(url3)
}).then(data3=>{
console.log(data3)
}).catch(err=>console.error(err))
4.4 问题解答和总结
1. 手写Promise加载一张图片
function loadImg(src){
const p=new Promise(
(resolve,reject)=>{
const img=document.creatElement('img')
img.onload=()=>{
resolve(img)
}
img.onerror=()=>{
const err=new Error(`图片加载失败${
src}`)
reject(err)
}
img.src=src
}
}
return p
}
const url='xxxx'
const url2='xxxx2'
loadImg(url).then(img=>{
console.log(img.width)
return img //普通对象
}).then(img=>{
console.log(img.height)
}).catch(ex=>console.error(ex))
loadImg(url).then(img=>{
console.log(img.width)
return img //普通对象
}).then(img=>{
console.log(img.height)
return loadImg(url2)//promise实例
}).then(img2=>{
console.log(img2.width)
return img2
}).then(img2=>{
console.log(img2.height)
})
2. setTimeout笔试题
上图答案是1,3,5,4，（1秒钟后–>）2
Ch5 Web-API-DOM
5.1 DOM节点操作
5.2 DOM性能
上图是节省性能消耗的做法，先创建一个文档片段frag，此时还没插入到DOM中。frag.appendChild()。
上图为不太好的做法，DOM操作过于频繁，消耗性能。
Ch6 Web-API-BOM
Ch7 JS-Web-API-事件
7.1 事件绑定和事件冒泡
上图可以阻止点击链接跳转
- 事件冒泡
7.2 事件代理
- 代码简洁
- 减少浏览器内存占用
- 但是，不要滥用
注意：
上图有错误，由于event是箭头函数，箭头函数里this是向上级作用域——也就是window来取值，此时this.innerHTML为空。
2个修改方法：
（1）箭头函数改为function(event){ }
（2）保留箭头函数，但在箭头函数里不用this，而是分别改成
alert(btn1.innerHTML)
alert（event.target.innerHTML）
下图为比较全面的代理绑定
7.3 问题解答
1. 编写一个通用的事件监听函数
2. 描述事件冒泡的流程
- 基于DOM树形结构
- 事件会顺着触发元素网上冒泡
- 应用场景：代理
3. 无限下拉的图片列表，如何监听每个图片的点击
- 事件代理
- 用e.target获取触发元素
- 用matches来判断是否是触发元素
Ch8 Web-API-Ajax
8.1 XMLHttpRequest
手写XMLHttpRequest发一个get请求
8.2 同源策略和跨域
8.3 jsonp和cors
8.4 问题解答
1. 手写一个简易的ajax
复杂一些的写法
const p=new Promise((resolve,reject)=>{
const xhr=new XMLHttpRequest()
xhr.open('GET',url,true)
xhr.onreadystatechange=function(){
if(xhr.readyState===4){
if(xhr.status===200){
resolve(
JSON.parse(xhr.responseText)
)
}else if(xhr.status===404){
reject(new Error('404 not found')
}
}
}
xhr.send(null)
})
return p
}
const url='/data/test.json'
ajax(url)
.then(res=>console.log(res))
.catch(err=>console.error(err))
8.5 ajax的常用插件
- jQuery.ajax
- fetch(https://developer.mozilla.org/zh-CN/docs/Web/API/Fetch_API)
- axios(http://axios-js.com/docs/)
Ch9 存储
9.1 html5存储
