【4】JavaScript 基礎深入——函數、回調函數、IIFE、理解this

rollback 發布于2019-08-23 17:16 / 3087人閱讀

摘要：基礎深入函數函數基礎什么是函數實現特定功能的條語句的封裝體只有函數是可以執行的，其它類型的數據不能執行為什么要用函數提高代碼復用便于閱讀交流如何定義函數函數聲明表達式函數聲明表達式如何調用執行函數直接調用通過對象調用調用臨時讓成為的方法進行

JavaScript 基礎深入——函數 函數基礎 什么是函數？

實現特定功能的 n 條語句的封裝體

只有函數是可以執行的，其它類型的數據不能執行

為什么要用函數？

提高代碼復用

便于閱讀交流

如何定義函數？

函數聲明

表達式

function fn1 () { //函數聲明
  console.log("fn1()")
}
var fn2 = function () { //表達式
  console.log("fn2()")
}

如何調用（執行）函數？

test()：直接調用

obj.test()：通過對象調用

new test()：new 調用

test.call/apply(obj)：臨時讓test成為obj的方法進行調用

var obj = {}
function test2 () {
  this.xxx = "atguigu"
}
// obj.test2()  不能直接, 根本就沒有
test2.call(obj) // obj.test2()   // 可以讓一個函數成為指定任意對象的方法進行調用
console.log(obj.xxx) // "atguigu

回調函數 什么函數才是回調函數？

你定義的

你沒有調用

但最終它執行了（在某個時刻或某個條件下）

常見的回調函數

dom 事件回調函數==> 發生事件的dom元素

定時器回調函數 ===> window

ajax 請求回調函數

生命周期回調函數

document.getElementById("btn").onclick = function () { // dom事件回調函數
  alert(this.innerHTML)
}
//定時器
  // 超時定時器
  // 循環定時器
setTimeout(function () { // 定時器回調函數
  alert("到點了"+this)
}, 2000)

IIFE(立即執行函數) 理解

全稱：Immediately-Invoked Function Expression

作用

隱藏實現

不會污染外部（全局）命名空間

用它來編碼js模塊

;(function () { //匿名函數自調用
  var a = 3
  console.log(a + 3)
})()

var a = 4
console.log(a)

;(function () {
  var a = 1
  function test () {
    console.log(++a)
  }
  window.$ = function () { // 向外暴露一個全局函數
    return {
      test: test
    }
  }
})()

$().test() // 1. $是一個函數 2. $執行后返回的是一個對象

函數中的this this是什么？

任何函數本質上都是通過某個對象來調用的,如果沒有直接指定就是window

所有函數內部都有一個變量this

它的值是調用函數的當前對象

如何確定this的值？

test(): window

p.test(): p

new test(): 新創建的對象

p.call(obj): obj

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();

GPU云服務器云服務器深入理解java基礎深入理解javascript 回調函數添加回調函數

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/104070.html

從 IIFE 聊到 Babel 帶你深入了解前端模塊化發展體系

摘要：我覺得那時他可能并沒有料到，這一規則的制定會讓整個前端發生翻天覆地的變化。前言作為一名前端工程師，每天的清晨，你走進公司的大門，回味著前臺妹子的笑容，摘下耳機，泡上一杯茶，打開 Terminal 進入對應的項目目錄下，然后 npm run start / dev 或者 yarn start / dev 就開始了一天的工作。當你需要進行時間的轉換只需要使用 dayjs 或者 momentj...

tinylcy 2019-05-23 17:33 評論0 收藏0
前端基礎問題整理-JavaScript相關

摘要：請解釋事件代理事件代理也稱為事件委托，利用了事件冒泡。同源指的是協議域名端口相同，同源策略是一種安全協議。目的同源策略保證了用戶的信息安全，瀏覽器打開多個站點時，互相之間不能利用獲取對方站點的敏感信息。請解釋事件代理(event delegation) 事件代理也稱為事件委托，利用了事件冒泡。例如： item1 item2 item3 當頁面li增多時單...

劉東 2019-08-21 14:03 評論0 收藏0
JS學習系列 03 - 函數作用域和塊作用域

摘要：在及之前版本，只擁有函數作用域，沒有塊作用域和除外。函數表達式分為匿名函數表達式和具名函數表達式。但是，由于這個事件回調函數形成了一個覆蓋當前作用域的閉包，引擎極有可能依然保存著這個數據結構取決于具體實現。總結函數是中最常見的作用域單元。在 ES5 及之前版本，JavaScript 只擁有函數作用域，沒有塊作用域（with 和 try...catch 除外）。在 ES6 中，JS 引...

Ashin 2019-08-20 14:28 評論0 收藏0
JavaScript-立即調用函數表達式（IIFE）

摘要：將匿名函數賦予一個變量，叫函數表達式，這是最常見的函數表達式語法形式。組成這是一個被稱為自執行匿名函數的設計模式，主要包含兩部分。一、函數聲明&函數表達式 1.1 函數聲明 (函數語句) showImg(https://segmentfault.com/img/bVbbqvT?w=278&h=166); （1）使用 function 關鍵字聲明一個函數，再指定一個函數名，叫函數聲明。...

XUI 2019-08-26 11:55 評論0 收藏0