前言

this是執(zhí)行上下文環(huán)境的一個(gè)屬性，而不是某個(gè)變量對(duì)象的屬性。

在全局代碼中，this始終是全局對(duì)象本身，這樣就有可能間接的引用到它了。

在通常的函數(shù)調(diào)用中，this是由激活上下文代碼的調(diào)用者來提供的，即調(diào)用函數(shù)的父上下文(parent context )。this取決于調(diào)用函數(shù)的方式。

function函數(shù)里的this指向，由函數(shù)的調(diào)用方式?jīng)Q定:

• 如果new關(guān)鍵詞出現(xiàn)在被調(diào)用函數(shù)的前面，那么JavaScript引擎會(huì)創(chuàng)建一個(gè)新的對(duì)象，那么函數(shù)中的this指向的就是這個(gè)新創(chuàng)建的對(duì)象;
• 如果通過bind的方式得到的函數(shù)，那么該函數(shù)中的this指向bind的第一個(gè)參數(shù);
• 如果通過apply、call的方式觸發(fā)函數(shù)，那么函數(shù)中的this指向傳入函數(shù)的第一個(gè)參數(shù);
• 如果通過某個(gè)對(duì)象使用句點(diǎn)符號(hào)觸發(fā)函數(shù)，那么函數(shù)中的this指向該對(duì)象;
• 如果直接觸發(fā)函數(shù)，那么函數(shù)中的this指向全局對(duì)象(在瀏覽器中指向window，在node.js中指向global);

非函數(shù)里的this指向:

• 不在函數(shù)里的this指向全局對(duì)象(在瀏覽器中指向window，在node.js中指向global);

詳細(xì)分析this指向的這5種情況：

1、new 關(guān)鍵字，作為構(gòu)造器調(diào)用的函數(shù)中的this

如果new關(guān)鍵詞出現(xiàn)在被調(diào)用函數(shù)的前面，那么JavaScript引擎會(huì)創(chuàng)建一個(gè)新的對(duì)象，那么函數(shù)中的this指向的就是這個(gè)新創(chuàng)建的對(duì)象;

function Cat(name) {var _this = this;this.name = name;this.test = function() {console.log(`this equal _this: ${_this === this}`);console.log(`this euqal window: ${this === window}`);} } var mi = new Cat('mi'); mi.test(); // "this equal _this: true"// "this euqal window: false" var test1 = mi.test; test1();// "this equal _this: false"// "this euqal window: true" 復(fù)制代碼

2、bind 指定this

var obj2 = {}; function thisFunc2() {console.log(`this2 equal window: ${this===window}`);console.log(`this2 equal obj2: ${this===obj2}`); };var thisFunc22 = thisFunc2.bind(obj2); thisFunc2();// "this2 equal window: true"// "this2 equal obj2: false" thisFunc22();// "this2 equal window: false"// "this2 equal obj2: true" 復(fù)制代碼

3、call、apply重定向this

如果通過apply、call的方式觸發(fā)函數(shù)，那么函數(shù)中的this指向傳入函數(shù)的第一個(gè)參數(shù);

var GlobalName = 'globalName'; var obj3 = 'sofia'; function thisFunc3(a) {console.log(`this3'Name: ${this}`);console.log(`a: ${a}`); }var thisFun33 = thisFunc3.bind(obj3, 4); thisFun33.call(GlobalName, 3);// "this3'Name: sofia"// "a: 4"thisFun33();// "this3'Name: sofia"// "a: 4" 復(fù)制代碼

4、對(duì)象屬性的方法

var obj4 = {thisFunc4: function () {console.log(`this4 equal obj4: ${this===obj4}`);} }; obj4.thisFunc4(); // "this4 equal obj4: true" 復(fù)制代碼var obj5 = {}; function thisFunc5 () {console.log(`this5 equal obj5: ${this===obj5}`); } obj5.thisFunc5 = thisFunc5; obj5.thisFunc5(); // "this5 equal obj5: true" 復(fù)制代碼var obj6 = {}; obj6.thisFunc6 = function () {console.log(`this6 equal obj6: ${this===obj6}`); } obj6.thisFunc6(); // "this6 equal obj6: true" 復(fù)制代碼var obj7 = {}, obj77 = {}; obj7.thisFunc7 = function () {console.log(`this7 equal obj7: ${this===obj7}`);console.log(`this7 equal obj77: ${this===obj77}`); } var thisFunc77 = obj7.thisFunc7.bind(obj77) thisFunc77(); // "this7 equal obj7: false" // "this7 equal obj77: true" 復(fù)制代碼

5、直接調(diào)用

function thisFunc1() { console.log(`this1 equal window: ${this===window}`); }; thisFunc1(); // "this1 equal window: true" 復(fù)制代碼

或者換種寫法：

var obj8 = {thisFunc8: function(){console.log(`this8 equal obj8: ${this===obj8}`);console.log(`this8 equal window: ${this===window}`);} } obj8.thisFunc9 = thisFunc77; obj8.thisFunc9(); // "this7 equal obj7: false" // "this7 equal obj77: true"var thisFunc88 = obj8.thisFunc8; thisFunc88(); // "this8 equal obj8: false" // "this8 equal window: true" 復(fù)制代碼

this指向了解測(cè)試

題目1. this指針

function logName(){console.log(this.name); } function doFun1(fn){fn(); } function doFun2(o){o.logName(); } var obj = {name: "LiLei",logName: logName }; var name = "HanMeiMei"; doFun1(obj.logName); doFun2(obj); 復(fù)制代碼

結(jié)果

HanMeiMei -------------------------------------------- LiLei 復(fù)制代碼

題目2.call、apply修改this指向

function fun(somthing) {console.log(`name: ${this.name}, somthing: ${somthing}`); };function bindFun(fn, obj) {return function () {return fn.apply(obj, arguments);} } var obj = { name: "LiLei" }; var bar = bindFun(fun, obj); console.log(bar); var b = bar('Sofia'); 復(fù)制代碼

結(jié)果

function () {return fn.apply(obj, arguments); } -------------------------------------------- name: LiLei, somthing: Sofia 復(fù)制代碼

題目3.立即執(zhí)行函數(shù)

function logName() {console.log(this);console.log(this.name); } var name = "XiaoMing"; var LiLei = { name: "LiLei", logName: logName }; var HanMeiMei = { name: "HanMeiMei" }; (HanMeiMei.logName = LiLei.logName)(); 復(fù)制代碼

結(jié)果

window -------------------------------------------- XiaoMing 復(fù)制代碼

總結(jié)

以上是生活随笔為你收集整理的javascript中 this 指向问题的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。