javascript基礎(chǔ)-函數(shù)

QLQ 發(fā)布于2019-08-22 10:57 / 705人閱讀

摘要：在函數(shù)內(nèi)部定義的匿名函數(shù)的作用域鏈中，不包含外部函數(shù)的活動(dòng)對(duì)象。在執(zhí)行完畢以后，其執(zhí)行環(huán)境的作用域鏈被銷毀，但是其活動(dòng)對(duì)象不會(huì)被銷毀，因?yàn)槟涿瘮?shù)的作用域鏈中仍然引用著這個(gè)活動(dòng)對(duì)象，直到匿名函數(shù)執(zhí)行完畢后，才一起被銷毀。

函數(shù)表達(dá)式和函數(shù)聲明

函數(shù)聲明:function 函數(shù)名稱 (參數(shù)：可選){ 函數(shù)體 }

函數(shù)表達(dá)式：function 函數(shù)名稱（可選）(參數(shù)：可選){ 函數(shù)體 }
函數(shù)聲明只能出現(xiàn)在程序或函數(shù)體內(nèi)。從語(yǔ)法上講，它們不能出現(xiàn)在Block（塊）（{ ... }）中。表達(dá)式和聲明存在著十分微妙的差別，函數(shù)聲明會(huì)在任何表達(dá)式被解析和求值之前先被解析和求值。無(wú)論變量在函數(shù)內(nèi)何處聲明，在代碼執(zhí)行階段，變量都會(huì)在提到函數(shù)開始執(zhí)行之前被聲明，而函數(shù)聲明發(fā)生在更早的階段。

    var foo;
    if (true) {
       foo = function (){ console.log(1); };
    }else {
       foo = function (){ console.log(2); };
    }
    foo(); // 1

先聲明foo變量，在代碼處理的第一步，按照程序執(zhí)行順序，創(chuàng)建函數(shù)表達(dá)式并賦值給foo。
    if (true) {
       function foo(){ console.log(1); }
    }else {
       function foo(){ console.log(2); }
    }
    foo(); // 2

基于Gecko的瀏覽器 //1
函數(shù)聲明在代碼處理的第一步。function foo(){ console.log(2); }會(huì)覆蓋前面的操作。

  alert(sum(10,10));    //20
  function sum(num1, num2){
      return num1 + num2;
  }        
  alert(sum(10,10));    //causes an error
  var sum = function(num1, num2){
      return num1 + num2;
  };
  //變量sum的聲明還是放在第一步處理

命名函數(shù)表達(dá)式：var bar = function foo(){};需要注意的地方：這個(gè)名字只在新定義的函數(shù)作用域內(nèi)有效（IE9以前版本的IE版本中）。命名函數(shù)表達(dá)式方便調(diào)試。

    var f = function foo(){
      return typeof foo; // foo是在內(nèi)部作用域內(nèi)有效
    };
    // foo在外部用于是不可見的
    typeof foo; // "undefined"       IE5-IE8中 " function"
    f(); // "function"

調(diào)用模式

方法調(diào)用模式
當(dāng)一個(gè)函數(shù)保存為對(duì)象的一個(gè)屬性時(shí)，我們稱它為方法。當(dāng)一個(gè)方法被調(diào)用的時(shí)候，this被綁定到該對(duì)象。如果調(diào)用表達(dá)式包含一個(gè)提取屬性的動(dòng)作xxx.xxx，那么它就是被當(dāng)做方法來(lái)調(diào)用的。

函數(shù)調(diào)用模式
this被綁定到全局對(duì)象。

構(gòu)造器調(diào)用模式
this被綁定到創(chuàng)建的新對(duì)象。

apply調(diào)用模式
apply允許我們選擇this的值，方法接受兩個(gè)參數(shù)，第一個(gè)是要綁定this的值，第二個(gè)是參數(shù)數(shù)值。第一個(gè)參數(shù)為null，undefined將會(huì)被替換成全局對(duì)象。嚴(yán)格模式use strict的時(shí)候不會(huì)被替換。

作用域

很多現(xiàn)代語(yǔ)言都推薦延遲聲明變量，js中推薦在函數(shù)體的頂部聲明函數(shù)中可能用到的所有變量。
JScript的Bug

