成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

【4】JavaScript 基礎(chǔ)深入——函數(shù)、回調(diào)函數(shù)、IIFE、理解this

rollback / 3094人閱讀

摘要：基礎(chǔ)深入函數(shù)函數(shù)基礎(chǔ)什么是函數(shù)實(shí)現(xiàn)特定功能的條語(yǔ)句的封裝體只有函數(shù)是可以執(zhí)行的，其它類型的數(shù)據(jù)不能執(zhí)行為什么要用函數(shù)提高代碼復(fù)用便于閱讀交流如何定義函數(shù)函數(shù)聲明表達(dá)式函數(shù)聲明表達(dá)式如何調(diào)用執(zhí)行函數(shù)直接調(diào)用通過對(duì)象調(diào)用調(diào)用臨時(shí)讓成為的方法進(jìn)行

JavaScript 基礎(chǔ)深入——函數(shù) 函數(shù)基礎(chǔ) 什么是函數(shù)？

實(shí)現(xiàn)特定功能的 n 條語(yǔ)句的封裝體

只有函數(shù)是可以執(zhí)行的，其它類型的數(shù)據(jù)不能執(zhí)行

為什么要用函數(shù)？

提高代碼復(fù)用

便于閱讀交流

如何定義函數(shù)？

函數(shù)聲明

表達(dá)式

function fn1 () { //函數(shù)聲明
  console.log("fn1()")
}
var fn2 = function () { //表達(dá)式
  console.log("fn2()")
}
如何調(diào)用（執(zhí)行）函數(shù)？

test()：直接調(diào)用

obj.test()：通過對(duì)象調(diào)用

new test()：new 調(diào)用

test.call/apply(obj)：臨時(shí)讓test成為obj的方法進(jìn)行調(diào)用

var obj = {}
function test2 () {
  this.xxx = "atguigu"
}
// obj.test2()  不能直接, 根本就沒有
test2.call(obj) // obj.test2()   // 可以讓一個(gè)函數(shù)成為指定任意對(duì)象的方法進(jìn)行調(diào)用
console.log(obj.xxx) // "atguigu
回調(diào)函數(shù) 什么函數(shù)才是回調(diào)函數(shù)？

你定義的

你沒有調(diào)用

但最終它執(zhí)行了（在某個(gè)時(shí)刻或某個(gè)條件下）

常見的回調(diào)函數(shù)

dom 事件回調(diào)函數(shù)==> 發(fā)生事件的dom元素

定時(shí)器回調(diào)函數(shù) ===> window

ajax 請(qǐng)求回調(diào)函數(shù)

生命周期回調(diào)函數(shù)

document.getElementById("btn").onclick = function () { // dom事件回調(diào)函數(shù)
  alert(this.innerHTML)
}
//定時(shí)器
  // 超時(shí)定時(shí)器
  // 循環(huán)定時(shí)器
setTimeout(function () { // 定時(shí)器回調(diào)函數(shù)
  alert("到點(diǎn)了"+this)
}, 2000)
IIFE(立即執(zhí)行函數(shù)) 理解

全稱：Immediately-Invoked Function Expression

作用

隱藏實(shí)現(xiàn)

不會(huì)污染外部（全局）命名空間

用它來編碼js模塊

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

var a = 4
console.log(a)

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

$().test() // 1. $是一個(gè)函數(shù) 2. $執(zhí)行后返回的是一個(gè)對(duì)象
函數(shù)中的this this是什么？

任何函數(shù)本質(zhì)上都是通過某個(gè)對(duì)象來調(diào)用的,如果沒有直接指定就是window

所有函數(shù)內(nèi)部都有一個(gè)變量this

它的值是調(diào)用函數(shù)的當(dāng)前對(duì)象

如何確定this的值？

test(): window

p.test(): p

new test(): 新創(chuàng)建的對(duì)象

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是誰(shuí)? window

var p = new Person("yello"); //this是誰(shuí)? p

p.getColor(); //this是誰(shuí)? p

var obj = {};
p.setColor.call(obj, "black"); //this是誰(shuí)? obj

var test = p.setColor;
test(); //this是誰(shuí)? window

function fun1() {
  function fun2() {
    console.log(this);
  }
  fun2(); //this是誰(shuí)? window
}
fun1();

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/104070.html

相關(guān)文章

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

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

    tinylcy 評(píng)論0 收藏0

  • 前端基礎(chǔ)問題整理-JavaScript相關(guān)

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

    劉東 評(píng)論0 收藏0

  • JS學(xué)習(xí)系列 03 - 函數(shù)作用域和塊作用域

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

    Ashin 評(píng)論0 收藏0

  • JavaScript-立即調(diào)用函數(shù)表達(dá)式（IIFE）

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

    XUI 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<