これはJavaScriptでは何を意味しますか-フロントエンドQ&A-php.cn

js では、これは「this; current」を意味し、現在の関数の実行環境を動的に指すポインター変数です。同じ関数が異なるシナリオで呼び出される場合、このポインタも変化する可能性がありますが、ポインタは常に、その関数が配置されている関数の実際の呼び出し元を指します。呼び出し元が存在しない場合は、グローバルオブジェクトウィンドウを指します。

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

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

JavaScript 関数が呼び出された後、その関数は特定の実行環境で実行されます。この実行環境は関数の呼び出し元、または呼び出し関数のオブジェクトです。関数に呼び出し元がない場合 (オブジェクト経由ではなく直接)、実行環境はグローバルオブジェクトウィンドウになります。

関数の実行中に実行環境を参照 (アクセス) できるようにするために、JavaScript は特に this キーワードを追加します。これは、現在の関数の実行環境を指すポインター変数です。

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

セクション「JS 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() が window オブジェクトのメソッドであるため、このメソッドが呼び出されると、このメソッドは 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 サイトの他の関連記事を参照してください。