1.?什么叫做回調(diào)函數(shù)馍管?
詳情請(qǐng)查看?阮一峰?之ES6?解析 鏈接:https://pan.baidu.com/s/1deSccY 密碼:fohv
答 :直白的說(shuō):就是 函數(shù) 中嵌套另一個(gè) 函數(shù) 形成復(fù)雜的語(yǔ)法結(jié)構(gòu)。在javascript?中薪韩,
函數(shù)也是一種變量可以成為其他函數(shù)的參數(shù)确沸。這里要注意 this 的指向。
官方定義:回調(diào)函數(shù)是一段可執(zhí)行的代碼段俘陷,它作為一個(gè)參數(shù)傳遞給其他的代碼罗捎,其作用是在需要的時(shí)候方便調(diào)用這段(回調(diào)函數(shù))代碼。
2.?回調(diào)函數(shù)特點(diǎn)
2.1? 不會(huì)立刻執(zhí)行, 正如定義中給出的一樣回調(diào)函數(shù)作為代碼片段可以根據(jù)需要在其特定條件下執(zhí)行, 回調(diào)函數(shù)作為參數(shù)傳遞給一個(gè)函數(shù)的時(shí)候拉盾,傳遞的只是函數(shù)的定義并不會(huì)立即執(zhí)行桨菜。
2.2? this,ES6推出了箭頭函數(shù), 箭頭函數(shù)的推出需要在寫(xiě)回調(diào)函數(shù)的時(shí)候格外注意, this 是指向所在函數(shù)的上下文對(duì)象, 如果在在ES6采用箭頭函數(shù)則需要注意 this使用, 箭頭函數(shù)中this并沒(méi)有上下文關(guān)系直說(shuō), 有興趣的可以查看ES6 阮一峰捉偏。
3.? 回調(diào)函數(shù)的好處
3.1 DRY倒得,避免重復(fù)代碼。
3.2 可以將通用的邏輯抽象夭禽。
3.3 業(yè)務(wù)邏輯分離 (it's so beautiful ^-^ ^-^)
3.4 提高代碼可維護(hù)性和可讀性霞掺。
3.5 分離專職的函數(shù)。
js回調(diào)函數(shù)的偉大之處是其他傳統(tǒng)語(yǔ)言所沒(méi)有的, 它可以實(shí)現(xiàn)業(yè)務(wù)邏輯分離, 相當(dāng)于暴露給外界一個(gè)接口, 這一點(diǎn)像極了前后端分離架構(gòu)中的 API 接口設(shè)計(jì)理念
4.? 回調(diào)函數(shù)的缺點(diǎn)
4.1?回調(diào)函數(shù)層級(jí)太多讹躯,使用困難菩彬。
4.2?大量的回調(diào)函數(shù)運(yùn)行,?消耗內(nèi)存潮梯,影響性能骗灶。
4.3?直白的來(lái)說(shuō),就是中看酷麦,不實(shí)用矿卑,能不用,就不用沃饶。
5.? 實(shí)例解析
1.0? //定義主函數(shù)母廷,回調(diào)函數(shù)作為參數(shù)function A(callback) {
? ? callback();?
? ? console.log('我是主函數(shù)');? ? ?
}//定義回調(diào)函數(shù)function B(){
? ? setTimeout("console.log('我是回調(diào)函數(shù)')", 3000);//模仿耗時(shí)操作? }//調(diào)用主函數(shù),將函數(shù)B傳進(jìn)去A(B);//輸出結(jié)果我是主函數(shù)
我是回調(diào)函數(shù)
2.0 //函數(shù)嵌套
functionaddSqua(num1, num2, callback){
??varsum = num1 + num2;
??returncallback(sum);
}
functionsqua(num){
??returnnum*num;
}
let num = addSqua(1, 2, squa);? ?
console.log(num);
//=>9
6.箭頭函數(shù)
箭頭函數(shù)ES6最常用的一個(gè)新特性了糊肤,用它來(lái)寫(xiě)function比原來(lái)的寫(xiě)法要簡(jiǎn)潔清晰很多琴昆,下面的來(lái)源與?阮一峰講解的 es6。?鏈接 :百度云盤ES6資料? 密碼:nd2h? 第70頁(yè)馆揉。
1.0
function (i) { return? i +1; }
//ES5的寫(xiě)法
(i) => i +1
//ES6的寫(xiě)法
2.0
const pipeline = (...funcs) =>
val => funcs.reduce((a, b) => b(a), val);
const plus1 = a => a + 1;
const mult2 = a => a * 2;
const addThenMult = pipeline(plus1, mult2);
addThenMult(5)
// 12
3.0
// ES6
function foo() {
setTimeout(() => {
? console.log('id:', this.id);
????????????}, 100);
?}
// ES5
function foo() {
var _this = this;
setTimeout(function () {
console.log('id:', _this.id);
}, 100);
}
4.0能力提升
請(qǐng)問(wèn)下面的代碼之中有幾個(gè)this业舍?
function foo() {
return () => {
return () => {
return () => {
console.log('id:', this.id);
};
};
};
}
var f = foo.call({id: 1});
var t1 = f.call({id: 2})()(); // id: 1
var t2 = f().call({id: 3})(); // id: 1
var t3 = f()().call({id: 4}); // id: 1
上面代碼之中,只有一個(gè)this,就是函數(shù)foo的this舷暮,所以t1态罪、t2、t3都輸出同樣的結(jié)果下面。因?yàn)樗械膬?nèi)層函數(shù)都是箭頭函數(shù)复颈,都沒(méi)有自己的this,
它們的this其實(shí)都是最外層foo函數(shù)的this沥割。
注意: 由于箭頭函數(shù)沒(méi)有自己的this耗啦,所以當(dāng)然也就不能用call()、apply()机杜、bind()這些方法去改變this的指向帜讲。
詳情請(qǐng)查看?阮一峰?之ES6?解析 鏈接:https://pan.baidu.com/s/1deSccY 密碼:fohv