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