關(guān)注“前端學(xué)苑” ，堅(jiān)持每天進(jìn)步一點(diǎn)點(diǎn)

「~this情況分析?~」

每日一題，希望讓愛(ài)學(xué)習(xí)、思考的前端技術(shù)伙伴在一起學(xué)習(xí)、復(fù)盤、成長(zhǎng)。?基礎(chǔ)知識(shí)要夯實(shí)，原理源碼要深入，深度廣度要擴(kuò)展，堅(jiān)持每天進(jìn)步一點(diǎn)點(diǎn)，每天有所收獲。進(jìn)大廠是最終目標(biāo) ?

* 回答面試題的套路

1､先說(shuō)這個(gè)點(diǎn)的明確定義，或者是特性；

2､再說(shuō)具體的應(yīng)用場(chǎng)景；

3､說(shuō)說(shuō)自己的看法、觀點(diǎn)；

4､可以稍微舉一反三，說(shuō)說(shuō)同類特性，或者類似的框架，更好的方案。

項(xiàng)目中this情況使用場(chǎng)景

1)事件綁定；

2)函數(shù)執(zhí)行：1)自執(zhí)行函數(shù)? 2)回調(diào)函數(shù)；

3)構(gòu)造函數(shù)執(zhí)行；

4)基于call /apply /bind 改變函數(shù)中的this；

5)箭頭函數(shù)中沒(méi)有自己的this，所用到的this是使用其上下文中的；

JS中最基本的this情況分析

this函數(shù)的執(zhí)行主體?

1)函數(shù)執(zhí)行主體：誰(shuí)把函數(shù)執(zhí)行的；

2)函數(shù)執(zhí)行上下文：在哪執(zhí)行的；

//?全局上下文中的this是window；//?塊級(jí)上下文中沒(méi)有自己的this，所用到的this都是所處上級(jí)上下文中的this;
console.log(this);?//window
{
????let?n?=?12;
????console.log(this);?//window??上級(jí)上下文是全局上下文
}

規(guī)律：

1)事件綁定：給當(dāng)前元素的某個(gè)事件行為綁定方法，當(dāng)事件觸發(fā)、方法執(zhí)行，方法中的this是當(dāng)前元素本身；

2)普通函數(shù)執(zhí)行

1. 函數(shù)執(zhí)行前面是否有“點(diǎn)”，沒(méi)有“點(diǎn)”，this就是window(或者JS嚴(yán)格模式下是undefined)；

2. 有“點(diǎn)”，“點(diǎn)”前面是誰(shuí)this就是誰(shuí)；

3.匿名函數(shù)(自執(zhí)行函數(shù)/回調(diào)函數(shù))如果沒(méi)有經(jīng)過(guò)特殊的處理，則this一般都是window/undefined，但是如果經(jīng)過(guò)一些特殊處理，一切都以處理后的結(jié)果為主；

1、事件綁定

document.body.onclick?=?function?()?{
????console.log(this);?//body
};
document.body.addEventListener('click',?function?()?{
????console.log(this);?//body
});
//?IE6~8?DOM2事件綁定
document.body.attachEvent('onclick',?function?()?{
????console.log(this);?//window
});?

2、普通函數(shù)執(zhí)行

function?sum?()?{
??console.log(this);?//?結(jié)果：undefined
}

說(shuō)明：創(chuàng)建函數(shù)，沒(méi)有執(zhí)行。this不知道是誰(shuí)。

1)有“點(diǎn)”，“點(diǎn)”前面是誰(shuí)this就是誰(shuí)

//?開啟JS嚴(yán)格模式??=>?擴(kuò)展：嚴(yán)格模式和非嚴(yán)格模式的區(qū)別//?"use?strict";
function?fn()?{
????console.log(this);
}
let?obj?=?{
????name:?'前端學(xué)苑',
????fn:?fn
};
fn();?//this->window/undefined
obj.fn();?//this->obj?

2)匿名函數(shù)

(function?()?{
????console.log(this);?//this->window/undefined
})();

說(shuō)明：開啟嚴(yán)格模式是undefined

function?fn(callback)?{
????callback();?//this->window/undefined
}
let?obj?=?{
????//?sum:function(){}
????sum()?{
????????console.log(this); // window
????}
};
//?obj.sum();?//this->obj//?回調(diào)函數(shù)：把一個(gè)函數(shù)作為實(shí)參值，傳遞給另外一個(gè)函數(shù)//?=>?fn(function?()?{});
fn(obj.sum);?setTimeout(function?()?{
????console.log(this);?//window或者undefined
},?1000);let?obj?=?{
????name:?'xxx'
};
let?arr?=?[10,?20];
arr.forEach(function?(item,?index)?{
????console.log(this);? // this -> obj
},?obj);

