JavaScript 基礎チュートリアル

JavaScript オブジェクト

JavaScript 関数

JS HTML DOM

JS ブラウザBOM

AJAX 基礎チュートリアル

JavaScript 参考マニュアル

JavaScriptの一般的なエラー JavaScriptの厳格モード(use strict)

JavaScriptのthisキーワード

他の言語と比較して、thisキーワードのJavaScriptでの動作は少し異なります。

JavaScriptでは、thisキーワードはその所属するオブジェクトを参照します。

使用位置によって異なる値を持っています：

メソッド内で、thisは参照しています：所有者オブジェクト
単独に、thisはこの意味を持っています：全局对象
在函数中，this引用全局对象
在函数中，在严格模式下，this是未定义的
在事件中，this指的是接收事件的元素
像call()和apply()这样的方法，可以将其引用到任何对象

方法上下文

在对象方法中，this指代方法的user。

在下面的示例中，当调用user.getName()时，函数内部将this绑定到user对象：

例

var user = {
firstName: "Vishal",
lastName : "Choudhary",
age :　22,
getName : function() {
　return this.firstName　+　"　"　+　this.lastName;
};
});
document.write(user.getName());　　　//　"Vishal Choudhary"

テストして見て‹/›

这里user对象是所有者getName的方法。

全局上下文

在全局执行上下文中（在任何函数之外），this无论是否处于严格模式下，都引用全局对象。

例

//　在Web浏览器中，窗口对象也是全局对象：
console.log(this === window);　　//　true
a =　50;
console.log(window.a);　//　50
this.b = "w3codebox";
console.log(window.b)　　//　"w3codebox"
console.log(b)　//　"w3codebox"

テストして見て‹/›

在浏览器窗口中，全局对象是[object Window]。

函数上下文

在函数内部，this值取决于函数的调用方式。

由于以下代码不在严格模式下，this因此默认为全局对象，即浏览器中的[object Window]：

例

function myFunc() {
return this;
};

テストして見て‹/›

在严格模式，然而this的值是undefined：

例

function myFunc() {
"use strict";
return this;
};

テストして見て‹/›

因此，在严格模式下，如果执行上下文未定义它，则它将保持未定义状态。

this在DOM事件处理程序中

当函数用作事件处理程序时，this将被设置为触发事件的元素：

例

let btn = document.querySelector("button");
btn.onclick = function() {
this.style.display = "none";
});

テストして見て‹/›

インラインイベントハンドラからコードを呼び出すとき、thisはリスナーを設定した要素に設定されます：

例

<button onclick="this.style.display='none'">クリックして削除</button>

テストして見て‹/›

これは別の例です：

例

<button onclick="alert(this)">クリック</button>

テストして見て‹/›

明示的な関数バインディング

call()とapply()メソッドはプレデファインされたJavaScriptメソッドです。

これらは、他のオブジェクトを引数としてオブジェクトメソッドを呼び出すために使用できます。

例

function add(c, d) {
return this.a　+　this.b　+　c　+　d;
};
var obj = {a:5,　b:10});
add.call(obj,　5,　7);　　//　27
add.apply(obj, [10,　20]);　//　45

テストして見て‹/›

アロー関数（=>）

アロー関数（=>）内では、thisは常に関数が作成されたときのリエーキススコープのthisを指します。

グローバルコード内では、それがグローバルオブジェクトとして設定されます：

例

var globalObj = this;
var myFunc = (() => this);
document.write(myFunc() === globalObj);　　　//　true

テストして見て‹/›

JavaScriptの一般的なエラー JavaScriptの厳格モード(use strict)