JavaScript中的this關(guān)鍵詞指向
1、es5中的this的指向
this
是JavaScript
的一個(gè)關(guān)鍵字,他是函數(shù)執(zhí)行過程中,自動(dòng)生成的一個(gè)內(nèi)部對(duì)象,指當(dāng)前的對(duì)象,只在當(dāng)前函數(shù)內(nèi)部使用。- 在
es5
中this
的指向取決于函數(shù)運(yùn)行時(shí)的環(huán)境。 - 沒有直接掛載者(或稱調(diào)用者)的函數(shù)中
this
,非嚴(yán)格模式下指向window
,在use strict
嚴(yán)格模式下,默認(rèn)為undefined。以下都是在非嚴(yán)格模式下討論
var name = 'hello window!'; var obj = { name: 'hello obj!', fn: function() { console.log(this.name); } }; var fn = obj.fn; fn(); // hello window! obj.fn(); // hello obj!
obj.fn()
在執(zhí)行時(shí),fn
中的this
指向的是當(dāng)前的調(diào)用對(duì)象obj
。fn()
執(zhí)行時(shí),this
指向的是window
對(duì)象。
var fn = obj.fn; // 等價(jià)于 window.fn = obj.fn; fn(); // 等價(jià)于 window.fn();
匿名函數(shù)的執(zhí)行環(huán)境是全局的
var name = 'hello window!'; var obj = { name: 'hello obj!', fn: function() { console.log(this.name); // 'hello obj!' return function() { console.log(this.name); // 'hello window!' }; } }; obj.fn()();
2、es6中的this
es6
箭頭函數(shù)的特點(diǎn)
- 箭頭函數(shù)沒有自己的
this
- 函數(shù)體內(nèi)的
this
對(duì)象,就是定義時(shí)所在的對(duì)象,而不是使用時(shí)所在的對(duì)象,即外層代碼的this
引用。 - 不可以當(dāng)作構(gòu)造函數(shù),也就是說,不可以使用
new
命令,否則會(huì)拋出一個(gè)錯(cuò)誤。 - 沒有
arguments
對(duì)象。如果要用,可以用Rest
參數(shù)代替。 - 不可以使用
yield
命令,因此箭頭函數(shù)不能用作Generator
函數(shù)
示例說明,修改上述示例代碼中的函數(shù)為箭頭函數(shù):
// 示例代碼1 var name = 'hello window!'; var obj = { name: 'hello obj!', fn: () => { console.log(this.name); // 這里的this指向的外層的this,即window對(duì)象,想當(dāng)于上打印的是console.log(window.name); } }; var fn = obj.fn; fn(); // hello window! obj.fn(); // hello window! // 示例代碼2 var name = 'hello window!'; var obj = { name: 'hello obj!', fn: function() { console.log(this.name); // hello obj! return () => { console.log(this.name); // hello obj! // this指向外層的this,即obj對(duì)象 }; } }; obj.fn()();
總結(jié):
es5
中的this
主要看運(yùn)行的環(huán)境,指向的是調(diào)用它的對(duì)象。- 箭頭函數(shù)中的
this
是在一開始就固定的,并不受調(diào)用對(duì)象
到此這篇關(guān)于JavaScript中的this關(guān)鍵詞指向的文章就介紹到這了,更多相關(guān)js的this指向內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
createElement動(dòng)態(tài)創(chuàng)建HTML對(duì)象腳本代碼
利用createElement動(dòng)態(tài)創(chuàng)建鏈接,div等代碼2008-11-11js this函數(shù)調(diào)用無需再次抓獲id,name或標(biāo)簽名
this就是你當(dāng)前要執(zhí)行的js所抓獲的節(jié)點(diǎn),這樣在js里就可以不用document.getElement之類的寫法來抓獲id,name或標(biāo)簽名,具體示例如下2014-03-03js按條件生成隨機(jī)json:randomjson實(shí)現(xiàn)方法
下面小編就為大家?guī)硪黄猨s按條件生成隨機(jī)json:randomjson實(shí)現(xiàn)方法。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-04-04基于JavaScript實(shí)現(xiàn)點(diǎn)擊頁(yè)面任何位置返回
這篇文章主要介紹了基于JavaScript實(shí)現(xiàn)點(diǎn)擊頁(yè)面任何位置返回的實(shí)例代碼,需要的朋友可以參考下2016-08-08預(yù)防解決你不知道的JavaScript正在泄漏內(nèi)存
這篇文章主要為大家介紹了你不知道的JavaScript正在泄漏內(nèi)存預(yù)防及解決方法實(shí)例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪<BR>2023-10-10BootstrapTable refresh 方法使用實(shí)例簡(jiǎn)單介紹
本文就bootstrapTable refresh 方法如何傳遞參數(shù)做簡(jiǎn)單舉例說明,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友參考下吧2017-02-02JavaScript靜態(tài)的動(dòng)態(tài)
JavaScript靜態(tài)的動(dòng)態(tài)...2006-09-09深入理解JavaScript系列(3) 全面解析Module模式
Module模式是JavaScript編程中一個(gè)非常通用的模式,一般情況下,大家都知道基本用法,本文嘗試著給大家更多該模式的高級(jí)使用方式2012-01-01