JavaScript this常見指向問題

this的用法​

1、直接在函數中使用 誰調用這個函數this就指向誰 

2、對象中使用, 一般情況下指向該對象 

3、在構造函數中使用 

改變this的指向，兩種方法的作用都是相同的，傳遞的寫法不同而已。

call -- (指向誰，參數1，參數2......) 

apply -- (指向誰，[參數1，參數2]) 數組的形式

1、 this與普通函數執行

• 當一個函數執行不帶任何修飾時，使用預設綁定規則。
• 預設綁定：函數體如果在非嚴格模式下，this綁定到window，嚴格模式下綁定到undefined。

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

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

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

// 1.5 函數體在非嚴格模式下，而函數調用在嚴格模式下時, this依然指向window
function fn () {
    console.log(this)
}
(function () {
    'use strict'
    fn()    // => window
})()      

2、this與對象中的方法執行

2.1 無論是否是嚴格模式，當函數引用有上下文對象時，隐式綁定規則會把函數調用中的this綁定到這個上下文對象。

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


obj.test();   // => 1      

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


obj.test();    // => 1      

2.2 對象屬性引用鍊中隻有最頂層或者說隻有最後一層會影響調用位置。

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

2.3 隐式丢失：被隐式綁定的函數可能會丢失綁定對象。

// 2.3.1 将obj.foo當作函數别名指派給一個變量
function foo () {
    console.log(this.a)
}
var obj = {
    a: 2,
    foo: foo
}
var bar = obj.foo   // 函數别名
var a = '全局屬性'
bar()   // => 全局屬性      

在2.3.1中，雖然bar是obj.foo的一個引用，但是實際上，它引用的是foo函數本身，是以此時的bar() 其實是一個不帶任何修飾的普通函數調用。是以也使用預設綁定規則。​

// 2.3.2 将obj.foo當作bar的回調函數。
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

顯示綁定規則：this指向第一個參數。

 3.1   call

// 3.1.1
var 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, "實驗國小", "六年級")   // => 小紅 , 女 ,今年12 ,在實驗國小上六年級      

在3.1.1代碼示例中，當調用say時強制把它的this綁定到了xh上。

 3.2    apply

// 3.2.1
var 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,["實驗國小","六年級"])  // => 小紅 , 女 ,今年12 ,在實驗國小上六年級      

​