javascript：this指向

小太陽xdq發表於2018-12-20
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 ,在實驗小學上六年級

相關文章