400-650-7353
您所在的位置:首頁(yè) > IT干貨資料 > web前端 > 【W(wǎng)eb前端基礎(chǔ)知識(shí)】ES5及ES6this詳解

【W(wǎng)eb前端基礎(chǔ)知識(shí)】ES5及ES6this詳解

  • 發(fā)布: 優(yōu)就業(yè)it培訓(xùn)
  • 來(lái)源:優(yōu)就業(yè)
  • 2021-03-22 16:34:27
  • 閱讀()
  • 分享
  • 手機(jī)端入口

今天,我們學(xué)習(xí)一下JavaScript中的this。我們從什么是this,ES5及ES6中this的幾種情況進(jìn)行學(xué)習(xí)。讓this變的so easy,我們這里說(shuō)的都是非嚴(yán)格模式下。

什么是this

this表示當(dāng)前行為執(zhí)行的主體,在javaScript中this不是函數(shù)獨(dú)有的,但是我們主要研究的是函數(shù)中的this,為了方便大家理解我們舉個(gè)例子。

小明今天項(xiàng)目成功上線(xiàn)了,提前下班,不用加班了,獎(jiǎng)勵(lì)自己去肯德基吃一個(gè)漢堡,對(duì)于這句話(huà)我們簡(jiǎn)單的分析下:

在哪里吃:肯德基

誰(shuí)吃:小明

在這里肯德基是吃的環(huán)境,小明是當(dāng)前吃這個(gè)行為的主體。

  1. //全局作用域下 
  2. Var myBody = document.body; 
  3. //window是可以省略的  當(dāng)前body元素的寬度都會(huì)被輸出 
  4. console.log(window.getComputedStyle(myBody).width;);//726px 
  5. console.log(getComputedStyle(myBody).width;);//726px 
  6. //我們?cè)谶@里輸出this  ->window 
  7. console.log(this);//window   

ES5中this的幾種情況

1.全局作用域下的this是window

前邊的我們說(shuō)過(guò)this代表當(dāng)前行為執(zhí)行的主體,在全局作用域下所有的屬性和方法都是window的屬性和方法,并且window是可以省略的。那么也就是說(shuō)我們?nèi)フ{(diào)用一個(gè)方法在全局作用域下,誰(shuí)調(diào)用的也就是window調(diào)用,那么window就是當(dāng)前行為執(zhí)行的主體,和去肯德基吃漢堡是一樣的誰(shuí)吃小明,那么小明就是當(dāng)前行為執(zhí)行的主體。

2.自執(zhí)行函數(shù)中的this是window

在javaScript中我們主要研究的是函數(shù)中的this,自執(zhí)行函數(shù)中的this永遠(yuǎn)是window,因?yàn)楹瘮?shù)就是一個(gè)方法,一種行為,這個(gè)行為是直接執(zhí)行的,那么執(zhí)行的主體就是window。

  1. //這里我們寫(xiě)兩個(gè)自執(zhí)行函數(shù) 
  2. ~function(){ 
  3. console.log(this);  //->window 
  4. }(); 
  5.  
  6. (function (){ 
  7. console.log(this);//->window 
  8. })(); 

3.當(dāng)前函數(shù)執(zhí)行就看前面有沒(méi)有點(diǎn)(.),點(diǎn)前面是誰(shuí)this就是誰(shuí),和當(dāng)前函數(shù)在哪里定義的及在哪里執(zhí)行的沒(méi)有關(guān)系,沒(méi)有點(diǎn)就是window.

