簡單分析js中的this的原理
很多人可能會有疑問,this到底是什么?為什么this的值變化多端?
首先我們來概括下this.
this是一個對象,一般存在于函數(shù)中,表示當前函數(shù)的執(zhí)行上下文;
值得一提的是,當函數(shù)在執(zhí)行后,this才有綁定的對象,函數(shù)未執(zhí)行時,this沒有內(nèi)容
接下來我們看看在不同場景下的this的指向
1.函數(shù)默認執(zhí)行 :此時this指向Window
function fn(){ console.log(this) //Window }; fn();
在嚴格模式開啟后,this的指向又有所不同
嚴格模式下 : 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等價于obj2.b this指向obj2
但當函數(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前沒對象,相當于默認方式執(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)建出來的實例對象
function Person() { this.name = 'zhar'; } var p = new Person(); console.log(p.name); //zhar
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
JavaScript重復(fù)元素處理方法分析【統(tǒng)計個數(shù)、計算、去重復(fù)等】
這篇文章主要介紹了JavaScript重復(fù)元素處理方法,結(jié)合實例形式分析了javascript針對字符串、數(shù)組中重復(fù)元素的個數(shù)統(tǒng)計,計算及去重復(fù)等相關(guān)操作技巧,需要的朋友可以參考下2017-12-12解決bootstrap模態(tài)框數(shù)據(jù)緩存的問題方法
今天小編就為大家分享一篇解決bootstrap模態(tài)框數(shù)據(jù)緩存的問題方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08JavaScript Set與Map數(shù)據(jù)結(jié)構(gòu)詳細分析
大家心里是否產(chǎn)生過這樣的疑問,JS中既然已經(jīng)有對象這種數(shù)據(jù)結(jié)構(gòu),我們?yōu)槭裁催€要再單獨去使用Set或者Map呢?下面這篇文章主要給大家介紹了關(guān)于ES6中Set和Map數(shù)據(jù)結(jié)構(gòu)的相關(guān)資料,需要的朋友可以參考下2022-11-11JS重寫Date函數(shù)以及兼容IOS系統(tǒng)
這篇文章主要介紹了JS重寫Date函數(shù)以及兼容IOS系統(tǒng),具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10JAVASCRIPT IE 與 FF中兼容問題小結(jié)
在不同瀏覽器中對于一些屬性的支持也不一樣,下面是對ie和firefox的一些小結(jié)。2009-02-02