● 在 javascript 語言中, 有一個奇奇怪怪的 "關(guān)鍵字" 叫做 this
● 為什么說它是 奇奇怪怪 呢, 是因為你寫出 100 個 this, 可能有 100 個解釋, 完全不挨邊
● 但是, 在你的學(xué)習(xí)過程中, 搞清楚了 this 這個玩意, 那么會對你的開發(fā)生涯有很大幫助的
● 接下來咱們就開始一點一點的認識一下 this
this 初認識
● 看到 this, 先給他翻譯過來 "這個"
● 到底啥意思呢 ?
○ 飯桌上, 你媽和你說, 你多吃點的這個
○ 商店里, 你媳婦和你說, 這個包 這個包 這個包 我都要
○ 宴會上, 你爸和人介紹說, 這個傻小子是我兒子
● 你看, 每一句話上都有 "這個", 但是每個 "這個" 都是一個意思嗎 ? 并不
● 就像我們 js 內(nèi)的 this 一樣, 每一個 this 的意思都不一樣
● 但是我們會發(fā)現(xiàn)
○ 在說話的過程中, "這個" 是和我們說話的手勢有關(guān)系
● 在 js 內(nèi)一個道理
○ this 的意思是和代碼的 "手勢" 有關(guān)系
● 例子 :
○ 當你媳婦手指著一個 LV 包的時候, 說的 "這個" 指代的就是 LV包`
○ 當你媽指著魚香肉絲的時候說 "這個" 指代的就是 魚香肉絲
○ 所以在 javascript 內(nèi)的 this 是要看 "說這句話的代碼手指向哪里了"
● 看看下面一段代碼
var box = document.querySelector('#box')
box.onclick = function () {
console.log(this)
}
○ 當你點擊 box 這個元素的時候, 會觸發(fā)后面的函數(shù)
○ 然后函數(shù)一執(zhí)行, 就會在控制臺打印一下 this
○ 這里的 this 就是 box 這個元素
● 這就是一個非常簡單的 this 指向的例子了
● 接下來我們就開始詳細學(xué)習(xí)一下 this
給你個概念
● this , 是一個指針形變量, 它動態(tài)的指向當前函數(shù)的運行環(huán)境
● "什么鬼東西, 我聽不懂啊"
● 給一個私人的解釋 : "根據(jù) this 所在的函數(shù)是如何被調(diào)用的來決定 this 是什么"
● 舉個栗子來看一下
function fn() {
console.log(this)
}
fn()
// this 就是 window
● 因為 this 是在 fn 函數(shù)內(nèi), 所以 fn 函數(shù)的調(diào)用方式就決定了這個 this 是什么
function a() {
function b() {
console.log(this)
}
b()
}
a()
// this 就是 window
○ 因為 this 是在 b 函數(shù)內(nèi), 所以 b 函數(shù)的調(diào)用方式?jīng)Q定了 this 是什么, 和 a 函數(shù)沒關(guān)系
● 就是這個意思
● 最后, 根據(jù)這些年的經(jīng)驗總結(jié)給出一個私人的概念, 要牢記
○ 函數(shù)的 this
○ 和函數(shù)定義在哪沒關(guān)系
○ 和函數(shù)怎么定義沒關(guān)系
○ 只看這個函數(shù)的調(diào)用方式
○ 箭頭函數(shù)除外
對象調(diào)用
● 對象調(diào)用, 就是利用一個對象作為宿主來調(diào)用函數(shù)
● 最簡單的方式就是把函數(shù)寫在一個對象內(nèi), 利用對象來調(diào)用
// 對象內(nèi)寫一個函數(shù)
const obj = {
fn: function () { console.log(this) }
}
// 調(diào)用這個函數(shù)
obj.fn()
○ 這時候, 我們調(diào)用了和這個對象內(nèi)的 fn 函數(shù)
○ 調(diào)用方式就是利用對象調(diào)用的函數(shù), 所以在這個函數(shù)內(nèi)的 this 就是 obj 這個對象
○ 換句話說, 只要在這個函數(shù)內(nèi), 只要出現(xiàn) this 就是這個對象
全局調(diào)用
● 顧名思義, 全局調(diào)用就是直接調(diào)用一個全局函數(shù)
function fn() {
console.log(this)
}
fn()
○ 此時這個函數(shù)內(nèi)的 this 就是 window
○ 可能有的小伙伴覺得瘋了
○ 但是我們仔細思考一下, 你會發(fā)現(xiàn)
○ 其實 fn 因為是在全局上的, 那么其實調(diào)用的完整寫法可以寫成 window.fn()
○ 此時就回到了之前對象調(diào)用那條路上, 這樣就通順了
奇怪的調(diào)用
● 這個時候, 有的小伙伴可能會想到一個問題, 如果這個函數(shù)不放在全局呢 ?
const obj = {
fn: function () {
function fun() {
console.log(this)
}
fun()
}
}
obj.fn()
● 此時的 this 應(yīng)該是什么呢 ?
● 按照之前的思路思考
○ obj.fn() 確實調(diào)用了函數(shù), 但是 this 不是在 obj.fn 函數(shù)內(nèi), 是在 fun 函數(shù)內(nèi)
○ fun() 確實也調(diào)用了函數(shù), 但是我沒有辦法寫成 window.fun()
○ 那么 this 到底是不是 window 呢, 還是應(yīng)該是 obj 內(nèi)
● 答案確實是 window, 這又是為什么呢 ?
捋一下思路
● 說道這里, 我們會發(fā)現(xiàn)
● this 真的是好奇怪哦 o(*￣︶￣*)o 搞不定了
● 要是按照這個方式, 我來回來去的得記多少種, 誰會記得下來呢
● 接下來(劃重點)
我用我代碼三十年的經(jīng)驗給你總結(jié)出來了一些內(nèi)容, 希望你能牢記
this 的個人經(jīng)驗
● 首先, this 在各種不同的情況下會不一樣
● 那么從現(xiàn)在開始我把我總結(jié)的內(nèi)容毫無保留的傳授給你
經(jīng)驗一 :
● 在 js 的非嚴格模式下適用
● 在非箭頭函數(shù)中適用
● 不管函數(shù)定義在哪, 不管函數(shù)怎么定義, 只看函數(shù)的調(diào)用方式
○ 只要我想知道 this 是誰
○ 就看這個 this 是寫在哪個函數(shù)里面
○ 這個函數(shù)是怎么被調(diào)用的
觀察 this 在哪個函數(shù)內(nèi)
function fn() {
console.log(this)
}
// this 在函數(shù) fn 內(nèi), 就看 fn 函數(shù)是怎么被調(diào)用的就能知道 this 是誰
const obj = {
fn: function () {
console.log(this)
}
}
// this 在 obj.fn 函數(shù)內(nèi), 就看這個函數(shù)怎么被調(diào)用的就能知道 this 是誰
const obj = {
fn: function () {
function fun() {
console.log(this)
}
}
}
// 這個 this 是在 fun 函數(shù)內(nèi)
// 如果你想知道這個 this 是誰
// 和 obj.fn 函數(shù)沒有關(guān)系, 只要知道 fun 函數(shù)是怎么被調(diào)用的就可以了
● 一定要注意 : 你想知道的 this 在哪個函數(shù)內(nèi), 就去觀察哪個函數(shù)的調(diào)用方式就好了
一些常見的函數(shù)調(diào)用方式
1. 普通調(diào)用
● 調(diào)用方式 : 函數(shù)名()
● this 是 window
● 只要你書寫 "函數(shù)名()" 調(diào)用了一個函數(shù), 那么這個函數(shù)內(nèi)的 this 就是 window
function fn() {
console.log(this)
}
fn()
// 這里就是 fn() 調(diào)用了一個函數(shù), 那么 fn 內(nèi)的 this 就是 window
const obj = {
fn: function () {
function fun() {
console.log(this)
}
fun()
}
}
obj.fn()
// 這里的 this 因為是在 fun 函數(shù)內(nèi)
// fun() 就調(diào)用了這個 fun 函數(shù)
// 所以不用管 fun 函數(shù)寫在了哪里
// 這個 fun 函數(shù)內(nèi)的 this 就是 window
2. 對象調(diào)用
● 調(diào)用方式:
○ 對象.函數(shù)名()
○ 對象['函數(shù)名']()
● this 就是這個對象, 對象叫啥, 函數(shù)內(nèi)的 this 就叫啥
const obj = {
fn: function () {
console.log(this)
}
}
obj.fn()
// 因為 obj.fn() 調(diào)用了這個函數(shù), 所以 obj.fn 函數(shù)內(nèi)的 this 就是 obj
const xhl = {
fn: function () {
console.log(this)
}
}
xhl.fn()
// 因為 obj.fn() 調(diào)用了這個函數(shù), 所以 xhl.fn 函數(shù)內(nèi)的 this 就是 xhl
function fn() {
const xhl = {
fn: function () {
console.log(this)
}
}
xhl.fn()
}
fn()
// 因為我們要觀察的 this 是在 xhl.fn 這個函數(shù)內(nèi)
// 所以只需要關(guān)注這個函數(shù)是如何被調(diào)用的即可
// 因為是 xhl.fn 調(diào)用了和這個函數(shù), 所以函數(shù)內(nèi)的 this 就是 xhl
3. 定時器調(diào)用
● 調(diào)用方式
○ setTimeout(function () {}, 1000)
○ setInterval(function () {}, 1000)
● this 就是 window
● 一個函數(shù)不管是怎么定義的, 只要被當做定時器處理函數(shù)使用, this 就是 widnow
setTimeout(function () {
console.log(this)
}, 1000)
// 這里的 this 就是 window
setInterval(function () {
console.log(this)
}, 1000)
// 這里的 this 就是 window
const xhl = {
fn: function () {
console.log(this)
}
}
setTimeout(xhl.fn, 1000)
// 這里的 xhl.fn 函數(shù)不是直接書寫 xhl.fn() 調(diào)用的
// 而是給到了 setTimeout 定時器處理函數(shù)
// 所以這里的 this 就是 window
4. 事件處理函數(shù)
● 調(diào)用方式
○ 事件源.on事件類型 = 事件處理函數(shù)
○ 事件源.addEventListener(事件類型, 事件處理函數(shù))
● this 就是 事件源
● 只要是作為事件處理函數(shù)使用, 那么該函數(shù)內(nèi)的 this 就是 事件源
奧，對了，事件就是：在事件中，當前操作的那個元素就是事件源
box.onclick = function () {
console.log(this)
}
// 這里的 this 就是 box
box.addEventListener('click', function () {
console.log(this)
})
// 這里的 this 就是 box
const xhl = {
fn: function () {
console.log(this)
}
}
box.addEventListener('click', xhl.fn)
// 這里的 xhl.fn 函數(shù)不是直接書寫 xhl.fn() 調(diào)用的
// 而是給到了 事件, 被當做了事件處理函數(shù)使用
// 所以這里的 this 就是 事件源box
const xhl = {
fn: function () {
console.log(this)
}
}
box.onclick = xhl.fn
// 這里的 xhl.fn 函數(shù)不是直接書寫 xhl.fn() 調(diào)用的
// 而是給到了 事件, 被當做了事件處理函數(shù)使用
// 所以這里的 this 就是 事件源box
5. 構(gòu)造函數(shù)調(diào)用
● 調(diào)用方式
○ new 函數(shù)名()
● this 就是該構(gòu)造函數(shù)的當前實例
● 只要和 new 關(guān)鍵字調(diào)用了, this 就是實例對象
function fn() {
console.log(this)
}
const f = new fn()
// 這里的因為 fn 函數(shù)和 new 關(guān)鍵字在一起了
// 所以這里的 this 就是 fn 函數(shù)的實例對象
// 也就是 f
const xhl = {
fn: function () {
console.log(this)
}
}
const x = new xhl.fn()
// 這里的 xhl.fn 也是因為和 new 關(guān)鍵字在一起了
// 所以這里的 this 就是 xhl.fn 函數(shù)的實例對象
// 也就是 x
記清楚原則 :
不管函數(shù)在哪定義
不管函數(shù)怎么定義
只看函數(shù)的調(diào)用方式
經(jīng)驗二 :
● 在嚴格模式下適用
● 其實只有一個
○ 全局函數(shù)沒有 this, 是 undefined
○ 其他的照搬經(jīng)驗一就可以了
1. 非嚴格模式
// 非嚴格模式
function fn() {
console.log(this)
}
fn()
// 因為是在非嚴格模式下, 這里的 this 就是 window
2. 嚴格模式
// 嚴格模式
'use strict'
function fn() {
console.log(this)
}
fn()
// 因為是在嚴格模式下, 這里的 this 就是 undefined
記清楚原則 :
嚴格模式下
全局函數(shù)沒有 this
是個 undefiend
經(jīng)驗三 :
● 專門來說一下箭頭函數(shù)
● 其實也只有一條
○ 推翻之前的所有內(nèi)容
○ 箭頭函數(shù)內(nèi)沒有自己的 this
○ 箭頭函數(shù)內(nèi)的 this 就是外部作用域的 this
● 換句話說, 當你需要判斷箭頭函數(shù)內(nèi)的 this 的時候
○ 和函數(shù)怎么調(diào)用沒有關(guān)系了
○ 要看函數(shù)定義在什么位置
// 非箭頭函數(shù)
const xhl = {
fn: function () {
console.log(this)
}
}
xhl.fn()
// 因為是 非箭頭函數(shù), 所以這里的 this 就是 xhl
// ==========================================================
// 箭頭函數(shù)
const xhl = {
fn: () => {
console.log(this)
}
}
xhl.fn()
// 因為是 箭頭函數(shù), 之前的經(jīng)驗不適用了
// 這個函數(shù)外部其實就是全局了, 所以這里的 this 就是 window
// 非箭頭函數(shù)
box.onclick = function () {
console.log(this)
}
// 因為是 非箭頭函數(shù), 這里的 this 就是 box
// ==========================================================
// 箭頭函數(shù)
box.onclick = () => {
console.log(this)
}
// 因為是 箭頭函數(shù)
// 這個函數(shù)外部就是全局了, 所以這里的 this 就是 window
// 非箭頭函數(shù)
const obj = {
fn: function () {
function fun() {
console.log(this)
}
fun()
}
}
obj.fn()
// 因為是 非箭頭函數(shù), 所以 fun 函數(shù)內(nèi)的 this 就是 window
// ==========================================================
// 箭頭函數(shù)
const obj = {
fn: function () {
const fun = () => {
console.log(this)
}
fun()
}
}
obj.fn()
// 因為是 箭頭函數(shù)
// 那么這個 fun 外面其實就是 obj.fn 函數(shù)
// 所以只要知道了 obj.fn 函數(shù)內(nèi)的 this 是誰, 那么 fun 函數(shù)內(nèi)的 this 就出來了
// 又因為 obj.fn 函數(shù)內(nèi)的 this 是 obj
// 所以 fun 函數(shù)內(nèi)的 this 就是 obj
記清楚原則 :
只要是箭頭函數(shù)
不管函數(shù)怎么調(diào)用
就看這個函數(shù)定義在了哪里
最后
● 好了
● 按照以上三個經(jīng)驗, 記清楚原則
● 那么在看到 this 就不慌了
京公網(wǎng)安備 11010802030320號