javascript：this指向

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