js的中的函數(shù)（三）

2023-07-08 07:44:58 來源：博客園

方法

什么是js的方法？簡單講，綁定到對象的函數(shù)就是方法。

this

在對象的方法中，我們常常使用this關(guān)鍵字。this關(guān)鍵字代表方法所綁定的對象。

var wangqiang = {      name : "wangqiang",      age : 18,      city : "guangzhou",      address : "tianhe",      //綁定到對象的函數(shù)叫方法      getBirth:function(){          let now = new Date();          return now.getFullYear() - this.age;      }  }  wangqiang.getBirth(); //2005  var birth = wangqiang.getBirth;  birth();  //NaN，脫離了綁定的對象。

上述代碼所示，在方法getBirth()內(nèi)部，我們用到了一個(gè)this關(guān)鍵字。這個(gè)關(guān)鍵字指向了綁定的對象，要正確執(zhí)行方法，需要按照 obj.xxx()的方式才能正確地調(diào)用方法，保證方法綁定的對象，this的指向才能正確。

【資料圖】

再看如下代碼：

var lili = {      name : "lili",      age : 12,      city : "beijing",      address : "chaoyang",      getBirth : function(){          let diff = function(year){              //超出了this的作用范圍，this為undefined              return year-this.age;          }          let now = new Date();          console.log(diff(2022));          return now.getFullYear() - this.age;      }  }

在getBirth方法中，我們有定義了一個(gè)匿名函數(shù)。在匿名函數(shù)不能再使用this，因?yàn)檫@時(shí)的this是undefined。我們可以在匿名函數(shù)外部用一個(gè) 變量接收this，在匿名函數(shù)內(nèi)部再使用這個(gè)變量。也就是this對象不能跨越兩層函數(shù)進(jìn)行使用。

var lili = {      name : "lili",      age : 12,      city : "beijing",      address : "chaoyang",      //方法的簡寫      getBirth(){          let that = this;          let diff = function(year){              return year-that.age;          }          let now = new Date();          console.log(diff(2022));          return now.getFullYear() - this.age;      }  }

為此，可以在第一次函數(shù)里用一個(gè)變量that接收this，在第二層函數(shù)里再使用that，從而避免this變量不能跨越兩層的障礙。

apply

函數(shù)通過apply方法，應(yīng)用到對象上。

var xiaoli = {      name : "xiaoli",      age : 12,      city : "beijing",      address : "chaoyang",      birth : getBirth  }    function getBirth(){      let now = new Date();      return now.getFullYear() - this.age;  }  xiaoli.birth();  getBirth.apply(xiaoli,[]);//應(yīng)用到xiaoli對象上，參數(shù)數(shù)組為[]  getBirth();  // Uncaught TypeError

另一個(gè)與apply()類似的方法是call()，唯一區(qū)別是：

apply()把參數(shù)打包成Array再傳入；
call()把參數(shù)按順序傳入。

比如調(diào)用Math.max(3, 5, 4)，分別用apply()和call()實(shí)現(xiàn)如下：

Math.max.apply(null, [3, 5, 4]); // 5  Math.max.call(null, 3, 5, 4); // 5

閉包

在JavaScript中，一個(gè)函數(shù)可以作為另外一個(gè)函數(shù)的參數(shù)進(jìn)行傳遞。同樣地，一個(gè)函數(shù)也可以作為另外一個(gè)函數(shù)的返回值。例如：

function lazy_sum(...rest){      return function sum(){          let reduce = rest.reduce(function(s,x){              return  s += x;          },6);          return reduce;      }  }  var lazy_sum1 = lazy_sum(1,2,4,6);  var lazy_sum2 = lazy_sum(1,2,4,6);  lazy_sum1();  //調(diào)用sum()函數(shù)，返回13  lazy_sum2();  //調(diào)用sum()函數(shù)，返回13  typeof lazy_sum1(); // 返回function  typeof lazy_sum2(); // 返回function  lazy_sum1 == lazy_sum2 // false

上述代碼所示，調(diào)用lazy_sum1和lazy_sum2函數(shù)，它們都返回一個(gè)sum()函數(shù)。雖然返回的名稱相同，但不同于數(shù)值的相等比較，它們并不相等。

看起來作用不大，只是可以延遲調(diào)用而已。再看下邊的例子：

//閉包可以在函數(shù)內(nèi)部封裝一個(gè)變量  function wrap(initial){      initial = initial || 0;      return function inc(){          initial += 1;          return initial;      }  }  var w  = wrap(2);   w();  //返回3  w();  //返回4  w();  //返回5

上述代碼所示，wrap()是一個(gè)函數(shù)，它接收一個(gè)initial作為參數(shù)，這個(gè)函數(shù)的返回值也是一個(gè)函數(shù)，它是inc()。我們將inc()函數(shù)賦值給變量w， w函數(shù)調(diào)用一次返回3。接下來再調(diào)用一次，其內(nèi)部的變量initial已經(jīng)保留了3這個(gè)值，所以這時(shí)的返回值就是4。接下來的每次調(diào)用邏輯都是一致的。這種在函數(shù)中封裝了一個(gè)變量的函數(shù)形成了閉包。這種在函數(shù)中封裝既封裝了變量，又封裝了方法的閉包，是不是有點(diǎn)像Java中的類呢？

閉包

ES6標(biāo)準(zhǔn)新增了一種新的函數(shù)：Arrow Function（箭頭函數(shù)）。為什么叫Arrow Function？因?yàn)樗亩x用的就是一個(gè)箭頭：

x => x * x

使用規(guī)則

上面的箭頭函數(shù)相相當(dāng)于一個(gè)匿名函數(shù)：

function (x) {      return x * x;  }

箭頭函數(shù)簡化了函數(shù)定義。箭頭函數(shù)有兩種格式，一種像上面的，只包含一個(gè)表達(dá)式，連{ ... }和return都省略掉了。還有一種可以包含多條語句，這時(shí)候就不能省略{ ... }和return：

x => {      if (x>0){          return x;      }else{          return -x;      }  }

如果函數(shù)有多個(gè)參數(shù)，需使用括號，參數(shù)之間以逗號隔開

// 兩個(gè)參數(shù):  (x, y) => x * x + y * y          // 無參數(shù):  () => 3.14          // 可變參數(shù):  (x, y, ...rest) => {      var i, sum = x + y;      for (i=0; i < rest.length; i++) {          sum += rest[i];      }      return sum;  }

如果要返回一個(gè)對象，就要注意，如果是單表達(dá)式，這么寫的話會報(bào)錯(cuò)：

// SyntaxError:  x => { foo: x }

表達(dá)式的對象和函數(shù)體的{...}相沖突，需在對象外加上括號：

x => ({foo:x});

前面章節(jié)指出了對象方法上，this使用的注意事項(xiàng)：

var lili = {      name : "lili",      age : 12,      city : "beijing",      address : "chaoyang",      getBirth(){          let diff = function(year){              return year-this.age;  // this指向window或undefined          };          let now = new Date();          return now.getFullYear() - this.age;      }  }

現(xiàn)在，箭頭函數(shù)完全修復(fù)了this的指向，this總是指向詞法作用域，也就是外層調(diào)用者obj：

var lili = {      name : "lili",      age : 12,      city : "beijing",      address : "chaoyang",      getBirth(){          let diff = (year)=>year-this.age;  // this指向lili          let now = new Date();          return now.getFullYear() - this.age;      }  }

文章同時(shí)發(fā)表在：碼農(nóng)編程網(wǎng)歡迎訪問

本節(jié)重點(diǎn)：