これはJavaScriptでは何を意味しますか

this の中国語の意味は「現在、これ」です。これは、現在の関数の実行環境を指す JavaScript のポインター変数です。同じ関数が異なるシナリオで呼び出される場合、this のポインタは変化しますが、このポインタは常に、その関数が配置されている関数の実際の呼び出し元を指します。呼び出し元が存在しない場合、this はウィンドウを指します。

このチュートリアルの動作環境: Windows7 システム、JavaScript バージョン 1.8.5、Dell G3 コンピューター。

JavaScript 関数のスコープは静的ですが、関数呼び出しは動的です。関数はさまざまな実行環境で実行できるため、JavaScript は関数本体に this キーワードを定義して、現在の実行環境を取得します。

これは、現在の関数の実行環境を指すポインター変数です。

同じ関数が異なるシナリオで呼び出される場合、このポインタも変化する可能性がありますが、ポインタは常に、その関数が配置されている関数の実際の呼び出し元を指します (呼び出す人が誰を指すか)。呼び出し元が存在しない場合は、グローバル オブジェクト ウィンドウをポイントするだけです。

これを使用します

これは、関数の実行時に JavaScript エンジンによって自動的に生成されます。関数内に存在し、現在の呼び出しオブジェクトを参照する動的ポインターです。 。具体的な使用法は次のとおりです。

this[.属性]

これに属性が含まれていない場合は、現在のオブジェクトが渡されます。

これは柔軟に使用でき、含まれる値も多様です。たとえば、次の例では call() メソッドを使用して、関数内で参照するオブジェクトを継続的に変更します。

var x = "window";  //定义全局变量x，初始化字符串为“window”
function a () {  //定义构造函数a
    this.x = "a";  //定义私有属性x，初始化字符a
}
function b () {  //定义构造函数b
    this.x = "b";  //定义私有属性x，初始化为字符b
}
function c () {  //定义普通函数，提示变量x的值
    console.log(x);
}
function f () {  //定义普通函数，提示this包含的x的值
    console.log(this.x);
}
f();  //返回字符串“window”，this指向window对象
f.call(window);  //返回字符串“window”，指向window对象
f.call(new a());  //返回字符a，this指向函数a的实例
f.call(new b());  //返回字符b，this指向函数b的实例
f.call(c);  //返回undefined，this指向函数c对象

以下は、5 つの一般的なシナリオにおけるこのパフォーマンスと対応戦略の簡単な概要です。

1. 通常の呼び出し

次の例は、関数参照と関数呼び出しがこれに及ぼす影響を示しています。

var obj = {  //父对象
    name : "父对象obj",
    func : function () {
        return this;
    }
}
obj.sub_obj = {  //子对象
    name : "子对象sub_obj",
    func : obj.func
}
var who = obj.sub_obj.func();
console.log(who.name);  //返回“子对象sub_obj”，说明this代表sub_obj

サブオブジェクト sub_obj の func を関数呼び出しに変更した場合。

obj.sub_obj = {
    name : "子对象sub_obj",
    func : obj.func()  //调用父对象obj的方法func
}

関数内の this は、関数が定義されている親オブジェクト obj を表します。

var who = obj.sub_obj.func;
console.log(who.name);  //返回“父对象obj”，说明this代表父对象obj

2. インスタンス化

new コマンドを使用して関数を呼び出す場合、これは常にインスタンス オブジェクトを参照します。

var obj = {};
obj.func = function () {
    if (this == obj) console.log("this = obj");
    else if (this == window) console.log("this = window");
    else if (this.contructor == arguments.callee) console.log("this = 实例对象");
}
new obj.func;  //实例化

3. 動的呼び出し

call と apply を使用して、これがパラメータ オブジェクトを指すように強制します。

function func () {
    //如果this的构造函数等于当前函数，则表示this为实例对象
    if (this.contructor == arguments.callee) console.log("this = 实例对象");
    //如果this等于window，则表示this为window对象
    else if (this == window) console.log("this = window对象");
    //如果this为其他对象，则表示this为其他对象
    else console.log("this == 其他对象 \n this.constructor =" + this.constructor);
}
func();  //this指向window对象
new func();  //this指向实例对象
cunc.call(1);  //this指向数值对象

上の例では、 func() が直接呼び出された場合、これはウィンドウ オブジェクトを表します。 new コマンドを使用して関数を呼び出すと、新しいインスタンス オブジェクトが作成され、これはこの新しく作成されたインスタンス オブジェクトを指します。

call() メソッドを使用して関数 func() を実行する場合、call() メソッドのパラメータ値は数値 1 であるため、JavaScript エンジンは数値 1 を強制的に数値にカプセル化します。オブジェクトであり、これはこの数値オブジェクトを指します。

4. イベント処理

イベント処理関数の概要では、これは常にイベントをトリガーしたオブジェクトを指します。

<input type="button" value="测试按钮" />
<script>
    var button = document.getElementsByTagName("put")[0];
    var obj = {};
    obj.func = function () {
        if (this == obj) console.log("this = obj");
        if (this == window) console.log("this = window");
        if (this == button) console.log("this = button");
    }
    button.onclick = obj.func;
</script>

上のコードでは、func() に含まれる this はオブジェクト obj ではなく、ボタン button を指します。これは、func() がボタンのイベント処理関数に渡された後に呼び出されるからです。

DOM2 レベル標準を使用してイベント ハンドラー関数を登録する場合、手順は次のとおりです。

if (window.attachEvent) {  //兼容IE模型
    button.attachEvent("onclick", obj.func);
} else {  //兼容DOM标准模型
    button.addEventListener("click", obj.func, true);
}

IE ブラウザでは、これはウィンドウ オブジェクトとボタン オブジェクトを指しますが、 DOM 標準ブラウザでは、ボタン オブジェクトのみを指します。 IE ブラウザでは、attachEvent() が wi​​ndow オブジェクトのメソッドであるため、このメソッドが呼び出されると、このメソッドは window オブジェクトを指すことになります。

ブラウザの互換性の問題を解決するには、call() または apply() メソッドを呼び出して、オブジェクト obj に対してメソッド func() を強制的に実行することで、ブラウザによって解析方法が異なるという問題を回避できます。 。

if (window.attachEvent) {
    button.attachEvent("onclick", function () {  //用闭包封装call()方法强制执行func()
        obj.func.call(obj);
    });
} else {
    button.attachEventListener("onclick", function () {
        obj.func.call(obj);
    }, true);
}

再度実行すると、func() に含まれる this は常にオブジェクト obj を指します。

5. タイマー

タイマーを使用して関数を呼び出します。

var obj = {};
obj.func = function () {
    if (this == obj) console.log("this = obj");
    else if (this == window) console.log("this = window对象");
    else if (this.constructor == arguments.callee) console.log("this = 实例对象");
    else console.log("this == 其他对象 \n this.constructor =" + this.constructor);
}
setTimeOut(obj.func, 100);

IEではウィンドウオブジェクトとボタンオブジェクトを指しますが、具体的な理由は上記で説明したattachEvent()メソッドと同じです。 DOM 準拠のブラウザでは、これはボタン オブジェクトではなくウィンドウ オブジェクトを指します。

メソッド setTimeOut() はグローバル スコープで実行されるため、これは window オブジェクトを指します。ブラウザーの互換性の問題を解決するには、call メソッドまたは apply メソッドを使用できます。

setTimeOut (function () {
    obj.func.call(obj);
}, 100);

【関連する推奨事項: JavaScript 学習チュートリアル】

以上がこれはJavaScriptでは何を意味しますかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。