IT培訓(xùn)網(wǎng)
IT在線學(xué)習(xí)
今天,我們學(xué)習(xí)一下JavaScript中的this。我們從什么是this,ES5及ES6中this的幾種情況進(jìn)行學(xué)習(xí)。讓this變的so easy,我們這里說的都是非嚴(yán)格模式下。
this表示當(dāng)前行為執(zhí)行的主體,在javaScript中this不是函數(shù)獨(dú)有的,但是我們主要研究的是函數(shù)中的this,為了方便大家理解我們舉個(gè)例子。
小明今天項(xiàng)目成功上線了,提前下班,不用加班了,獎(jiǎng)勵(lì)自己去肯德基吃一個(gè)漢堡,對(duì)于這句話我們簡(jiǎn)單的分析下:
在哪里吃:肯德基
誰吃:小明
在這里肯德基是吃的環(huán)境,小明是當(dāng)前吃這個(gè)行為的主體。
- //全局作用域下
- Var myBody = document.body;
- console.log(window.getComputedStyle(myBody).width;);//726px
- console.log(getComputedStyle(myBody).width;);//726px
- //我們?cè)谶@里輸出this ->window
- console.log(this);//window
1.全局作用域下的this是window
前邊的我們說過this代表當(dāng)前行為執(zhí)行的主體,在全局作用域下所有的屬性和方法都是window的屬性和方法,并且window是可以省略的。那么也就是說我們?nèi)フ{(diào)用一個(gè)方法在全局作用域下,誰調(diào)用的也就是window調(diào)用,那么window就是當(dāng)前行為執(zhí)行的主體,和去肯德基吃漢堡是一樣的誰吃小明,那么小明就是當(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。
- //這里我們寫兩個(gè)自執(zhí)行函數(shù)
- ~function(){
- console.log(this); //->window
- }();
- (function (){
- console.log(this);//->window
- })();
3.當(dāng)前函數(shù)執(zhí)行就看前面有沒有點(diǎn)(.),點(diǎn)前面是誰this就是誰,和當(dāng)前函數(shù)在哪里定義的及在哪里執(zhí)行的沒有關(guān)系,沒有點(diǎn)就是window.
還是一樣的道理,.前面就表示當(dāng)前行為執(zhí)行的主體。如果沒有依然當(dāng)前行為執(zhí)行的主體是window.
- //定義一個(gè)函數(shù)
- function hello(){
- console.log(this);
- }
- hello();//this->window
- //定義一個(gè)對(duì)象設(shè)置屬性為hello值是對(duì)應(yīng)的那個(gè)函數(shù)
- Var obj = {hello:hello};
- //我們?cè)偃フ{(diào)用的時(shí)候 發(fā)現(xiàn)是obj這個(gè)對(duì)象調(diào)用的這個(gè)函數(shù) 那么obj就是當(dāng)前行為執(zhí)行的主體 和這個(gè)函數(shù)在哪里定義是沒有關(guān)系的。
- Obj.hello(); //this->obj
4.call,apply,bind改變this指向問題就看方法中的第一個(gè)參數(shù)是誰this就是誰。
首先call,apply,bind這三個(gè)方法都是用來改變this的指向,其實(shí)本質(zhì)就是改變當(dāng)前行為執(zhí)行的主體。由于這個(gè)三個(gè)方法第一個(gè)參數(shù)傳遞都是當(dāng)前行為執(zhí)行的主體。所以就看第一個(gè)參數(shù)即可。
- //定義一個(gè)函數(shù)
- function world(){
- console.log(this);
- }
- //定義一個(gè)對(duì)象
- Var obj = {name:”哈哈”};
- //將obj變?yōu)檫@個(gè)方法行為執(zhí)行的主體
- World.call(obj);//this->obj
- //apply和bind同理只是傳遞參數(shù)和使用方式略有不同
1.箭頭函數(shù)是沒有自己this的,this是繼承它的宿主環(huán)境(上級(jí)作用域) 宿主環(huán)境不是執(zhí)行的環(huán)境,而是定義的環(huán)境。
- let fn = () => {
- console.log(this);
- }
- fn();//this->window
- let obj = {
- name: "obj",
- sum: function () {
- fn(); //在widnow下定義的,所以它的宿主環(huán)境是widnow而不是sum
- }
- };
2. ES6類構(gòu)造器中的this是當(dāng)前這個(gè)實(shí)例,而原型上的函數(shù)中的this指向調(diào)用者。
- //類中的this
- class Btn {
- constructor(tagName) {
- this.btn = document.querySelector(id);
- thisthis.btn.onclick = this.click;
- console.log(this); //this->這個(gè)類的實(shí)例
- }
- click() {
- // 方法里的this指向調(diào)用者
- console.log(this); //this->btn這個(gè)元素
- }
- }
- var btn = new Btn('input');
>>本文地址:http://hqfphsz.com/zhuanye/2021/68023.html
聲明:本站稿件版權(quán)均屬中公教育優(yōu)就業(yè)所有,未經(jīng)許可不得擅自轉(zhuǎn)載。
1 您的年齡
2 您的學(xué)歷
3 您更想做哪個(gè)方向的工作?