Warning: error_log(/data/www/wwwroot/hmttv.cn/caches/error_log.php): failed to open stream: Permission denied in /data/www/wwwroot/hmttv.cn/phpcms/libs/functions/global.func.php on line 537 Warning: error_log(/data/www/wwwroot/hmttv.cn/caches/error_log.php): failed to open stream: Permission denied in /data/www/wwwroot/hmttv.cn/phpcms/libs/functions/global.func.php on line 537
頭函數(shù)是ES6新增的一種函數(shù)簡寫形式。
箭頭函數(shù)的寫法更簡潔,當(dāng)箭頭函數(shù)的函數(shù)體只有一個(gè) `return` 語句時(shí),可以省略 `return` 關(guān)鍵字和方法體的花括號(hào)
當(dāng)參數(shù)只有一個(gè)的時(shí)候可以省略小括號(hào)
箭頭函數(shù)和普通有很多不同,最主要就是改變的了this的指向
箭頭函數(shù)內(nèi)部的this由上下文決定。可以理解為箭頭函數(shù)在定義的時(shí)候this就已經(jīng)確定了。而普通函數(shù)只有在調(diào)用的時(shí)候才指定this。
普通函數(shù),setTimeout的回調(diào)函數(shù)是由window調(diào)用,所以this指向window
箭頭函數(shù),this總是指向詞法作用域,即obj
建函數(shù)還有另外一種非常簡單的語法,并且這種方法通常比函數(shù)表達(dá)式更好。
它被稱為“箭頭函數(shù)”,因?yàn)樗雌饋硐襁@樣:
let func = (arg1, arg2, ..., argN) => expression;
這里創(chuàng)建了一個(gè)函數(shù) func,它接受參數(shù) arg1..argN,然后使用參數(shù)對右側(cè)的 expression 求值并返回其結(jié)果。
換句話說,它是下面這段代碼的更短的版本:
let func = function(arg1, arg2, ..., argN) {
return expression;
};
讓我們來看一個(gè)具體的例子:
let sum = (a, b) => a + b;
/* 這個(gè)箭頭函數(shù)是下面這個(gè)函數(shù)的更短的版本:
let sum = function(a, b) {
return a + b;
};
*/
alert( sum(1, 2) ); // 3
可以看到 (a, b) => a + b 表示一個(gè)函數(shù)接受兩個(gè)名為 a 和 b 的參數(shù)。在執(zhí)行時(shí),它將對表達(dá)式 a + b 求值,并返回計(jì)算結(jié)果。
箭頭函數(shù)可以像函數(shù)表達(dá)式一樣使用。
例如,動(dòng)態(tài)創(chuàng)建一個(gè)函數(shù):
let age = prompt("What is your age?", 18);
let welcome = (age < 18) ?
() => alert('Hello') :
() => alert("Greetings!");
welcome();
一開始,箭頭函數(shù)可能看起來并不熟悉,也不容易讀懂,但一旦我們看習(xí)慣了之后,這種情況很快就會(huì)改變。
箭頭函數(shù)對于簡單的單行行為(action)來說非常方便,尤其是當(dāng)我們懶得打太多字的時(shí)候。
上面的例子從 => 的左側(cè)獲取參數(shù),然后使用參數(shù)計(jì)算右側(cè)表達(dá)式的值。
但有時(shí)我們需要更復(fù)雜一點(diǎn)的東西,比如多行的表達(dá)式或語句。這也是可以做到的,但是我們應(yīng)該用花括號(hào)括起來。然后使用一個(gè)普通的 return 將需要返回的值進(jìn)行返回。
就像這樣:
let sum = (a, b) => { // 花括號(hào)表示開始一個(gè)多行函數(shù)
let result = a + b;
return result; // 如果我們使用了花括號(hào),那么我們需要一個(gè)顯式的 “return”
};
alert( sum(1, 2) ); // 3
更多內(nèi)容
在這里,我們贊揚(yáng)了箭頭函數(shù)的簡潔性。但還不止這些!
箭頭函數(shù)還有其他有趣的特性。
為了更深入地學(xué)習(xí)它們,我們首先需要了解一些 JavaScript 其他方面的知識(shí),因此我們將在后面的 深入理解箭頭函數(shù) 一章中再繼續(xù)研究箭頭函數(shù)。
現(xiàn)在,我們已經(jīng)可以用箭頭函數(shù)進(jìn)行單行行為和回調(diào)了。
對于一行代碼的函數(shù)來說,箭頭函數(shù)是相當(dāng)方便的。它具體有兩種:
用箭頭函數(shù)重寫下面的函數(shù)表達(dá)式:
function ask(question, yes, no) {
if (confirm(question)) yes();
else no();
}
ask(
"Do you agree?",
function() { alert("You agreed."); },
function() { alert("You canceled the execution."); }
);
解決方案
function ask(question, yes, no) {
if (confirm(question)) yes();
else no();
}
ask(
"Do you agree?",
() => alert("You agreed."),
() => alert("You canceled the execution.")
);
是不是看起來精簡多了?
于我們將使用瀏覽器作為我們的演示環(huán)境,讓我們看幾個(gè)與用戶交互的函數(shù):alert,prompt 和confirm。
這個(gè)我們前面已經(jīng)看到過了。它會(huì)顯示一條信息,并等待用戶按下 “OK”。
例如:
alert("Hello");
彈出的這個(gè)帶有信息的小窗口被稱為 模態(tài)窗?!癿odal” 意味著用戶不能與頁面的其他部分(例如點(diǎn)擊其他按鈕等)進(jìn)行交互,直到他們處理完窗口。在上面示例這種情況下 —— 直到用戶點(diǎn)擊“確定”按鈕。
prompt 函數(shù)接收兩個(gè)參數(shù):
result = prompt(title, [default]);
瀏覽器會(huì)顯示一個(gè)帶有文本消息的模態(tài)窗口,還有 input 框和確定/取消按鈕。
title顯示給用戶的文本default可選的第二個(gè)參數(shù),指定 input 框的初始值。
語法中的方括號(hào) [...]
上述語法中 default 周圍的方括號(hào)表示該參數(shù)是可選的,不是必需的。
訪問者可以在提示輸入欄中輸入一些內(nèi)容,然后按“確定”鍵。然后我們在 result 中獲取該文本?;蛘咚麄兛梢园慈∠I或按 Esc 鍵取消輸入,然后我們得到 null 作為 result。
prompt 將返回用戶在 input 框內(nèi)輸入的文本,如果用戶取消了輸入,則返回 null。
舉個(gè)例子:
let age = prompt('How old are you?', 100);
alert(`You are ${age} years old!`); // You are 100 years old!
IE 瀏覽器會(huì)提供默認(rèn)值
第二個(gè)參數(shù)是可選的。但是如果我們不提供的話,Internet Explorer 會(huì)把 "undefined" 插入到 prompt。
我們可以在 Internet Explorer 中運(yùn)行下面這行代碼來看看效果:
let test = prompt("Test");
所以,為了 prompt 在 IE 中有好的效果,我們建議始終提供第二個(gè)參數(shù):
let test = prompt("Test", ''); // <-- 用于 IE 瀏覽器
語法:
result = confirm(question);
confirm 函數(shù)顯示一個(gè)帶有 question 以及確定和取消兩個(gè)按鈕的模態(tài)窗口。
點(diǎn)擊確定返回 true,點(diǎn)擊取消返回 false。
例如:
let isBoss = confirm("Are you the boss?");
alert( isBoss ); // 如果“確定”按鈕被按下,則顯示 true
我們學(xué)習(xí)了與用戶交互的 3 個(gè)瀏覽器的特定函數(shù):
alert顯示信息。prompt顯示信息要求用戶輸入文本。點(diǎn)擊確定返回文本,點(diǎn)擊取消或按下 Esc 鍵返回 null。confirm顯示信息等待用戶點(diǎn)擊確定或取消。點(diǎn)擊確定返回 true,點(diǎn)擊取消或按下 Esc 鍵返回 false。
這些方法都是模態(tài)的:它們暫停腳本的執(zhí)行,并且不允許用戶與該頁面的其余部分進(jìn)行交互,直到窗口被解除。
上述所有方法共有兩個(gè)限制:
這就是簡單的代價(jià)。還有其他一些方法可以顯示更漂亮的窗口,并與用戶進(jìn)行更豐富的交互,但如果“花里胡哨”不是非常重要,那使用本節(jié)講的這些方法也挺好。
重要程度: 4
創(chuàng)建一個(gè)要求用戶輸入 name,并通過瀏覽器窗口對鍵入的內(nèi)容進(jìn)行輸出的 web 頁面。
解決方案
JavaScript 代碼:
let name = prompt("What is your name?", "");
alert(name);
整個(gè)頁面的代碼:
*請認(rèn)真填寫需求信息,我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。