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 ,在實驗小學上六年級