秒懂 this

sumory 發(fā)布于2019-08-26 13:23 / 2842人閱讀

摘要：特殊情況結(jié)合定時(shí)器調(diào)用若在對象的函數(shù)中，普通函數(shù)作為定時(shí)器延時(shí)執(zhí)行的函數(shù)調(diào)用，指向箭頭函數(shù)作為定時(shí)器延時(shí)執(zhí)行的函數(shù)調(diào)用，指向定義時(shí)所在的對象，也就是中的，即。實(shí)例化一個(gè)對象如上第四點(diǎn)，作為一個(gè)構(gòu)造函數(shù)使用。

日常開發(fā)中經(jīng)常會遇到 this 指向的 bug，郁悶好久才猛然醒悟，痛定思痛，將 this 做個(gè)匯總，以便在日后的開發(fā)工作中少走彎路。

注意：本文講述只針對瀏覽器環(huán)境。

一、全局執(zhí)行

console.log(this);
// Window

可以看出在全局作用域中 this 指向當(dāng)前的全局對象 Window。

二、函數(shù)中執(zhí)行 1. 非嚴(yán)格模式中

function func () {
    console.log(this);
}
func();
// Window

2. 嚴(yán)格模式中

"use strict";
function func () {
    console.log(this);
}
func();
// undefined

三、作為對象的方法調(diào)用

當(dāng)一個(gè)函數(shù)被當(dāng)作一個(gè)對象的方法調(diào)用的時(shí)候，this 指向當(dāng)前的對象 obj：

var obj = {
    name: "kk",
    func: function () {
        console.log(this.name);
    }
}
obj.func();
// kk

如果把對象的方法賦值給一個(gè)變量，調(diào)用該方法時(shí)，this 指向 Window：

var obj = {
    name: "kk",
    func: function () {
        console.log(this);
    }
}
var test = obj.func;
test();
// Window

四、作為一個(gè)構(gòu)造函數(shù)使用

在 JS 中，為了實(shí)現(xiàn)類，我們需要定義一些構(gòu)造函數(shù)，在調(diào)用一個(gè)構(gòu)造函數(shù)的時(shí)候加上 new 這個(gè)關(guān)鍵字：

function Person (name) {
    this.name = name;
    console.log(this);
}
var p1 = new Person("kk");
// Person

此時(shí)，this 指向這個(gè)構(gòu)造函數(shù)調(diào)用的時(shí)候?qū)嵗鰜淼膶ο蟆?/p>

當(dāng)然了，構(gòu)造函數(shù)其實(shí)也是一個(gè)函數(shù)，若將構(gòu)造函數(shù)當(dāng)做普通函數(shù)來調(diào)用，this 指向 Window:

function Person (name) {
    this.name = name;
    console.log(this);
}
var p2 = Person("MM");
// Window

五、在定時(shí)器中使用

setInterval(function () {
    console.log(this);
}, 2000)
// Window

setTimeout(function () {
    console.log(this);
}, 0)
// Window

如果沒有特殊指向（指向更改請看下方：怎么改變 this 的指向），setInterval 和setTimeout 的回調(diào)函數(shù)中 this 的指向都是 Window 。這是因?yàn)?JS 的定時(shí)器方法是定義在 Window 下的。

六、箭頭函數(shù) 1. 在全局環(huán)境中調(diào)用：

var func = () => {
    console.log(this);
}
func();
// Window

2. 作為對象的一個(gè)函數(shù)調(diào)用：

var obj = {
    name: "hh",
    func: function () {
       console.log(this);
    }
}
obj.func();
// obj

不難發(fā)現(xiàn)，普通函數(shù)作為對象的一個(gè)函數(shù)被調(diào)用，this 指向 obj。

var obj = {
    name: "hh",
    func: () => {
       console.log(this);
    }
}
obj.func();
// Window

箭頭函數(shù)作為對象的一個(gè)函數(shù)被調(diào)用時(shí)，若箭頭函數(shù)直接作為對象的某個(gè)方法被調(diào)用，this 指向 Window。

var obj = {
    name: "hh",
    func: function () {
       (() => {
          console.log(this);
       })()
    }
}
obj.func();
// obj

若箭頭函數(shù)在某方法的內(nèi)部，this 指向箭頭函數(shù)外部非箭頭函數(shù) this 的值；在上述示例中，this 指向 obj。

3. 特殊情況

