iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 19
0
Modern Web

JavaScript Note系列 第 19

call函式 & arguments物件

這篇算是This的延伸,這次要討論的主題,之前始終搞不清楚,剛好在書籍看到相關內容,為了跟其他章節區隔,所以另開篇幅討論。

call函式

由JavaScript所提供的標準內建物件Function的方法,每個函式都可以使用,它能改變this關鍵字所指向的物件。

var x = 'Global x';
let obj1 = {
    x: 'obj1'
};
let obj2 = {
    x: 'obj2'
}

function a() {
    console.log(this.x);
}
a.call(null); //Global x
a.call(obj1); //obj1
a.call(obj2); //obj2
  • 藉由傳入不同的引數,改變a( )的this所指向的物件。
  • 若傳入為null,指向全域物件。

arguments物件

  • arguments包含傳遞給函式的引數。
  • arguments是一個使用於函內部的物件。
  • 結構類似陣列(Array-like),但不是陣列,所以只有length屬性以及索引值。
  • 在定義函式時,就算未設定參數,我們仍然可以透過arguments物件取得,呼叫函數時,所傳入的引數。
function a() {
    console.log(arguments);
    console.log(Array.isArray(arguments)); //false
    console.log(arguments.length); //4
    console.log(arguments[3]); //D
}
a('A', 'B', 'C', 'D');

https://ithelp.ithome.com.tw/upload/images/20181103/20112573s3Cw6NZzzM.png

將arguments轉為陣列

使用call函式可以將arguments轉為陣列。

function a() {
    var argsAry = Array.prototype.slice.call(arguments);
    console.log(Array.isArray(argsAry));
}
a('A', 'B', 'C', 'D'); //true
var argsAry = Array.prototype.slice.call(arguments);
  • 這段程式碼的意思是,將slice函式的this,指向arguments物件,也可以解釋為,將arguments物件當作this呼叫slice函式。
  • slice函式若無輸入引數,將回傳原陣列,所以argsAry是陣列,有4個元素。

ES6新增Array.from( )方法,讓轉換的程式碼更簡潔。

var argsAry = Array.from(arguments);
console.log(Array.isArray(argsAry)); //true

參考來源:
新一代 JavaScript 程式設計精解
MDN


上一篇
Closure 閉包
下一篇
var & let & const
系列文
JavaScript Note31
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言