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