本片绪论
- 1，简单理解call、apply、bind区别和用法
- 2，函数柯里化
- 3，event loop
1，简单理解call、apply、bind区别和用法
三者共同点都是改变this指向的方法，除了箭头函数都可以运行call、bind、apply，他们都是函数的方法，都只能用于非箭头函数。
区别在于传参方式不同。
fn.call([this], param1, param2, ....) // 改变fn中的this，把fn立即执行
fn.apply([this], [param1, param2, ....])
fn.bind([this])(param1, param2, ....) // 改变fn中的this，fn并不立即执行
const xiaowang = {
nick: '小王'
}
const xiaoma = {
nick: '小马'
}
const xiaoguo = {
nick: '小郭'
}
function Hi(msg, msg1) {
return `${this.nick}, ${msg}---${msg1}`
}
Hi.call(xiaowang, '你好', '哈哈哈哈') // 小王, 你好---哈哈哈哈
Hi.apply(xiaoma, ['你吃了吗？', '啊啊啊啊']) // 小马, 你吃了吗？---啊啊啊啊
Hi.bind(xiaoguo)('锅盖', '来打我啊') // 小郭, 锅盖---来打我啊
2，函数柯里化
柯里化：就是把多个参数的函数改为一个参数的函数，并且返回新函数的技术。
其思想事JS预处理思想，降低通用型，提高适用性。
经典的例子：
const add = (a, b) => a + b;
console.log(add(2, 3)) // 5
柯里化后：
function add (a) {
return function(b) {
return a + b
}
}
// 或者es6的箭头函数语法
let add = a => b => a + b;
let add1 = add(2)
console.log(add1(10)) // 12
es6写法中n个连续箭头组成的函数实际上就是柯里化了n-1次
也就是连续箭头函数就是多次柯里化函数的es6写法
let test = x => y => z => k => x + y + z + k
console.log(test(1)(2)(3)(4))//10
柯里化后的函数,将第一个参数变量通过闭包存在了函数里面,然后原来需要n个参数的函数变成只需要n-1个参数的函数了。
3,event loop
- 1，一开始整个脚本作为一个宏任务执行
- 2，执行过程中同步代码直接执行，宏任务进入宏任务队列，微任务进入微任务队列
- 3，当前宏任务执行完出队，检查微任务列表，有则依次执行，直到全部执行完
- 4，执行浏览器UI线程的渲染工作
- 5，检查是否有web worker任务，有则执行
- 6，执行完本轮的宏任务，回到2，依次循环，直到宏任务和微任务队列都为空。
微任务：MutationObserver、Promise.then()或reject()、Promise为基础开发的其它技术，比如fetch API、V8的垃圾回收过程、Node独有的process.nextTick。
宏任务包括：script、script 、setTimeout、setInterval 、setImmediate 、I/O 、UI rendering
网友评论