函式內部This的指向問題

Pig in the north發表於2020-11-18
函式

一、函式內部this的指向
this的指向是根據呼叫者來確定的，呼叫的方式不同，this的指向不同。如下所述：
1.普通函式的呼叫中，函式內部的this指向全域性的window

<script>
function fn(){
console.log(this)
}
fn()
</script>
//此處的thi指向的是window
//故呼叫該函式控制檯輸出的結果為window

2.建構函式的呼叫中，this指向的是new出來的例項化物件

<script>
function fn(name,age,sex){
this.name=username,
this.age=userage,
this.sex=sex
console.log(this)
}
var fn1 = new fn('張三',20,'男')
</script>
//輸出結果為：fn {name: "張三", age: 20, sex: "男"}
//故，建構函式中的this指向的是new出來的例項化物件

3.物件方法的呼叫中，this指向的是該方法所屬的物件

<script>
var obj = {
            name: '張三',
            age: 20,
            sex: '男',
            say: function () {
                console.log(this);
            }
        }
        obj.say()
        </script>
 //輸出結果為：{name: "張三", age: 20, sex: "男", say: ƒ}
//故，物件方法呼叫中的this指向的是該方法所屬的物件

4.繫結事件方法中，this指向的是繫結事件的物件

<body>
    <button id="but">按鈕</button>
    <script>
        $('#but').on('click', function () {
            console.log(this);
        })
    </script>
</body>
//輸出結果為：<button id=​"but">​按鈕​</button>​
//故：繫結事件方法中的this指向的是繫結事件的物件

5.定時器函式中，this指向的是window

<script>
        setInterval(function () {
            console.log(this);
        }, 3000)
    </script>
//輸出的結果為：Window {window: Window, self: Window, document: document, name: "", location: Location, …}
//故，在定時器函式中this的指向是window

6.立即指向函式中，this指向的是window

(function fn(){
console.log(this)
})()
//輸出的結果為：Window {window: Window, self: Window, document: document, name: "", location: Location, …}
//故，在立即執行函式中this的指向是window

二、如何改變this的指向
1.call方法
call()的特點：
1.呼叫函式
2.改變this的指向
3.經常用做繼承
程式碼演示：

var obj = {
	name: 'zhangsan'
}
 function fn(a, b) {
      console.log(this);
      console.log(a+b)
};
fn()
//輸出結果：Window {window: Window, self: Window, document: document, name: "", location: Location, …}
// 此時的this指向的是window
fn.call(obj,1,2)
//輸出結果：{name: "zhangsan"}和3
//此時的this指向的是物件obj

2.apply方法
apply()的特點：
1.呼叫函式
2.改變this的指向
3.經常在陣列中使用
程式碼演示：

var obj = {
	name: 'zhangsan'
}
 function fn(a, b) {
      console.log(this);
      console.log(a+b)
};
fn()
//輸出結果：Window {window: Window, self: Window, document: document, name: "", location: Location, …}
// 此時的this指向的是window
fn.apply(obj,[1,2])
//輸出結果：{name: "zhangsan"}和3
//此時的this指向的是物件obj

3.bind方法
bind()的特點：
1.不呼叫函式
2.改變this的指向
3.返回一個新的陣列
4.經常在不需要呼叫函式但是需要改變this的指向時使用

 var obj = {
 name: 'zhangsan'
 };

function fn(a, b) {
	console.log(this);
	console.log(a + b);
};
var fn1 = fn.bind(obj, 1, 2);
fn1()
//輸出結果：{name: "zhangsan"}和3
//此處的fn1是bind返回的新函式
//此時的this指向的是obj物件

相關文章