iT邦幫忙

2023 iThome 鐵人賽

DAY 17
0
自我挑戰組

我的日常學習雜記與筆記整理系列 第 26

Day - 26 使用call(), apply() 間接調用函式筆記

  • 分享至 

  • xImage
  •  

JavaScript 函式是物件, 它們也有方法可用來間接調用函式 :

  1. call() 方法

    用它自己的引數列作為傳給函式的引數

  2. apply() 方法

    用一組值組成的陣列來做引數之用。

在JavaScript中,call()apply() 是兩種內建的函式方法,call()apply()的第一個參數是要調用該函式的物件,且可以控制函式內部 this 的值:

function greet() {
  console.log(`Hello, my name is ${this.name}`);
}

var person = {
  name: 'Apple'
};

// 使用 call() 方法
greet.call(person);  //  "Hello, my name is Apple"

// 使用 apply() 方法
greet.apply(person);  //  "Hello, my name is Apple"

在範例中定義了一個 greet 函式和一個 person 物件。再使用 call()apply() 方法來調用 greet 函式,並將 this 指向 person 物件。

以三角形面積為例:

function Triangle() {
  this.calculateArea = function(base, height) {
    return 0.5 * base * height;
  };
}

var triangle = new Triangle();

/* 使用 call() 方法: 
--------------------*/

// 將 function Triangle() 函式中的 calculateArea 當成物件 triangle 的方法。
// 第一個引數: this的值,指出要在哪個物件上調用函式。
// 第二個引數,用一連串引/參數列表的方式來做為傳給 calculateArea的引數

var area1 = triangle.calculateArea.call(triangle, 5, 10);
console.log(area1);  // 輸出 25

/* 使用 apply() 方法: 
--------------------*/

// 第二個引數用陣列來指定
var area2 = triangle.calculateArea.apply(triangle, [5, 10]);
console.log(area2);  // 輸出 25

在三角形面積範例中定義了一個 Triangle 物件和一個 calculateArea 方法。然後使用 call()apply() 方法來調用 calculateArea 函式,並將 this 指向 triangle 這個新的物件。

參考資源


上一篇
Day - 25 建構式調用筆記
下一篇
Day - 27 函式引數與參數筆記
系列文
我的日常學習雜記與筆記整理30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言