Apakah maksud ini dalam javascript

Dalam js, ini bermaksud "ini; semasa" dan merupakan pembolehubah penunjuk yang secara dinamik menghala ke persekitaran berjalan bagi fungsi semasa. Apabila fungsi yang sama dipanggil dalam senario yang berbeza, penunjuk ini juga mungkin berubah, tetapi ia sentiasa menunjuk kepada pemanggil sebenar fungsi di mana ia berada, jika tiada pemanggil, ia menunjuk ke tetingkap objek global.

Persekitaran pengendalian tutorial ini: sistem Windows 7, versi JavaScript 1.8.5, komputer Dell G3.

Selepas fungsi JavaScript dipanggil, ia akan dilaksanakan dalam persekitaran berjalan tertentu ini ialah pemanggil fungsi atau objek fungsi panggilan. Jika fungsi itu tidak mempunyai pemanggil (bukan melalui objek, tetapi secara langsung), maka persekitaran yang sedang berjalan ialah tetingkap objek global.

Untuk dapat merujuk (mengakses) persekitaran yang sedang berjalan semasa pelaksanaan fungsi, JavaScript telah menambah kata kunci ini secara khusus. ini ialah pembolehubah penunjuk yang menunjuk kepada persekitaran berjalan bagi fungsi semasa.

Apabila fungsi yang sama dipanggil dalam senario yang berbeza, titik ini juga mungkin berubah, tetapi ia akan sentiasa menunjuk kepada pemanggil sebenar fungsi di mana ia terletak (sesiapa yang memanggilnya menunjuk kepada siapa); jika tiada pemanggil, ini Hanya tunjuk ke tetingkap objek global.

Dalam bahagian "JS this and Calling Objects" kita telah membincangkan tentang penggunaan awal penunjuk ini. Pembaca yang tidak faham sila klik pada pautan untuk mempelajari penunjuk ini.

Gunakan ini

ini dijana secara automatik oleh enjin JavaScript apabila melaksanakan fungsi Ia adalah penunjuk dinamik yang wujud dalam fungsi dan merujuk kepada Objek panggilan semasa. Penggunaan khusus adalah seperti berikut:

this[.属性]

Jika ini tidak mengandungi atribut, objek semasa diluluskan.

Ini fleksibel dalam penggunaan dan nilai yang terkandung di dalamnya juga berbeza-beza. Sebagai contoh, contoh berikut menggunakan kaedah panggilan() untuk terus menukar objek yang dirujuk dalam fungsi.

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对象

Berikut ialah ringkasan ringkas prestasi ini dalam 5 senario biasa dan strategi menghadapi.

1. Panggilan biasa

Contoh berikut menunjukkan kesan rujukan fungsi dan panggilan fungsi terhadap perkara ini.

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

Jika fungsi sub-objek sub_obj ditukar kepada panggilan fungsi.

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

Kemudian dalam fungsi ini mewakili obj objek induk di mana fungsi itu ditakrifkan.

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

2. Semerta

Apabila memanggil fungsi menggunakan arahan baharu, ini sentiasa merujuk kepada objek contoh.

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. Panggilan dinamik

Gunakan panggilan dan gunakan untuk memaksa ini menghala ke objek parameter.

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指向数值对象

Dalam contoh di atas, apabila func() dipanggil terus, ini mewakili objek tetingkap. Apabila fungsi dipanggil menggunakan arahan baharu, objek contoh baharu akan dibuat, dan ini akan menunjuk kepada objek contoh yang baru dibuat.

Apabila menggunakan kaedah panggilan() untuk melaksanakan fungsi func(), memandangkan nilai parameter kaedah panggilan() ialah nombor 1, enjin JavaScript akan memaksa nombor 1 untuk dirangkumkan menjadi berangka objek, dan ini akan menunjuk ke objek Numerik ini.

4. Pemprosesan acara

Dalam ringkasan fungsi pemprosesan acara, ini sentiasa menunjuk kepada objek yang mencetuskan acara.

<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>

Dalam kod di atas, ini terkandung dalam func() tidak lagi menunjuk ke objek obj, tetapi ke butang butang, kerana func() dipanggil selepas dihantar kepada pengendali acara butang dilaksanakan.

Jika anda menggunakan standard tahap DOM2 untuk mendaftarkan fungsi pengendali acara, prosedurnya adalah seperti berikut:

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

Dalam pelayar IE, ini menunjuk ke objek tetingkap dan objek butang, manakala dalam pelayar standard DOM Halakan hanya pada objek butang. Kerana, dalam pelayar IE, attachEvent() ialah kaedah objek tetingkap Apabila kaedah ini dipanggil, ini akan menunjuk ke objek tetingkap.

Untuk menyelesaikan isu keserasian penyemak imbas, anda boleh memanggil kaedah call() atau apply() untuk memaksa kaedah func() dilaksanakan pada objek obj untuk mengelakkan masalah penyemak imbas berbeza menghuraikan ini secara berbeza .

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

Apabila dilaksanakan semula, ini yang terkandung dalam func() sentiasa menunjuk ke objek obj.

5. Pemasa

Gunakan pemasa untuk memanggil fungsi.

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);

Dalam IE, ini menunjuk ke objek tetingkap dan objek butang Sebab khusus adalah sama dengan kaedah attachEvent() yang dijelaskan di atas. Dalam penyemak imbas yang mematuhi DOM, ini menunjuk ke objek tetingkap, bukan objek butang.

Oleh kerana kaedah setTimeOut() dilaksanakan dalam skop global, ini menunjuk ke objek tetingkap. Untuk menyelesaikan isu keserasian penyemak imbas, anda boleh menggunakan panggilan atau gunakan kaedah.

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

[Pembelajaran yang disyorkan: tutorial lanjutan javascript]

Atas ialah kandungan terperinci Apakah maksud ini dalam javascript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!