JavaScriptのthisキーワード解説
2024-10-10
JavaScript, jQuery, and Scope: Passing "this" Context to a Function
JavaScriptにおける**"this"キーワードは、実行コンテキスト内のオブジェクトへの参照です。関数内の"this"**は、関数が呼び出された方法によって異なる値を持つことができます。
"this"の値を関数に渡す方法
-
直接渡す
function myFunction(context) { console.log(context); // 呼び出し元のオブジェクトを参照 } const myObject = { name: "John", greet: function() { myFunction(this); // "this"を関数に直接渡す } }; myObject.greet(); // 出力: { name: "John" } -
bind()メソッドを使う
function myFunction() { console.log(this); // 呼び出し元のオブジェクトを参照 } const myObject = { name: "John" }; const boundFunction = myFunction.bind(myObject); // "this"を固定する boundFunction(); // 出力: { name: "John" } -
function myFunction() { console.log(this); // 呼び出し元のオブジェクトを参照 } const myObject = { name: "John" }; myFunction.call(myObject); // "this"を一時的に設定する -
function myFunction(arg1, arg2) { console.log(this, arg1, arg2); // 呼び出し元のオブジェクトを参照 } const myObject = { name: "John" }; const args = ["Hello", "World"]; myFunction.apply(myObject, args); // "this"を一時的に設定し、引数を配列で渡す
jQueryにおける"this"
jQueryでは、イベントハンドラーやメソッドの内部で**"this"**は、イベントが発生した要素またはメソッドが呼び出されたオブジェクトを参照します。
$("button").click(function() {
console.log(this); // クリックされたボタン要素を参照
});
JavaScriptのthisキーワード解説と例
JavaScriptにおける**"this"キーワードは、実行コンテキスト内のオブジェクトへの参照です。関数が呼び出された方法によって、"this"**の値は異なります。
直接渡す
function myFunction(context) {
console.log(context); // 呼び出し元のオブジェクトを参照
}
const myObject = {
name: "John",
greet: function() {
myFunction(this); // "this"を関数に直接渡す
}
};
myObject.greet(); // 出力: { name: "John" }
- 解説
myFunction関数に、thisを直接引数として渡しています。これにより、myFunction内でthisが呼び出し元のオブジェクトを参照できます。
function myFunction() {
console.log(this); // 呼び出し元のオブジェクトを参照
}
const myObject = {
name: "John"
};
const boundFunction = myFunction.bind(myObject); // "this"を固定する
boundFunction(); // 出力: { name: "John" }
- 解説
bind()メソッドを使用して、thisの値を固定しています。boundFunctionを呼び出すと、常にthisがmyObjectを参照します。
function myFunction() {
console.log(this); // 呼び出し元のオブジェクトを参照
}
const myObject = {
name: "John"
};
myFunction.call(myObject); // "this"を一時的に設定する
- 解説
call()メソッドを使用して、thisの値を一時的に設定しています。myFunctionを呼び出すときに、myObjectを第一引数として渡すことで、thisがmyObjectを参照します。
function myFunction(arg1, arg2) {
console.log(this, arg1, arg2); // 呼び出し元のオブジェクトを参照
}
const myObject = {
name: "John"
};
const args = ["Hello", "World"];
myFunction.apply(myObject, args); // "this"を一時的に設定し、引数を配列で渡す
"this"の値が決定される方法
JavaScriptにおける**"this"**の値は、関数が呼び出された方法によって決定されます。
- call()、apply()、bind()メソッド
これらのメソッドを使用して関数を呼び出した場合、**"this"**の値を明示的に設定することができます。 - new演算子
new演算子を使用して関数を呼び出した場合、**"this"**は新しく作成されたオブジェクトを参照します。 - 関数呼び出し
関数が単独で呼び出された場合、**"this"**はグローバルオブジェクト（ブラウザではwindowオブジェクト）を参照します。 - メソッド呼び出し
関数がオブジェクトのプロパティとして呼び出された場合、**"this"**はオブジェクト自身を参照します。
function myFunction(context) {
console.log(context); // 呼び出し元のオブジェクトを参照
}
const myObject = {
name: "John",
greet: function() {
myFunction(this); // "this"を関数に直接渡す
}
};
myObject.greet(); // 出力: { name: "John" }
function myFunction() {
console.log(this); // 呼び出し元のオブジェクトを参照
}
const myObject = {
name: "John"
};
const boundFunction = myFunction.bind(myObject); // "this"を固定する
boundFunction(); // 出力: { name: "John" }
function myFunction() {
console.log(this); // 呼び出し元のオブジェクトを参照
}
const myObject = {
name: "John"
};
myFunction.call(myObject); // "this"を一時的に設定する
function myFunction(arg1, arg2) {
console.log(this, arg1, arg2); // 呼び出し元のオブジェクトを参照
}
const myObject = {
name: "John"
};
const args = ["Hello", "World"];
myFunction.apply(myObject, args); // "this"を一時的に設定し、引数を配列で渡す
代替方法: アロー関数
アロー関数を使用すると、**"this"**の値をレキシカルスコープから取得することができます。
const myObject = {
name: "John",
greet: () => {
console.log(this); // 呼び出し元のオブジェクトを参照
}
};
myObject.greet(); // 出力: { name: "John" }
- 解説
アロー関数を使用すると、**"this"の値が定義されたスコープ（この場合はmyObjectオブジェクトのスコープ）から取得されます。そのため、"this"**が常にmyObjectを参照します。
javascript jquery scope
