JavaScript嚴(yán)格模式下關(guān)于this的幾種指向詳解
前言
相信不少人在學(xué)習(xí)或者使用Javascript的時(shí)候,都曾經(jīng)被 JavaScript 中的 this 弄暈了,那么本文就來整理總結(jié)一下在嚴(yán)格模式下 this 的幾種指向。
一、全局作用域中的this
在嚴(yán)格模式下,在全局作用域中,this指向window對(duì)象
"use strict";
console.log("嚴(yán)格模式");
console.log("在全局作用域中的this");
console.log("this.document === document",this.document === document);
console.log("this === window",this === window);
this.a = 9804;
console.log('this.a === window.a===',window.a);

二、全局作用域中函數(shù)中的this
在嚴(yán)格模式下,這種函數(shù)中的this等于undefined
"use strict";
console.log("嚴(yán)格模式");
console.log('在全局作用域中函數(shù)中的this');
function f1(){
console.log(this);
}
function f2(){
function f3(){
console.log(this);
}
f3();
}
f1();
f2();

三、 對(duì)象的函數(shù)(方法)中的this
在嚴(yán)格模式下,對(duì)象的函數(shù)中的this指向調(diào)用函數(shù)的對(duì)象實(shí)例
"use strict";
console.log("嚴(yán)格模式");
console.log("在對(duì)象的函數(shù)中的this");
var o = new Object();
o.a = 'o.a';
o.f5 = function(){
return this.a;
}
console.log(o.f5());

四、構(gòu)造函數(shù)的this
在嚴(yán)格模式下,構(gòu)造函數(shù)中的this指向構(gòu)造函數(shù)創(chuàng)建的對(duì)象實(shí)例。
"use strict";
console.log("嚴(yán)格模式");
console.log("構(gòu)造函數(shù)中的this");
function constru(){
this.a = 'constru.a';
this.f2 = function(){
console.log(this.b);
return this.a;
}
}
var o2 = new constru();
o2.b = 'o2.b';
console.log(o2.f2());

五、事件處理函數(shù)中的this
在嚴(yán)格模式下,在事件處理函數(shù)中,this指向觸發(fā)事件的目標(biāo)對(duì)象。
"use strict";
function blue_it(e){
if(this === e.target){
this.style.backgroundColor = "#00f";
}
}
var elements = document.getElementsByTagName('*');
for(var i=0 ; i<elements.length ; i++){
elements[i].onclick = blue_it;
}
//這段代碼的作用是使被單擊的元素背景色變?yōu)樗{(lán)色
六、內(nèi)聯(lián)事件處理函數(shù)中的this
在嚴(yán)格模式下,在內(nèi)聯(lián)事件處理函數(shù)中,有以下兩種情況:
<button onclick="alert((function(){'use strict'; return this})());">
內(nèi)聯(lián)事件處理1
</button>
<!-- 警告窗口中的字符為undefined -->
<button onclick="'use strict'; alert(this.tagName.toLowerCase());">
內(nèi)聯(lián)事件處理2
</button>
<!-- 警告窗口中的字符為button -->
后語
參考資料
MDN https://developer.mozilla.org...
延伸資料
JavaScript 嚴(yán)格模式詳解 http://www.dbjr.com.cn/article/74890.htm
菜鳥學(xué)堂 > JavaScript 嚴(yán)格模式 http://edu.jb51.net/js/js-strict.html
總結(jié)
以上就是這篇文章的全部?jī)?nèi)容了,希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來一定的幫助,如果有疑問大家可以留言交流,謝謝大家對(duì)腳本之家的支持。
相關(guān)文章
將json轉(zhuǎn)換成struts參數(shù)的方法
下面小編就為大家?guī)硪黄獙son轉(zhuǎn)換成struts參數(shù)的方法。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-11-11
javascript 設(shè)計(jì)模式之組合模式原理與應(yīng)用詳解
這篇文章主要介紹了javascript 設(shè)計(jì)模式之組合模式原理與應(yīng)用,結(jié)合實(shí)例形式分析了javascript組合模式基本概念、原理、應(yīng)用場(chǎng)景及操作注意事項(xiàng),需要的朋友可以參考下2020-04-04
JavaScript斷言與類型守衛(wèi)及聯(lián)合聲明超詳細(xì)介紹
這篇文章主要介紹了JavaScript斷言與類型守衛(wèi)及聯(lián)合聲明,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)吧2022-11-11
使用webpack搭建vue項(xiàng)目實(shí)現(xiàn)腳手架功能
這篇文章主要介紹了使用webpack搭建vue項(xiàng)目實(shí)現(xiàn)腳手架功能,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
詳解關(guān)于JSON.parse()和JSON.stringify()的性能小測(cè)試
這篇文章主要介紹了詳解關(guān)于JSON.parse()和JSON.stringify()的性能小測(cè)試,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-03-03
JAVASCRIPT模式窗口中下載文件無法接收iframe的流
模式窗口中下載文件,有時(shí)在下載時(shí)發(fā)現(xiàn)服務(wù)器無法接收iframe的流,因?yàn)樵谀J酱翱谥袥]有觸發(fā)iframe的src重新定向事件2013-10-10
Javascript(es2016) import和require用法和區(qū)別詳解
本篇文章主要介紹了Javascript(es2016) import和require用法和區(qū)別詳解,具有一定的參考價(jià)值,有興趣的可以了解下2017-08-08
JavaScript 模塊的循環(huán)加載實(shí)現(xiàn)方法
本文介紹JavaScript語言如何處理"循環(huán)加載"。目前,最常見的兩種模塊格式CommonJS和ES6,處理方法是不一樣的,返回的結(jié)果也不一樣2015-12-12