例1：函數(shù)表達(dá)式的標(biāo)示符泄露到外部作用域
typeof g; // "function"
var f = function g(){};
IE9已經(jīng)修復(fù)

例2：將命名函數(shù)表達(dá)式同時(shí)當(dāng)作函數(shù)聲明和函數(shù)表達(dá)式
typeof g; // "function"
var f = function g(){};

函數(shù)聲明會(huì)優(yōu)先于任何表達(dá)式被解析，上面的例子展示的是JScript實(shí)際上是把命名函數(shù)表達(dá)式當(dāng)成函數(shù)聲明了，因?yàn)樗趯?shí)際聲明之前就解析了g

匿名函數(shù)

匿名函數(shù)中this 一般指向window對(duì)象
XXXX.prototype.__XXX = function(){} 不是匿名函數(shù)

閉包

在編寫遞歸函數(shù)時(shí)，使用arguments.callee (但是es5嚴(yán)格模式下會(huì)報(bào)錯(cuò))比使用函數(shù)名安全。
函數(shù)中的變量對(duì)象就是活動(dòng)對(duì)象。
無(wú)論什么時(shí)候在函數(shù)內(nèi)部訪問一個(gè)變量時(shí)，就會(huì)從作用域鏈中搜索相應(yīng)變量。一般來(lái)講，當(dāng)函數(shù)執(zhí)行完畢后局部活動(dòng)對(duì)象將被銷毀。但是閉包情況有所不同。

在createComparisonFunction()函數(shù)內(nèi)部定義的匿名函數(shù)的作用域鏈中，不包含外部函數(shù)createComparisonFunction()的活動(dòng)對(duì)象。
var compare = createComparisonFunction("name");
var result = compare(obj1, obj2);
createComparisonFunction()在執(zhí)行完畢以后，其執(zhí)行環(huán)境的作用域鏈被銷毀，但是其活動(dòng)對(duì)象不會(huì)被銷毀，因?yàn)槟涿瘮?shù)的作用域鏈中仍然引用著這個(gè)活動(dòng)對(duì)象，直到匿名函數(shù)執(zhí)行完畢后，才一起被銷毀。閉包會(huì)攜帶包含他的函數(shù)的作用域，占用內(nèi)存較多。

閉包與變量

閉包只能取得包含函數(shù)中變量最后保存的值。
function createFunctions() {
  var result = new Array();
  for (var i = 0; i < 10; i++) {
      result[i] = function() {
          return i;
      };
  }  
  return result;
}
var funcs = createFunctions();
//every function outputs 10
for (var i = 0; i < funcs.length; i++) {
  document.write(funcs[i]() + "
");
}
使用匿名函數(shù)再添加一層外部函數(shù)，多了一個(gè)閉包使原來(lái)的閉包滿足條件
function createFunctions() {
  var result = new Array();
  for (var i = 0; i < 10; i++) {
      result[i] = function(num) {
          return function() {
              return num;
          };
      }(i);
  }
  return result;
}
var funcs = createFunctions();
//every function outputs 10
for (var i = 0; i < funcs.length; i++) {
  document.write(funcs[i]() + "
");
}

用閉包保存狀態(tài)

閉包直接可以引用傳入的參數(shù)，利用這些被lock住的傳入?yún)?shù)，自執(zhí)行函數(shù)表達(dá)式可以有效地保存狀態(tài)。

// 這個(gè)代碼是錯(cuò)誤的，因?yàn)樽兞縤從來(lái)就沒背locked住
// 相反，當(dāng)循環(huán)執(zhí)行以后，我們?cè)邳c(diǎn)擊的時(shí)候i才獲得數(shù)值
// 因?yàn)檫@個(gè)時(shí)候i操真正獲得值
// 所以說(shuō)無(wú)論點(diǎn)擊那個(gè)連接，最終顯示的都是I am link #10（如果有10個(gè)a元素的話）
var elems = document.getElementsByTagName("a");
for (var i = 0; i < elems.length; i++) {
  elems[i].addEventListener("click", function (e) {
      e.preventDefault();
      alert("I am link #" + i);
  }, "false");

}
// 這個(gè)是可以用的，因?yàn)樗谧詧?zhí)行函數(shù)表達(dá)式閉包內(nèi)部
// i的值作為locked的索引存在，在循環(huán)執(zhí)行結(jié)束以后，盡管最后i的值變成了a元素總數(shù)（例如10）
// 但閉包內(nèi)部的lockedInIndex值是沒有改變，因?yàn)樗呀?jīng)執(zhí)行完畢了
// 所以當(dāng)點(diǎn)擊連接的時(shí)候，結(jié)果是正確的

