【JavaScript高階】4、基礎總結深入（函式）
阿新 • • 發佈：2018-12-17
一、函式
1. 什麼是函式?
* 實現特定功能的n條語句的封裝體
* 只有函式是可以執行的，其他型別的資料不能執行
2. 為什麼要用函式?
* 提高程式碼複用
* 便於閱讀交流
3. 如何定義函式?
* 函式宣告
* 表示式
4. 如何呼叫(執行)函式?
* test()：直接呼叫
* obj.test()：通過物件呼叫
* new test()：new呼叫
* test.call/apply(obj)：臨時讓test成為obj的方法進行呼叫
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>04_函式</title> </head> <body> <script type="text/javascript"> /* 編寫程式實現以下功能需求: 1. 根據年齡輸出對應的資訊 2. 如果小於18, 輸出: 未成年, 再等等! 3. 如果大於60, 輸出: 算了吧! 4. 其它, 輸出: 剛好! */ function showInfo(age) { if(age<18){ console.log("未成年, 再等等!"); }else if(age>60){ console.log("算了吧!"); }else { console.log("剛好!"); } } showInfo(17); showInfo(20); showInfo(70); function fn1() { // 函式宣告 console.log("fn1()"); } var fn2 = function () { // 表示式 console.log("fn2()"); }; fn1(); fn2(); var obj ={}; function test() { this.xxx = "hello"; // 這裡this相當於obj } //obj.test(); 不能直接呼叫test()函式, 根本就沒有這個方法 test.call(obj); // 理論上相當於obj.test()，但實際上不能用obj.test() // 可以讓一個函式成為指定任意物件的方法進行呼叫 console.log(obj.xxx); </script> </body> </html>
二、回撥函式
1. 什麼函式才是回撥函式?
1). 你定義的
2). 你沒有調
3). 但最終它執行了(在某個時刻或某個條件下)
2. 常見的回撥函式?
* dom事件回撥函式 ==>發生事件的dom元素
* 定時器回撥函式 ===>window* ajax請求回撥函式(後面講)
* 生命週期回撥函式(後面講)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>05_回撥函式</title> </head> <body> <button id="btn">測試點選事件</button> <script type="text/javascript"> document.getElementById("btn").onclick = function () { // DOM事件回撥函式 alert(this.innerHTML); } //定時器 //延時定時器 //迴圈定時器 setTimeout(function () { // 定時器回撥函式 alert("2秒"+this); },2000); </script> </body> </html>
三、IIFE(立即執行函式表示式)（匿名函式自呼叫）
1. 理解
* 全稱: Immediately-Invoked Function Expression
2. 作用
* 隱藏實現
* 不會汙染外部(全域性)名稱空間
* 用它來編碼js模組
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>06_IIFE</title>
</head>
<body>
<script type="text/javascript">
(function () { // 別名：匿名函式自呼叫
var a = 3
console.log(a + 3) // 6
})()
var a = 4
console.log(a) // 4
;(function () {
var a = 1
function test () {
console.log(++a) // 2
}
window.$ = function () { // 向外暴露一個全域性函式
return {
test: test
}
}
})()
$().test() // 1. $是一個函式 2. $執行後返回的是一個物件
</script>
</body>
</html>四、函式中的this
1. this是什麼?
* 任何函式本質上都是通過某個物件來呼叫的,如果沒有直接指定就是window
* 所有函式內部都有一個變數this
* 它的值是呼叫函式的當前物件
2. 如何確定this的值?
* test(): window
* p.test(): p
* new test(): 新建立的物件
* p.call(obj): obj
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>07_函式中的this</title>
</head>
<body>
<script type="text/javascript">
function Person(color) {
console.log(this)
this.color = color;
this.getColor = function () {
console.log(this)
return this.color;
};
this.setColor = function (color) {
console.log(this)
this.color = color;
};
}
Person("red"); //this是誰? window
var p = new Person("yello"); //this是誰? p
p.getColor(); //this是誰? p
var obj = {};
p.setColor.call(obj, "black"); //this是誰? obj
var test = p.setColor;
test(); //this是誰? window
function fun1() {
function fun2() {
console.log(this);
}
fun2(); //this是誰? window
}
fun1();
</script>
</body>
</html>