文章目錄
- this
- call、apply和bind函數
- call函數
- apply函數的用法
- bind函數的用法
this
函數中的this，是指函數的執行上下文環境。
函數的調用方式決定了this的指向，this不能在執行中被指派，而且每次函數被調用的時候，this的值也有可能不同。
如果我們通過構造函數來建立執行個體的時候，等函數執行完成後，函數的this是指向執行個體，比如：
function Person(name){
this.name = name;
}
const son = new Person('35456');
console.log(son.name) 在JavaScript中，this是指向函數的調用者。那麼在不同的場景中，this的指向也是有所不同的：
- 在函數沒有所屬對象，而是直接調用的時候，this指向的是window對象。比如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
var value = 10;
var obj = {
value: 100,
method: function () {
console.log(this);//obj對象
var foo = function () {
console.log(this.value); // 10
console.log(this); // Window對象
};
foo();
return this.value;
}
};
obj.method();
</script>
</body>
</html> 其中method函數的所屬對象是obj，在method函數的this是指向obj對象的，然而foo函數沒有聲明所屬的對象，那麼foo函數的this是指向window對象。
- this指向所屬對象，比如上面代碼中的method函數的所屬對象是obj，是以我們執行這段代碼
console.log(obj.method())
- this指向對象執行個體，這裡指的是通過new操作符調用構造函數來生成對象執行個體的時候，那麼構造函數的this指向的是這個執行個體，比如：
// 全局變量
var number = 10;
function Person() {
// 複寫全局變量
number = 20;
// 執行個體變量
this.number = 30;
}
// 原型函數
Person.prototype.getNumber = function () {
return this.number;
};
// 通過new操作符擷取對象的執行個體
var p = new Person();
console.log(p.getNumber()); // 30 - this指向call函數、apply函數、bind函數調用重新綁定的對象；
- 閉包中的this，指向自身，因為閉包内的this不能通路外部函數的this變量。
ES5引入了bind方法來設定函數的this指向，不用考慮函數是如何被調用的；
ES6引入了箭頭函數，箭頭函數不提供自身的this綁定，箭頭函數的this對象是函數定義時所在的對象，而不是使用時所在的對象；
call、apply和bind函數
每一個函數都會包含call和apply函數，這兩個函數不是繼承來的，而是本身就存在的，它們的作用是改變函數的執行上下文環境，也就是改變函數this的指向。
另一個bind函數也是同樣的作用，隻是在處理方法有所差別。
call函數
将函數的執行上下文環境換成另一個對象，比如：
function.call(thisObj,arg1,arg2,...) call函數的第一個參數表示是新的對象上下文，函數的this指向thisObj，如果thisObj為null或者undefined，那麼函數的this指向window對象。其他參數就是函數所接受的參數了。
apply函數的用法
apply的文法：
function.call(thisObj,[arg1,arg2,arg3,...])
bind函數的用法
- call和apply函數在執行後立即調用前面的函數。bind函數不會，bind函數是傳回一個新的函數，可以在任何時候進行調用。
- 傳入參數格式有所差別。
![nodejs微信開發---授權登入+擷取使用者資訊微信網頁授權[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)