var elems = document.getElementsByTagName("a");
for (var i = 0; i < elems.length; i++) {
  (function (lockedInIndex) {
      elems[i].addEventListener("click", function (e) {
          e.preventDefault();
          alert("I am link #" + lockedInIndex);
      }, "false");
  })(i);
}

// 你也可以像下面這樣應(yīng)用，在處理函數(shù)那里使用自執(zhí)行函數(shù)表達(dá)式
// 而不是在addEventListener外部
// 但是相對(duì)來(lái)說(shuō)，上面的代碼更具可讀性
var elems = document.getElementsByTagName("a");
for (var i = 0; i < elems.length; i++) {
  elems[i].addEventListener("click", (function (lockedInIndex) {
      return function (e) {
          e.preventDefault();
          alert("I am link #" + lockedInIndex);
      };
  })(i), "false");
}

自執(zhí)行函數(shù)表達(dá)式

利用了閉包的特性，可以避免全局變量

javascript語(yǔ)法中（）內(nèi)部不能包含語(yǔ)句，只能包含表達(dá)式。
(function () { /* code */ } ()); // 推薦使用這個(gè)

GPU云服務(wù)器云服務(wù)器基礎(chǔ)函數(shù) 基礎(chǔ)javascript javascript基礎(chǔ) javascript 函數(shù)

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

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

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

登陸后可評(píng)論

0條評(píng)論

QLQ

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

【11.15-11.21】博客精彩回顧

閱讀 1131·2021-11-24 09:39
騰訊云香港云服務(wù)器怎么購(gòu)買便宜?喲!來(lái)騰訊云海外全球購(gòu)逛一逛唄

閱讀 1434·2021-11-18 13:18
【手把手帶你刷LeetCode】——15.劍指offer之不用加減乘除做加法（位運(yùn)算）

閱讀 2584·2021-11-15 11:38
淺談物聯(lián)網(wǎng)技術(shù)

閱讀 1897·2021-09-26 09:47
主機(jī)域名是什么-主機(jī)域名是哪個(gè)？

閱讀 1716·2021-09-22 15:09
回調(diào)函數(shù)；

閱讀 1694·2021-09-03 10:29
原生JS操作DOM元素的類名class

閱讀 1594·2019-08-29 17:28
http相關(guān)知識(shí)點(diǎn)回顧

閱讀 3018·2019-08-29 16:30

亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

javascript基礎(chǔ)-函數(shù)

相關(guān)文章

基礎(chǔ)鞏固：JavaScript基礎(chǔ)總結(jié)(基本概念篇)

函數(shù) - Javascript語(yǔ)法基礎(chǔ) - Javascript核心

**十步零基礎(chǔ)JavaScript學(xué)習(xí)路徑**

Javascript學(xué)習(xí)總結(jié) - JS基礎(chǔ)系列一

JavaScript基礎(chǔ)知識(shí)

**數(shù)組 - Javascript語(yǔ)法基礎(chǔ) - Javascript核心**

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

0條評(píng)論

QLQ

男|高級(jí)講師

TA的文章

【11.15-11.21】博客精彩回顧

騰訊云香港云服務(wù)器怎么購(gòu)買便宜?喲!來(lái)騰訊云海外全球購(gòu)逛一逛唄

【手把手帶你刷LeetCode】——15.劍指offer之不用加減乘除做加法（位運(yùn)算）

淺談物聯(lián)網(wǎng)技術(shù)

主機(jī)域名是什么-主機(jī)域名是哪個(gè)？

回調(diào)函數(shù)；

原生JS操作DOM元素的類名class

http相關(guān)知識(shí)點(diǎn)回顧

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

javascript基礎(chǔ)-函數(shù)

相關(guān)文章

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

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！