一文詳解JavaScript中this指向的問題
前提：文章討論的都是非嚴(yán)格模式下this指向
1. 默認(rèn)綁定
例子1
var fn = function () {
console.log(this === window);
};
fn(); // true例子2
let fn = function () {
console.log(this === window);
};
fn(); // true
例1使用var定義在全局作用域中，例2使用let定義在塊作用域中，但內(nèi)部的this都指向window
原因：函數(shù)直接調(diào)用，會(huì)做默認(rèn)綁定，可類比為 fn.call(undefined)，call 第一個(gè)參數(shù)是null或undefined，那么 this 將指向全局對(duì)象
常見面試題
示例1：
var a = 3;
function c() {
alert(a); //3
}
(function () {
var a = 4;
c();
})();示例2：
var name = "123";
var obj = {
name: "456",
print: function () {
function a() {
console.log(this.name); //123
}
a();
},
};
obj.print();
無論面試題設(shè)計(jì)的多花里胡哨，只要記住 普通函數(shù)直接調(diào)用，默認(rèn)綁定，this指向全局 便可知道函數(shù)內(nèi)部this指向window
2. 隱式綁定
如果函數(shù)調(diào)用時(shí)，前面存在調(diào)用它的對(duì)象，那么this就會(huì)隱式綁定到這個(gè)對(duì)象上
let obj = {
name: "123",
fn: function () {
console.log(this.name); //123
},
};
obj.fn();
如果函數(shù)調(diào)用前存在多個(gè)對(duì)象，this指向距離調(diào)用自己最近的對(duì)象
let obj = {
name: "123",
o: {
name: "456",
func: function () {
console.log(this.name);
},
},
};
obj.o.func(); //456
隱式丟失：通過變量賦值將對(duì)象中的函數(shù)變成普通函數(shù)
var name = "1";
let obj = {
name: "2",
fn: function () {
console.log(this.name);
},
};
let fn1 = obj.fn;
fn1(); //1
fn1 直接調(diào)用，默認(rèn)綁定，this指向全局
3. 顯示綁定
顯示綁定：通過call、apply以及bind方法改變this的行為
let obj1 = {
name: "1",
};
let obj2 = {
name: "2",
};
let obj3 = {
name: "4",
};
var name = "3";
function fn() {
console.log(this.name);
}
fn(); //3 默認(rèn)綁定，this指向全局
fn.call(obj1); //1 this指向obj1
fn.apply(obj2); //2 this指向obj2
fn.bind(obj3)(); //4 this指向obj3
拓展：call、apply、bind 相同點(diǎn)與不同點(diǎn)
相同點(diǎn)：改變this的指向
不同點(diǎn)：
call 第二個(gè)參數(shù)傳入一個(gè)參數(shù)列表
apply 第二個(gè)參數(shù)傳入一個(gè)參數(shù)數(shù)組
bind 第二個(gè)參數(shù)傳入一個(gè)參數(shù)列表，返回一個(gè)函數(shù)，不會(huì)立即執(zhí)行
4. new 綁定
this指向生成的新對(duì)象
function Person(name, age) {
this.name = name;
this.age = age;
}
const p1 = new Person("1", 20);
console.log(p1); // {name:'1', age:20}
5. 箭頭函數(shù)的this
默認(rèn)綁定外層 this
例1
var name = "1";
let obj = {
name: "2",
fn: function () {
setTimeout(function () {
console.log(this.name); //1
});
},
};
obj.fn();
setTimeout實(shí)際是window.setTimeout，因此函數(shù)內(nèi)部this指向window，打印結(jié)果為1
例2
var name = "1";
let obj = {
name: "2",
fn: function () {
setTimeout(() => {
console.log(this.name); //2
});
},
};
obj.fn();
由于使用了箭頭函數(shù)，默認(rèn)綁定外層this，this指向函數(shù)fn
fn由obj調(diào)用，this隱式綁定到obj，最后打印的結(jié)果為2
例3:
var name = "window";
var student = {
name: "1",
fn: function () {
var fn2 = () => {
console.log(this.name);
};
fn2();
},
fn3: () => {
console.log(this.name);
},
};
student.fn(); // '1'
student.fn3(); // 'window'
- student.fn() 內(nèi)部執(zhí)行的是函數(shù)fn2，由于fn2是直接調(diào)用，默認(rèn)綁定到window上，但由于fn2是箭頭函數(shù)，綁定外一層this，所以this指向函數(shù)fn，fn由student對(duì)象調(diào)用，因此最終this指向student
- student.fn3() 隱式綁定this指向student，由于fn3是箭頭函數(shù)，默認(rèn)綁定外一層的this，最終this指向window
例4：防抖函數(shù)
function debounce(fn, delay) {
let timer = null;
return function () {
clearTimeout(timer);
timer = setTimeout(() => {
//誰調(diào)用，this指向誰
fn.apply(this, arguments);
}, delay || 1000);
};
}
function fn() {
console.log(this); //document
}
document.addEventListener("click", debounce(fn));
setTimeout函數(shù)中的this默認(rèn)指向window，因?yàn)槭羌^函數(shù)，默認(rèn)綁定外層this，因此this指向匿名函數(shù)，匿名函數(shù)由document調(diào)用，所以this指向document。再通過apply將函數(shù)fn的this綁定到document上，因此打印出document
6. 優(yōu)先級(jí)
顯式綁定（bind>call/apply） > 隱式綁定 > 默認(rèn)綁定
1. 隱式綁定 > 默認(rèn)綁定
function bar() {
console.log(this); //info
}
const info = {
bar: bar,
};
info.bar();
2. 顯示綁定 > 隱式綁定
var fullName = "global";
const info = {
fullName: "1",
getName: function () {
console.log(this.fullName);
},
};
info.getName.call(null); //global
3. bind > apply/call
function bar() {
console.log(this); //{age: 1}
}
bar.bind({ age: 1 }).call({ age: 2 });
函數(shù)中的this綁定在 { age: 1 } 上，即使后面又使用了call綁定
7. 總結(jié)
1. 普通函數(shù)，this的值取決于函數(shù)被調(diào)用的方式，分為默認(rèn)綁定，隱式綁定和顯示綁定
2. 箭頭函數(shù)，默認(rèn)綁定外層this
到此這篇關(guān)于一文詳解JavaScript中this指向的問題的文章就介紹到這了,更多相關(guān)JavaScript this指向內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
JS函數(shù)修改html的元素內(nèi)容,及修改屬性內(nèi)容的方法
下面小編就為大家?guī)硪黄狫S函數(shù)修改html的元素內(nèi)容,及修改屬性內(nèi)容的方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-10-10
通過JS查看到一個(gè)頁面有些什么對(duì)象的實(shí)現(xiàn)代碼2008-04-04
這篇文章主要為大家詳細(xì)介紹了前端微信支付js代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-07-07
這篇文章主要介紹了如何用JS求Number類型數(shù)組中最大元素2018-04-04
這篇文章主要介紹了JS簡單驗(yàn)證上傳文件類型的方法,涉及javascript文件遍歷及字符串截取、匹配等相關(guān)操作技巧,需要的朋友可以參考下2017-04-04
Uniapp實(shí)現(xiàn)地圖獲取定位功能(推薦)
本文詳細(xì)介紹了如何在Uniapp項(xiàng)目中集成地圖功能,實(shí)現(xiàn)定位獲取,并解決微信小程序、APP、H5三端的兼容性問題,涵蓋了環(huán)境準(zhǔn)備、配置地圖基礎(chǔ)功能、獲取用戶定位、多平臺(tái)適配要點(diǎn)以及常見問題及解決方案,感興趣的朋友一起看看吧2025-03-03
詳解ES6新增字符串?dāng)U張方法includes()、startsWith()、endsWith()
這篇文章主要介紹了詳解ES6新增字符串?dāng)U張方法includes()、startsWith()、endsWith()，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-05-05
JavaScript是用來在數(shù)據(jù)被傳輸?shù)椒?wù)前對(duì)html表單中輸入的數(shù)據(jù)進(jìn)行驗(yàn)證，使用javascript對(duì)用戶輸入的信息進(jìn)行驗(yàn)證是項(xiàng)目必須的，下面小編給大家整理一些比較常用的javascript表單驗(yàn)證，需要的朋友可以參考下2015-08-08
IScroll5 中文API參數(shù)說明和調(diào)用方法
IScroll是移動(dòng)頁面上被使用的一款仿系統(tǒng)滾動(dòng)插件。IScroll5相對(duì)于之前的IScroll4改進(jìn)了許多，使得大家可以更方便的定制所需的功能了。2016-05-05
這篇文章主要介紹了JS限制文本框只能輸入數(shù)字和字母方法,本文給出了限制只能輸入數(shù)字、限制只能輸入字母、限制只能輸入數(shù)字和字母3種腳本,需要的朋友可以參考下2015-02-02