結(jié)合定時(shí)器調(diào)用：

var obj = {
    name: "hh",
    func: function () {
        setTimeout(function () {
            console.log(this);
        }, 0)
    }
}
obj.func();
// Window

var obj = {
    name: "hh",
    func: function () {
        setTimeout(() => {
            console.log(this);
        }, 0)
    }
}
obj.func();
// obj

若在對象的函數(shù)中，普通函數(shù)作為定時(shí)器延時(shí)執(zhí)行的函數(shù)調(diào)用，this 指向 Window；箭頭函數(shù)作為定時(shí)器延時(shí)執(zhí)行的函數(shù)調(diào)用， this 指向定義時(shí)所在的對象，也就是 func 中的 this，即 obj。

箭頭函數(shù)中 this 的值取決于該函數(shù)外部非箭頭函數(shù)的 this 的值，且不能通過 call() 、 apply() 和 bind() 方法來改變 this 的值。

七、call、apply、bind

call:

fun.call(thisArg[, arg1[, arg2[, ...]]])

它會立即執(zhí)行函數(shù)，第一個(gè)參數(shù)是指定執(zhí)行函數(shù)中 this 的上下文，后面的參數(shù)是執(zhí)行函數(shù)需要傳入的參數(shù)；

apply：

fun.apply(thisArg, [argsArray])

它也會立即執(zhí)行函數(shù)，第一個(gè)參數(shù)是指定執(zhí)行函數(shù)中 this 的上下文，第二個(gè)參數(shù)是一個(gè)數(shù)組，是傳給執(zhí)行函數(shù)的參數(shù)（與 call 的區(qū)別）；

bind：

var foo = fun.bind(thisArg[, arg1[, arg2[, ...]]]);

它不會執(zhí)行函數(shù)，而是返回一個(gè)新的函數(shù)，這個(gè)新的函數(shù)被指定了 this 的上下文，后面的參數(shù)是執(zhí)行函數(shù)需要傳入的參數(shù)；

我們來看個(gè)示例：

function Person(name, age) {
  this.name = name;
  this.age = age;
  console.log(this);
}
var obj = {
  name: "kk",
  age: 6
};
Person.call(obj, "mm", 10);
// obj，{name: "mm", age: 10}

Person.apply(obj, ["mm", 10]);
// obj，{name: "mm", age: 10}

var p1 = Person.bind(obj, "mm", 10)
var p2 = new p1();
// Person?{name: "mm", age: 10}

在這個(gè)示例中，call、apply 和 bind 的 this 都指向了 obj，都能正常運(yùn)行；call、apply 會立即執(zhí)行函數(shù)，call 和 apply 的區(qū)別就在于傳遞的參數(shù)，call 接收多個(gè)參數(shù)列表，apply 接收一個(gè)包含多個(gè)參數(shù)的數(shù)組；bind 不是立即執(zhí)行函數(shù)，它返回一個(gè)函數(shù)，需要執(zhí)行 p2 才能返回結(jié)果，bind 接收多個(gè)參數(shù)列表。

應(yīng)用：怎么改變 this 的指向

為什么講這個(gè)模塊呢，為了便于大家更加透徹的理解上面所講述的 this 指向問題，以及更加徹底的理解 JS 函數(shù)中重要的三種方法：call、apply、bind 的使用；并且在實(shí)際的項(xiàng)目開發(fā)中，我們經(jīng)常會遇到需要改變 this 指向的情況。

我們來看下都有哪些方法：

1. 使用 es6 的箭頭函數(shù)

var name = "hh";
var obj = {
    name : "kk",
    func1: function () {
        console.log(this.name)     
    },
    func2: function () {
        setTimeout(function () {
            this.func1()
        }, 1000);
    }
};

obj.func2();
// Uncaught TypeError: this.func1 is not a function

這時(shí)會報(bào)錯(cuò)，因?yàn)?setTimeout 里函數(shù)的 this 指向 Window，而 Window 對象上是沒有 func1 這個(gè)函數(shù)的。下面我們來修改成箭頭函數(shù)：

var name = "hh";
var obj = {
    name : "kk",
    func1: function () {
        console.log(this.name)     
    },
    func2: function () {
        setTimeout(() => {
            this.func1()
        }, 1000);
    }
};

obj.func2();
// kk

