簡單分析js中的this的原理
很多人可能會有疑問,this到底是什么?為什么this的值變化多端?
首先我們來概括下this.
this是一個對象,一般存在于函數(shù)中,表示當(dāng)前函數(shù)的執(zhí)行上下文;
值得一提的是,當(dāng)函數(shù)在執(zhí)行后,this才有綁定的對象,函數(shù)未執(zhí)行時(shí),this沒有內(nèi)容
接下來我們看看在不同場景下的this的指向
1.函數(shù)默認(rèn)執(zhí)行 :此時(shí)this指向Window
function fn(){
console.log(this) //Window
};
fn();
在嚴(yán)格模式開啟后,this的指向又有所不同
嚴(yán)格模式下 : this指向undefined
function fn(){
"use strict"
console.log(this) //undefined
};
fn();
2.函數(shù)的隱式執(zhí)行 : this指向函數(shù)的直接執(zhí)行對象
function fn(){
console.log(this);
};
var a = 10;
var obj = {
a:20,
b:fn
};
obj.b(); //this指向obj
var obj2 = {
a:30,
b:obj.b
};
obj2.b(); //this指向obj2
var obj3 = {
a:40,
b:obj2
};
obj3.b.b(); //obj3.b.b等價(jià)于obj2.b this指向obj2
但當(dāng)函數(shù)作為參數(shù)傳到另一個函數(shù)的變量時(shí), 發(fā)生隱式丟失,this指向Window
function fn(){
console.log(this) //Window
};
var obj = {
a:20,
b:fn
};
setTimeout(obj.b, 1000);
function setTimeout(cb,t){
cb(); //obj.b作為參數(shù)傳給cb,而cb前沒對象,相當(dāng)于默認(rèn)方式執(zhí)行fn()
};
3.函數(shù)的顯式執(zhí)行 : this指向指定對象
我們可以通過函數(shù)的bind、call、apply方式指定this的對象,還可以用來修復(fù)上文中的隱式丟失
var obj = {
name: "obj",
show: function () {
console.log(this.name)
}
}
obj.show(); //obj
var obj2 = {
name: "obj2"
};
obj.show.bind(obj2)(); //obj2
var name = "蠟筆笑嘻嘻";
obj.show.bind(window)(); //Window
4.構(gòu)造函數(shù)執(zhí)行(通過new執(zhí)行)
構(gòu)造函數(shù)中的this 會指向創(chuàng)建出來的實(shí)例對象
function Person() {
this.name = 'zhar';
}
var p = new Person();
console.log(p.name); //zhar
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Three.js后期處理效果(發(fā)光描邊OutlinePass)
這篇文章主要給大家介紹了關(guān)于Three.js后期處理效果(發(fā)光描邊OutlinePass)的相關(guān)資料,Three js 開發(fā)的一些知識整理,方便后期遇到類似的問題,能夠及時(shí)查閱使用,需要的朋友可以參考下2024-01-01
這篇文章主要介紹了js中hash和ico的關(guān)聯(lián)分析,以實(shí)例形式分析了location.hash與ico的加載順序關(guān)系,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-02-02
懸浮窗就是圖中微信圖標(biāo)的按鈕，采用fixed定位，可拖動和點(diǎn)擊。本文給大家分享一個比較常見的常見，通過實(shí)例代碼給大家介紹微信小程序中懸浮窗功能的實(shí)現(xiàn)，一起看看吧2019-08-08
JavaScript navigator.userAgent獲取瀏覽器信息案例講解
這篇文章主要介紹了JavaScript navigator.userAgent獲取瀏覽器信息案例講解,本篇文章通過簡要的案例,講解了該項(xiàng)技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下2021-08-08
JavaScript是一種在Web開發(fā)中經(jīng)常使用的前端動態(tài)腳本技術(shù)。在JavaScript中，有一個很重要的安全性限制，被稱為“Same-Origin Policy”（同源策略）2014-04-04
JavaScript實(shí)現(xiàn)跨瀏覽器的添加及刪除事件綁定函數(shù)實(shí)例
這篇文章主要介紹了JavaScript實(shí)現(xiàn)跨瀏覽器的添加及刪除事件綁定函數(shù),采用純javascript實(shí)現(xiàn)jquery的bind及unbind添加與刪除事件綁定的技巧,具有很好的瀏覽器兼容性,需要的朋友可以參考下2015-08-08
這篇文章主要介紹了js簡單設(shè)置與使用cookie的方法,以簡單實(shí)例形式分析了JavaScript設(shè)置與調(diào)用cookie的方法,需要的朋友可以參考下2016-01-01
JS代碼屏蔽F12,右鍵,粘貼,復(fù)制,剪切,選中,操作實(shí)例
在本篇文章里小編給大家分享的是關(guān)于利用JS代碼屏蔽F12,右鍵,粘貼,復(fù)制,剪切,選中,操作，需要的朋友們學(xué)習(xí)下。2019-09-09
創(chuàng)建echart多個聯(lián)動的示例代碼
這篇文章主要介紹了創(chuàng)建echart多個聯(lián)動的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-11-11
javascript 翻頁測試頁(動態(tài)創(chuàng)建標(biāo)簽并自動翻頁)
javascript 翻頁測試頁(動態(tài)創(chuàng)建標(biāo)簽并自動翻頁)，需要的朋友可以參考下。2009-12-12