首頁 > web前端 > js教程 > 淺談javascript的call()、apply()、bind()的用法_javascript技巧

淺談javascript的call()、apply()、bind()的用法_javascript技巧

WBOY
發布: 2016-05-16 15:14:36
原創
1011 人瀏覽過

JavaScript中的函數不僅是一種類似Java中方法的語言功能,它還可以作為物件而存在。 本文將要探討JavaScript中函數的一些特殊用法,包括call、apply、bind三個原型方法。
一、函數基礎
JavaScript中的函數是一種類似Java中方法的語言功能,不過它可以獨立於類別來定義。

函數式程式設計:由於JavaScript支援匿名函數,因此可以將函數當作物件來使用, 所以JavaScript不僅支援過程式設計(物件導向也是過程式程式設計的一種),也支援函數式程式設計。
上下文

函數的每次呼叫都會擁有一個特殊值-本次呼叫的上下文(context)-這就是this關鍵字的值。 如果函數掛載在一個物件上,作為物件的屬性,就稱它為物件的方法。當透過這個物件來呼叫函數時,該物件就是此次呼叫的上下文, 也就是該函數的this的值。

要注意,this是一個關鍵字,不是變量,也不是屬性名稱。 JavaScript的語法不允許給this賦值。

函數是一種物件

JavaScript中的函數和Java中的方法或C語言中的函數最大不同在於,JavaScript中的函數也是一種物件。 但這並不意味著,所有的物件都是函數。函數是一種包含了可執行程式碼,並能夠被其他程式碼呼叫的特殊的物件。

和變數不同,關鍵字this沒有作用域的限制,巢狀的函數不會從呼叫它的函數繼承this。 - 如果巢狀函數作為方法調用,其this的值指向調用它的物件。 - 如果巢狀函數作為函數調用,其this的值不是全域物件(非嚴格模式下)就是undefined(嚴格模式下)。

很多人誤以為呼叫巢狀函數時this會指向掉i用外層函數的上下文。如果你想要存取這個外部函數的this值, 需要將this的值保存都在一個變數中,這個變數和內部函數都同在一個作用域內。例如:

var o = {
 m: function() {
  var self = this;
  console.log(this==o); // true
  f();
  
  function f() {
   console.log(this === o); // false,this的值是全局对象或undefined
   console.log(self === o); // true
  }
 }
}
登入後複製

閉包

JavaScript的函數可以嵌套在其他函數中定義,這樣它們就可以存取它們被定義時所處的作用域中的任何變數。 這意味著JavaScript函數構成了一個閉包(closure),它為JavaScript帶來了非常強勁的程式設計能力。

作為值的函數
在JavaScript中,函數不僅是一種語法,也是值,也就是說,可以將函數賦值給變量,儲存在物件的屬性或陣列的元素中, 作為參數傳入另外一個函數等。

bind、call、apply
每一個函數都包含一個prototype屬性,這個屬性是指向一個物件的引用,這個物件稱為「原型物件」。 每一個函數都包含不同的原型物件。當將函數用作建構函數的時候,新建立的物件會從原型物件上繼承屬性。

Function.prototype.call()Function.prototype. >

call()和apply()可以看作為某個物件的方法,透過呼叫方法的形式來間接呼叫函數。 它們的第一個參數是要呼叫函數的母對象,它是呼叫上下文,在函數體內透過this來獲得對它的參考。 apply()方法和call()方法的作用相同,只不過函數傳遞的方式不一樣,它的實參都放入在一個陣列中。

舉個例子,以物件o的方法的形式呼叫函數f(),並傳入兩個參數,可以使用這樣的程式碼:

var o = {};

function f(a, b) {
 return a + b;
}

f.call(o, 1, 2);    // 将函数f作为o的方法,实际上就是重新设置函数f的上下文
f.apply(o, [1, 2]);
登入後複製
再舉一個例子,使用call方法呼叫匿名函數:

在下例中的for迴圈體內,我們建立了一個匿名函數,然後透過呼叫函數的call方法,將每個陣列元素作為指定的this值執行了那個匿名函數。 這個匿名函數的主要目的是為每個數組元素物件添加一個print方法,這個print方法可以列印出各元素在數組中的正確索引號。 當然,這裡不是必須讓陣列元素作為this值傳入那個匿名函數(普通參數就可以),目的是為了示範call的用法。

var animals = [
 {species: 'Lion', name: 'King'},
 {species: 'Whale', name: 'Fail'}
];

for (var i = 0; i < animals.length; i++) {
 (function (i) { 
  this.print = function () { 
   console.log('#' + i + ' ' + this.species + ': ' + this.name); 
  } 
  this.print();
 }).call(animals[i], i);
}

登入後複製

Function.prototype.bind()

bind()是在ES5中新增的方法,從名字可以看出,這個方法的主要作用就是將函數綁定到某個物件。 當在函數f()上呼叫bind()方法併後竄入一個物件o作為參數,這個方法將傳回一個新函數:(以函數呼叫的方式)呼叫新的函數將會將原始的函數f()作為o的方法來呼叫。例如:

function f(y) {
 return this.x + y;
}

var o = {
 x: 1
};

var g = f.bind(o); // 通过调用 g(x) 来调用 o.f(x)
g(2); // 3

登入後複製
其實我們可以輕鬆的實作bind()方法:

// 返回一个函数,通过调用它来调用o中的方法f(),传递它所有的实参
function bind(f, o) {
 if (f.bind) return f.bind(o); // 如果bind()方法存在,使用bind()方法
 else return function () {
  return f.apply(o, arguments);
 }
}

登入後複製

二、函数式编程
JavaScript并非函数式编程语言,但在JavaScript中可以像操控对象一样操控函数,也就是说可以在JavaScript中应用函数式编程技术。

使用函数处理数组

假设有一个数组,数组元素都是数字,我们想要计算这些元素的平均值和标准差。

var data = [1, 1, 3, 5, 5];
var sum = function(x, y) {
 return x + y;
};
var square = function(x) {
 return x * x;
};

var mean = data.reduce(sum)/data.length;
var deviations = data.map(x => x - mean);

登入後複製

var stddev = Math.sqrt(deviations.map(square).reduce(sum)/(data.length - 1));
高阶函数

高阶函数就是操作函数的函数,它接收一个或多个函数作为参数,并返回一个新函数。举个例子:

function not(f) {
 return function () {
  var result = f.apply(this, arguments);
  return !result;
 };
}

// 判断x是否为偶数的函数
var even = function(x) {
 return x % 2 === 0;
};

var odd = not(even);      // 一个新函数,所做的事情和even()相反
[1, 1, 3, 5, 5].every(odd);   // true,每个函数都是奇数

登入後複製

函数not()是个高阶函数,因为它返回一个新的函数,这个新函数将它的实参传入f(),并返回f的返回值的逻辑非。

以上就是关于javascript的call()、apply()、bind()的用法,希望对大家的学习有所帮助。

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板