這時(shí)候，沒有報(bào)錯(cuò)，因?yàn)榧^函數(shù)的 this 的值取決于該函數(shù)外部非箭頭函數(shù)的 this 的值，也就是 func2 的 this 的值，即 obj。

2. 在函數(shù)內(nèi)部使用 _this = this

var name = "hh";
var obj = {
    name : "kk",
    func1: function () {
        console.log(this.name)     
    },
    func2: function () {
        let _this = this;
        setTimeout(function () {
            _this.func1()
        }, 1000);
    }
};

obj.func2();
// kk

此時(shí)，func2 也能正常運(yùn)行。在 func2 中，首先設(shè)置 var _this = this，這里的 this 是指向 func2 的對象 obj，為了防止在 func2 中的 setTimeout 被 window 調(diào)用而導(dǎo)致的在 setTimeout 中的 this 為 window。我們將 this (指向變量 obj) 賦值給一個(gè)變量 _this，這樣，在 func2 中我們使用 _this 就是指向?qū)ο?obj 了。

3. 使用 call、apply、bind

call：

var name = "hh";
var obj = {
    name : "kk",
    func1: function () {
        console.log(this.name)     
    },
    func2: function () {
        setTimeout(function () {
            this.func1()
        }.call(obj), 1000);
    }
};

obj.func2();
// kk

apply:

var name = "hh";
var obj = {
    name : "kk",
    func1: function () {
        console.log(this.name)     
    },
    func2: function () {
        setTimeout(function () {
            this.func1()
        }.apply(obj), 1000);
    }
};

obj.func2();
// kk

bind:

var name = "hh";
var obj = {
    name : "kk",
    func1: function () {
        console.log(this.name)     
    },
    func2: function () {
        setTimeout(function () {
            this.func1()
        }.bind(obj)(), 1000);
    }
};

obj.func2();
// kk

call、apply、bind 都能改變 this 的上下文對象，所以也沒有報(bào)錯(cuò)，可以正常執(zhí)行。

具體原因可看上述第七點(diǎn)，call、apply、bind。

4. new 實(shí)例化一個(gè)對象

如上：第四點(diǎn)，作為一個(gè)構(gòu)造函數(shù)使用。

云服務(wù)器 GPU云服務(wù)器一圖秒懂神圖秒懂 this[] this

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/108728.html

發(fā)表評論

登陸后可評論

0條評論

sumory

男|高級講師

我要關(guān)注我要私信

TA的文章

tensorflow決策樹

閱讀 2145·2023-04-26 02:19
【C語言、Java】分別實(shí)現(xiàn)水仙花數(shù)及拓展

閱讀 1928·2021-11-19 09:40
看菜雞如何搞定50塊錢1條的視頻

閱讀 1715·2021-09-29 09:35
軟件測試----基礎(chǔ)知識（1）

閱讀 3584·2021-09-29 09:34
buyvm，全新流媒體優(yōu)化vps（不限流量） – $5/月起，附解鎖教程

閱讀 4361·2021-09-07 10:16
Oracle甲骨文 ARM VPS自動(dòng)搶購腳本 – 利用寶塔面板+oci

閱讀 5572·2021-08-11 11:14
不怕你用不上！CSS 列表項(xiàng)布局技巧

閱讀 3594·2019-08-30 15:54
前端開發(fā)工程師怎樣能表現(xiàn)的不那么“新手沒經(jīng)驗(yàn)”、不那么“培訓(xùn)班出來的”

閱讀 1643·2019-08-30 15:53

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

秒懂 this

相關(guān)文章

如何秒懂 this

一張圖秒懂原型鏈查找，這個(gè)是理解js原型繼承的關(guān)鍵

發(fā)表評論

0條評論

sumory

男|高級講師

TA的文章

tensorflow決策樹

【C語言、Java】分別實(shí)現(xiàn)水仙花數(shù)及拓展

看菜雞如何搞定50塊錢1條的視頻

軟件測試----基礎(chǔ)知識（1）

buyvm，全新流媒體優(yōu)化vps（不限流量） – $5/月起，附解鎖教程

Oracle甲骨文 ARM VPS自動(dòng)搶購腳本 – 利用寶塔面板+oci

不怕你用不上！CSS 列表項(xiàng)布局技巧

前端開發(fā)工程師怎樣能表現(xiàn)的不那么“新手沒經(jīng)驗(yàn)”、不那么“培訓(xùn)班出來的”

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

秒懂 this

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動(dòng)

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！