還是一樣的道理,.前面就表示當(dāng)前行為執(zhí)行的主體。如果沒(méi)有依然當(dāng)前行為執(zhí)行的主體是window.

  1. //定義一個(gè)函數(shù) 
  2. function hello(){ 
  3. console.log(this); 
  4. hello();//this->window 
  5. //定義一個(gè)對(duì)象設(shè)置屬性為hello值是對(duì)應(yīng)的那個(gè)函數(shù) 
  6. Var obj = {hello:hello}; 
  7. //我們?cè)偃フ{(diào)用的時(shí)候  發(fā)現(xiàn)是obj這個(gè)對(duì)象調(diào)用的這個(gè)函數(shù)  那么obj就是當(dāng)前行為執(zhí)行的主體  和這個(gè)函數(shù)在哪里定義是沒(méi)有關(guān)系的。 
  8. Obj.hello(); //this->obj 

4.call,apply,bind改變this指向問(wèn)題就看方法中的第一個(gè)參數(shù)是誰(shuí)this就是誰(shuí)。

首先call,apply,bind這三個(gè)方法都是用來(lái)改變this的指向,其實(shí)本質(zhì)就是改變當(dāng)前行為執(zhí)行的主體。由于這個(gè)三個(gè)方法第一個(gè)參數(shù)傳遞都是當(dāng)前行為執(zhí)行的主體。所以就看第一個(gè)參數(shù)即可。

  1. //定義一個(gè)函數(shù) 
  2. function world(){ 
  3.    console.log(this); 
  4. //定義一個(gè)對(duì)象 
  5. Var obj = {name:”哈哈”}; 
  6. //將obj變?yōu)檫@個(gè)方法行為執(zhí)行的主體 
  7. World.call(obj);//this->obj 
  8. //apply和bind同理只是傳遞參數(shù)和使用方式略有不同 

ES6中this的幾種情況

1.箭頭函數(shù)是沒(méi)有自己this的,this是繼承它的宿主環(huán)境(上級(jí)作用域) 宿主環(huán)境不是執(zhí)行的環(huán)境,而是定義的環(huán)境。

  1. let fn = () => { 
  2.     console.log(this); 
  3.  
  4. fn();//this->window 
  5.  let obj = { 
  6.   name: "obj", 
  7.   sum: function () { 
  8.    fn(); //在widnow下定義的,所以它的宿主環(huán)境是widnow而不是sum 
  9.    } 
  10.  }; 

2. ES6類(lèi)構(gòu)造器中的this是當(dāng)前這個(gè)實(shí)例,而原型上的函數(shù)中的this指向調(diào)用者。

  1. //類(lèi)中的this 
  2.         class Btn { 
  3.             constructor(tagName) { 
  4.                 this.btn = document.querySelector(id); 
  5.                 thisthis.btn.onclick = this.click; 
  6.                 console.log(this); //this->這個(gè)類(lèi)的實(shí)例 
  7.             } 
  8.             click() { 
  9.                 // 方法里的this指向調(diào)用者 
  10.                 console.log(this); //this->btn這個(gè)元素 
  11.             } 
  12.         } 
  13.         var btn = new Btn('input'); 
  14.      

 

文章“【W(wǎng)eb前端基礎(chǔ)知識(shí)】ES5及ES6this詳解”已幫助

>>本文地址:http://m.littlerockbway.com/zhuanye/2021/68023.html

THE END  

聲明:本站稿件版權(quán)均屬中公教育優(yōu)就業(yè)所有,未經(jīng)許可不得擅自轉(zhuǎn)載。

1 您的年齡

2 您的學(xué)歷

3 您更想做哪個(gè)方向的工作?

獲取測(cè)試結(jié)果
  • 大前端大前端
  • 大數(shù)據(jù)大數(shù)據(jù)
  • 互聯(lián)網(wǎng)營(yíng)銷(xiāo)互聯(lián)網(wǎng)營(yíng)銷(xiāo)
  • JavaJava
  • Linux云計(jì)算Linux
  • Python+人工智能Python
  • 嵌入式物聯(lián)網(wǎng)嵌入式
  • 全域電商運(yùn)營(yíng)全域電商運(yùn)營(yíng)
  • 軟件測(cè)試軟件測(cè)試
  • 室內(nèi)設(shè)計(jì)室內(nèi)設(shè)計(jì)
  • 平面設(shè)計(jì)平面設(shè)計(jì)
  • 電商設(shè)計(jì)電商設(shè)計(jì)
  • 網(wǎng)頁(yè)設(shè)計(jì)網(wǎng)頁(yè)設(shè)計(jì)
  • 全鏈路UI/UE設(shè)計(jì)UI設(shè)計(jì)
  • VR/AR游戲開(kāi)發(fā)VR/AR
  • 網(wǎng)絡(luò)安全網(wǎng)絡(luò)安全
  • 新媒體與短視頻運(yùn)營(yíng)新媒體
  • 直播帶貨直播帶貨
  • 智能機(jī)器人軟件開(kāi)發(fā)智能機(jī)器人
 

快速通道fast track

近期開(kāi)班時(shí)間TIME