來(lái)源 | https://www.cnblogs.com/xuxiaoyu/archive/2018/12/20/10147427.html

this的用法

1、 this與普通函數(shù)執(zhí)行

• 當(dāng)一個(gè)函數(shù)執(zhí)行不帶任何修飾時(shí)，使用默認(rèn)綁定規(guī)則。
• 默認(rèn)綁定：函數(shù)體如果在非嚴(yán)格模式下，this綁定到window，嚴(yán)格模式下綁定到undefined。

// 1.1 函數(shù)體在非嚴(yán)格模式下的全局函數(shù)執(zhí)行function fn () {    console.log(this)}fn1()   // => window// 1.2 函數(shù)體在嚴(yán)格模式下的全局函數(shù)執(zhí)行'use strict'function fn () {    console.log(this)}fn()    // => undefined

// 1.3 函數(shù)體在非嚴(yán)格模式下的函數(shù)中的函數(shù)執(zhí)行function fn1 () {    function fn2 () {        console.log(this)      }        fn2()}fn1()   // => window

// 1.4 函數(shù)體在嚴(yán)格模式下的函數(shù)中的函數(shù)執(zhí)行'use strict'function fn1 () {    function fn2 () {        console.log(this)      }        fn2()}fn1()   // => undefined

// 1.5 函數(shù)體在非嚴(yán)格模式下，而函數(shù)調(diào)用在嚴(yán)格模式下時(shí), this依然指向windowfunction fn () {    console.log(this)}(function () {    'use strict'    fn()    // => window})()

2、this與對(duì)象中的方法執(zhí)行

2.1 無(wú)論是否是嚴(yán)格模式，當(dāng)函數(shù)引用有上下文對(duì)象時(shí)，隱式綁定規(guī)則會(huì)把函數(shù)調(diào)用中的this綁定到這個(gè)上下文對(duì)象。

// 2.1.1 函數(shù)直接在對(duì)象中聲明var obj = {    a: 1,    test: function () {        console.log(this.a)    }}
obj.test();   // => 1

// 2.1.2 函數(shù)先聲明，再由對(duì)象引用function test () {    console.log(this.a)}var obj = {    a: 1,    test: test}
obj.test();    // => 1

2.2 對(duì)象屬性引用鏈中只有最頂層或者說(shuō)只有最后一層會(huì)影響調(diào)用位置。

// 2.2.1 多層對(duì)象引用，this指向離函數(shù)調(diào)用最近的對(duì)象function test () {    console.log(this.a)}var obj2 = {    a: 2,    test: test}var obj1 = {    a: 1,    obj2: obj2}obj1.obj2.test()    // => 2

2.3 隱式丟失：被隱式綁定的函數(shù)可能會(huì)丟失綁定對(duì)象。

// 2.3.1 將obj.foo當(dāng)作函數(shù)別名賦值給一個(gè)變量function foo () {    console.log(this.a)}var obj = {    a: 2,    foo: foo}var bar = obj.foo   // 函數(shù)別名var a = '全局屬性'bar()   // => 全局屬性

在2.3.1中，雖然bar是obj.foo的一個(gè)引用，但是實(shí)際上，它引用的是foo函數(shù)本身，因此此時(shí)的bar() 其實(shí)是一個(gè)不帶任何修飾的普通函數(shù)調(diào)用。因此也使用默認(rèn)綁定規(guī)則。

// 2.3.2 將obj.foo當(dāng)作bar的回調(diào)函數(shù)。function foo () {    console.log(this.a)}function bar (fn) {    fn()}var obj = {    a: 2,    foo: foo}var a = '全局屬性'bar(obj.foo)    // => 全局屬

3、this與call,apply

顯示綁定規(guī)則：this指向第一個(gè)參數(shù)。

 3.1   call

// 3.1.1var xw = {    name : "小王",    gender : "男",    age : 24,    say : function(school,grade) {        console.log(this.name + " , " + this.gender + " ,今年" + this.age + " ,在" + school + "上" + grade);                                    }}var xh = {    name : "小紅",    gender : "女",    age : 12}
xw.say.call(xh, "實(shí)驗(yàn)小學(xué)", "六年級(jí)")   // => 小紅 , 女 ,今年12 ,在實(shí)驗(yàn)小學(xué)上六年級(jí)

在3.1.1代碼示例中，當(dāng)調(diào)用say時(shí)強(qiáng)制把它的this綁定到了xh上。

 3.2    apply

// 3.2.1var xw = {    name : "小王",    gender : "男",    age : 24,    say : function(school,grade) {        console.log(this.name + " , " + this.gender + " ,今年" + this.age + " ,在" + school + "上" + grade);                                    }}var xh = {    name : "小紅",    gender : "女",    age : 12}
xw.say.apply(xh,["實(shí)驗(yàn)小學(xué)","六年級(jí)"])  // => 小紅 , 女 ,今年12 ,在實(shí)驗(yàn)小學(xué)上六年級(jí)

學(xué)習(xí)更多技能

請(qǐng)點(diǎn)擊下方公眾號(hào)