JS 中的 this 和 arguments

kari發表於2019-04-10
JS

this

在 JavaScript 中， 函式有兩種呼叫方式：

function sum(x, y) {
    return x + y
}

// 第一種方式
sum(1, 2)    // 3

// 第二種方式
sum.call(undefined, 1, 2)    // 3
複製程式碼

第一種方式是常用的方法呼叫函式，第二種是使用 call() 方法呼叫函式，在使用後者呼叫函式時，第一個引數便是 this 值。

全域性環境

無論是否在嚴格模式下，在全域性執行環境中（在任何函式體外部）this 都指向全域性物件。

// 在瀏覽器中, window 物件同時也是全域性物件
console.log(this === window)    // true

a = 37
console.log(window.a)    // 37

this.b = "你好"
console.log(window.b)    // "你好"
console.log(b)           // "你好"
複製程式碼

函式（執行內）環境

因為下面的程式碼不在嚴格模式下，且 this 的值不是由該呼叫設定的，所以 this 的值預設指向全域性物件。

function f1(){
  return this
}
//在瀏覽器中：
f1() === window     //在瀏覽器中，全域性物件是window

複製程式碼

然而，在嚴格模式下，this 將保持他進入執行環境時的值，所以下面的 this 將會預設為 undefined。

function f2(){
  "use strict"    // 這裡是嚴格模式
  return this
}

f2() === undefined    // true
複製程式碼

arguments

還是最上面的例子。
如果函式以 () 的方式呼叫，那麼 arguments 就是由所有引數組成的偽陣列。
如果函式以 call() 的方式呼叫，那麼 arguments 指的就是第二個及之後的引數組成的偽陣列。
需要注意的是，在非嚴格模式下，arguments 可以被修改。

// 非嚴格模式
function sum(x, y) {
    arguments[0] = 100
    arguments[1] = 100
    return x + y
}
sum(1, 2)  // 200
sum.call(undefined, 1, 2)  // 200

// 嚴格模式
function sum(x, y) {
    'use strict'
    arguments[0] = 100
    arguments[1] = 100
    return x + y
}
sum(1, 2)  // 3
sum.call(undefined, 1, 2)  // 3
複製程式碼

相關文章