其實都圍繞著this

小弟剛入行時對this的印象就是用在物件 method 中,直接取得物件本身的 property:

1
2
3
4
5
6
7
8
9
function fullName(){
return this.firstName + ' ' + this.lastName;
}
var JC = {
firstName: 'Jim',
lastName: 'Carrey',
fullName: fullName
};
console.log(JC.fullName()); // "Jim Carrey"

或是用於建構新物件用的 function constructor:

1
2
3
4
5
6
7
8
9
function star(firstName, lastName){
this.firstName = firstName;
this.lastName = lastName;
}
var JC = new star('Jim','Carrey');
star.prototype.fullName = function(){
return this.firstName + ' ' + this.lastName;
};
console.log(JC.fullName());// "Jim Carrey"

但也曾經一度誤解this是「專屬於物件的、不管怎樣都是指物件本身」的指標。

結果用 jQuery 有 $(this) ,某些情況指到不是自己要的對象,需要搭配 .bind() 的問題,稍微有點頭緒後,又在讀前輩 code 時看到完全陌生的 .apply().call() ,一查之下才發現根本是 function 的原生 method 三兄弟,而且都跟 this 有關!腦洞越攪越大、債越背越多,不研究一下不行惹。

估狗

於是拜讀這兩篇比較淺顯易懂的:

筆記

  • this參照呼叫的主體,如第一段 code 中是 JC 呼叫的,所以 fullName() 的 this參照的是 JC 物件本身。
  • .call()能直接指定this參照至第一個參數,如以下這樣寫,結果與第一段 code 相同。
1
console.log(fullName.call(JC)); // "Jim Carrey"

若是有參數的 function ,則接續在之後如function.call( someObj, arg1, arg2, ...)

  • .apply()效果同.call(),只是用 Array 帶進 arguments 如function.apply( someObj, [ arg1, arg2, ... ])

實務上 - 借別人的 method 來用

1
2
3
var numbers = [ 5, 458 , 120 , -215 ]; 
var maxInNumbers = Math.max.apply(Math, numbers); //458
var maxInNumbers = Math.max.call(Math, 5, 458 , 120 , -215); //458

number 本身没有 max 方法,但是 Math 有,我们就可以借助 call 或者 apply 使用其方法。

那什麼是 arguments (引數)?

常跟 parameters (參數) 搞混的名詞,中文翻譯也常常兩個 cosplay 對方,攻城屍還是多用英文吧。

個人是理解為: parameters 是 function 在定義時宣告要使用的 variables,而 arguments 是 function 在執行時被賦值後的 variables,同時 function 中也存在名為arguments的預設物件供內部呼叫,是一個類似 array 的物件,裡面存的就是帶進 function 的值:

1
2
3
4
5
6
7
function sum(x,y){ // x, y 為 parameter
console.log(arguments);
return x + y;
}
var z = sum(500,1000); // 500, 1000 為 arguments
// in console:
// [object Arguments]{ 0:500, 1:1000}

參考