前端開發：詳細講解this指向相關的(de)知識
首先來(lái)了(le／liǎo)解一(yī / yì ／yí)下this指向的(de)優點好處：在(zài)特定函數和(hé / huò)寫法中，this可以(yǐ)方便快捷的(de)引用對象，使得寫法簡單容易複用和(hé / huò)代碼簡潔精簡。
一(yī / yì ／yí)、this指向不(bù)同是(shì)由函數調用方式決定的(de)
1、普通函數的(de)調用
this指向window，eg:
function fun() {
console.log(this); //指向window }
window.fun();2.構造函數的(de)調用，this指向實例對象
function Student(age, name) {
this.age = age;
this.name = name
console.log(this) //this分别指向Student的(de)實例對象s1、s2 }
var s1 = new Student(18, 'ls')
var s2 = new Student(18, ‘cc’)3.對象方法的(de)調用，this指向該對象方法所屬的(de)對象
var obj = {
fun: function () {
console.log(this); //指向obj }
}
obj.fun();4.定時(shí)器函數的(de)調用，this指向window
<body>
<button id="btn">cc</button>
<script>
var objBtn = document.getById("btn");
objBtn.onclick = function() {
console.log(this); // 指向btn
}
</script>
</body>6.箭頭函數的(de)調用，this指向父級對象
var obj = {
a: 1,
fun: () => {
console.log(this); //this指向了(le／liǎo)obj的(de)父級對象window
}
}
obj.fun(); //指向window7.匿名函數的(de)調用，this指向全局變量window
(function fun() {
console.log(this); //this指向全局變量window
})();二、更改this指向的(de)三個(gè)方法
每一(yī / yì ／yí)個(gè)function構造函數的(de)都有是(shì)三個(gè)方法：call(), apply(), bind()，也(yě)就(jiù)是(shì)這(zhè)三個(gè)方法可以(yǐ)更改this的(de)指向，但是(shì)call(), apply()隻能在(zài)特定作用域調用函數，而(ér)bind()方法會創建一(yī / yì ／yí)個(gè)函數實例，然後this會被綁定到(dào)bind()上(shàng)面。
1.call() 方法
把普通函數的(de)this指向window的(de)，更改this指向，eg:
var Student = {
name:”caicai”,
age:25
}
function fun(x,y){
console.log(x+","+y);
console.log(this);
}
fun(“ll”,30);修改上(shàng)面例子(zǐ)的(de)更改this指向，如下所示：
var Student = {
name:"caicai",
age:25
}
function fun(x,y){
console.log(x+","+y);
console.log(this);
console.log(this.name);
}
fun.call(Student,”ll”,30); //現在(zài)this就(jiù)指向Student了(le／liǎo)2.apply() 方法
apply() 方法與call()很類似，它們的(de)不(bù)同之(zhī)處在(zài)于(yú)提供參數的(de)方式，apply()使用參數數組，而(ér)不(bù)是(shì)參數列表
<script>
var Student = {
name:"caicai",
age:25
}
function fun(x,y){
console.log(x+","+y);
console.log(this.age);
}
aa.call(Student,1,2);
aa.apply(Student,[1,2]);
</script>3.bind()方法
bind()方法創建的(de)是(shì)一(yī / yì ／yí)個(gè)新函數(也(yě)稱爲(wéi / wèi)綁定函數)，它和(hé / huò)被調用函數有相同的(de)函數體。當目标函數被調用時(shí)，this的(de)值就(jiù)會綁定到(dào)bind()的(de)第一(yī / yì ／yí)個(gè)參數上(shàng)面。
<script>
var Student = {
name:"caicai",
age:25
}
function fun(x,y){
console.log(x+","+y);
console.log(this.age);
}
aa.call(Student,1,2);
aa.apply(Student,[1,2]);
aa.bind(Student,1,2)(); //必須調用，不(bù)然就(jiù)隻是(shì)單純的(de)綁定而(ér)已
</script>4. 存儲this指向到(dào)變量裏面
var obj = document.getById("obj");
obj.onclick = function () {
var _this = this; //把this儲存在(zài)變量中，且不(bù)改變定時(shí)器的(de)指向
setTimeout(function () {
console.log(this); //指向window
console.log(_this); //this對當前對象的(de)引用
}, 2000);
}以(yǐ)上(shàng)就(jiù)是(shì)本章全部内容，歡迎關注三掌櫃的(de)微信公衆号“程序猿by三掌櫃”，三掌櫃的(de)新浪微博“三掌櫃666”，歡迎關注！
© 著作權歸作者所有