說(shuō)明：obj 因?yàn)橛|發(fā)回調(diào)函數(shù)執(zhí)行的時(shí)候，forEach內(nèi)部會(huì)把回調(diào)函數(shù)中的this改變?yōu)閭鬟f的第二個(gè)參數(shù)值obj “特殊處理”。

let?obj?=?{
????sum()?{
????????console.log(this);
????}
};
obj.sum();?//this->obj
(obj.sum)();?//this->obj
(10,?obj.sum)();?//this->window?

說(shuō)明：括號(hào)表達(dá)式，小括號(hào)中包含“多項(xiàng)”(如果只有一項(xiàng)，和不加括號(hào)沒(méi)啥本質(zhì)區(qū)別)，其結(jié)果是只取最后一項(xiàng)；但是這樣處理后，this會(huì)發(fā)生改變，變?yōu)閣indow/undefined。

3、構(gòu)造函數(shù)調(diào)用 ( 實(shí)例化后的對(duì)象 )

function?School(){
???this.said=function(){
????console.log(this);
???}
??}
var?nanj=new?School();
nanj.said();//對(duì)象調(diào)用自己的方法，this===nanj，類似上面

4、基于call /apply /bind 改變函數(shù)中的this

window.name?=?'WINDOW';let?obj?=?{name:?'前端學(xué)苑',age:?2
};function?fn(x,?y)?{console.log(this,?x?+?y);
}?
fn();?//this->window
obj.fn();?//Uncaught?TypeError:?obj.fn?is?not?a?functionfn.call(obj);?//this->obj??
fn.call(obj,?10,?20);?//this->obj?x->10?y->20
fn.call();?//this->window?嚴(yán)格模式下undefined
fn.call(null);?//this->window?嚴(yán)格模式下null?「?jìng)鬟f的是undefiend也是如此」
fn.call(10,?20);?//this->10「對(duì)象」?x->20??y->undefined

解析說(shuō)明：?fn.call(obj);

底層處理方式：fn先基于__proto__找到Function.prototype.call，把call方法執(zhí)行的時(shí)候，call方法內(nèi)部實(shí)現(xiàn)了一些功能：會(huì)把fn執(zhí)行，并且讓fn中的this變?yōu)榈谝粋€(gè)實(shí)參值。

* apply的作用和細(xì)節(jié)上和call一樣，只有一個(gè)區(qū)別：傳遞給函數(shù)實(shí)參的方式不一樣。

fn.call(obj,?10,?20);
fn.apply(obj,?[10,?20]);?

最后結(jié)果和call是一樣的，只不過(guò)apply方法執(zhí)行的時(shí)候要求：傳遞給函數(shù)的實(shí)參信息都要放置在一個(gè)數(shù)組中，但是apply內(nèi)部也會(huì)向call方法一樣，把這些實(shí)參信息一項(xiàng)項(xiàng)的傳遞給函數(shù)。

5、箭頭函數(shù)沒(méi)有自己的this

??實(shí)例一：

let?obj?=?{
????name:?'前端學(xué)苑',
????age:?11,
????fn:?function?()?{
????????//?this->obj
????????let?that?=?this;
????????return?function?()?{
????????????//?this->window
????????????//?如果需要改變obj.name，可以用that替換this
????????????that.name?=?'FE2020';
????????????console.log(this);
????????};
????}
};
let?f?=?obj.fn();
f();

??實(shí)例二：

let?obj?=?{
????name:?'前端學(xué)苑',
????age:?11,
????fn:?function?()?{
????????//?this->obj
????????return?()?=>?{
????????????this.name?=?'FE2020';
????????????console.log(this); // {name:'FE2020', age: 11, fn:f}
????????};
????}
};
let?f?=?obj.fn();
f.call(100);?

說(shuō)明：

箭頭函數(shù)沒(méi)有this(方法執(zhí)行的時(shí)候不存在初始this這一項(xiàng)操作)，所以基于call/apply操作它都是無(wú)用的，沒(méi)有this。

* 可以在留言區(qū)寫下你的答案或理解，一起成長(zhǎng)進(jìn)大廠。

推薦熱門技術(shù)文章：

JS第一座大山：堆棧內(nèi)存和閉包作用域?(想深入看這里)

• JS基礎(chǔ)進(jìn)階- 堆棧內(nèi)存和閉包作用域

• JS基礎(chǔ)進(jìn)階- 閉包作用域和JS高階編程技巧

覺(jué)得本文對(duì)你有幫助？請(qǐng)分享給更多人

關(guān)注「前端學(xué)苑」加星標(biāo)，提升前端技能

如果覺(jué)得這篇文章還不錯(cuò)，來(lái)個(gè)【分享、點(diǎn)贊、在看】三連吧，讓更多的人也看到~

總結(jié)

以上是生活随笔為你收集整理的js自动触发onclick_每日一题JS中最基本的this情况分析的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

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