javascript基礎(chǔ)之this

Zoom 發(fā)布于2019-08-22 13:57 / 1513人閱讀

摘要：出現(xiàn)箭頭函數(shù)的時(shí)候，指向?yàn)槎x時(shí)的上下文對象而非指向時(shí)，并且不能被改變首先我們先看一個(gè)例子由上面的例子我們可以看出來此時(shí)指針在用改變了之后指向的依然是全局對象非嚴(yán)格瀏覽器環(huán)境中是而非。

javascript基礎(chǔ)之this指針

越往后面學(xué)越發(fā)現(xiàn)基礎(chǔ)的重要性，所以打算重新過一遍基礎(chǔ)，之后出幾個(gè)vue和react的實(shí)戰(zhàn)教程。
ok，嚴(yán)歸正傳。

首先什么是this

this是執(zhí)行上下文創(chuàng)建時(shí)確定的一個(gè)在執(zhí)行過程中不可改變的變量。
總之記住一句話this的指向由以執(zhí)行時(shí)候的上下文決定的而非定義時(shí)的上下文

看過一本書叫《JavaScript語言精粹》，里面把this的出現(xiàn)場景為4類，當(dāng)然那是在es6出來之前，不過也可以表示基本的用法了，在es6出來之后出現(xiàn)箭頭函數(shù)，所以一共是5種：

有對象的就指向該對象

沒有對象的就指向全局對象，在非嚴(yán)格模式下指向window

有new構(gòu)造函數(shù)的就指向new完之后的新對象

通過apply或者bind或者call改變this指向的對象

出現(xiàn)箭頭函數(shù)的時(shí)候，this指向?yàn)槎x時(shí)的上下文對象而非指向時(shí)，并且不能被call改變

函數(shù)有對象的時(shí)候就指向該對象

    let name = "bob";
    let obj = {
      name,
      getName(){
         console.log(this.name);  
      }
    };

console.log(obj.getName()); //=>bob

因?yàn)間etName()屬于對象obj，并且由obj進(jìn)行調(diào)用，所以毫無疑問是指向obj這個(gè)對象，ok，我們再看一個(gè)例子

 var name = "jay";
 var obj = {
      name:"bob"
      getName(){
         console.log(this.name);  
      }
 };
 
 let t = obj.getName;
 console.log(t()); // => jay

如上，為什么這次t函數(shù)打印出來的值是jay？excuse me？
其實(shí)要理解也好簡單，當(dāng)執(zhí)行t()的時(shí)候(在非嚴(yán)格模式下)其實(shí)t其實(shí)是屬于全局對象（在瀏覽器環(huán)境）也就是window，而var name = "jay"為全局變量，所以輸出jay也不奇怪了。

沒有對象的就指向全局對象，在非嚴(yán)格模式下指向window


var name = "bob";
var obj = {
  name,
  getName:function(){
     function otherName(){
        return this.name;
     }
     console.log(otherName());
  }
};

obj.getName(); // =>bob

otherName隨便是在obj的getName中定義的，但是它還是一個(gè)普通函數(shù)，他的this其實(shí)和

    var name = "bob";
    function otherName(){
       return this.name;
    }
    console.log(otherName()); // =>bob

執(zhí)行效果一樣的，他的this的指向其實(shí)是undefined,在非嚴(yán)格模式下，當(dāng)this指向undefined的時(shí)候其實(shí)會(huì)自動(dòng)轉(zhuǎn)化成window對象（在瀏覽器中）。
ok，讓我們再看一種情況

var name = "bob";
function otherName(){
   "use strict"
   return this.name;
}
console.log(otherName()); // Uncaught TypeError: Cannot read property "name" of undefined

這個(gè)時(shí)候會(huì)拋出一個(gè)錯(cuò)誤，因?yàn)樵趪?yán)格模式下當(dāng)this指針指向undefined的時(shí)候不會(huì)自動(dòng)轉(zhuǎn)化成window對象。

有new構(gòu)造函數(shù)的就指向new完之后的新對象

首先什么是構(gòu)造函數(shù),其實(shí)可以用一句話去概括:
構(gòu)造函數(shù)其實(shí)就是用來新建對象的函數(shù)

JavaScript本身就為我們定義了幾個(gè)常用的構(gòu)造函數(shù)，你肯定認(rèn)識(shí) 比如Function, Object, Array, Date等等，只不過我們平常object，function都不是用new Function，new Object，而是用他的語法糖比如
var obj = {} 其實(shí)等同于 var obj = new Object();

function Human(name,age,sex){
   this.name = name;
   this.age = age;
   this.sex = sex;
   this.common = function(){
       console.log("名字為"+this.name);
   }
}

var h = new Human("bob",25,"sex");
h.common(); // => 名字為bob

有new構(gòu)造函數(shù)的就指向new完之后的新對象,此時(shí)的this指向的是他new出現(xiàn)來的對象h。

通過apply或者bind或者call改變this指向的對象

由于函數(shù)具有函數(shù)作用域，所以有時(shí)候我們需要引用外層作用域的時(shí)候通常用的方法是call，apply，和bind這三兄弟

首先我們來看看call，老樣子先看代碼

var a = {
    user:"bob",
    fn:function(){
        console.log(this.user); 
    }
}
var b = {
    user:"jay"
}

a.fn.call(b); // => jay

如果不調(diào)用call，我們直接使用a.fn的話將會(huì)輸出bob，因?yàn)閒n這個(gè)方法是a這個(gè)對象定義出來的，所以this指向是a這個(gè)對象，但是當(dāng)我們使用了call之后this指針指向的對象就變成b了，于是乎也不難理解為什么輸出的user是jay了。
簡介一下call的用法：
fn.call(obj,argument-1,argument-1,...)
是以obj這個(gè)對象去代替fn的this指針也就時(shí)fn的this指針指向obj，后面的argument-1,argument-1是形參
apply和call的用法基本相同，不同點(diǎn)是apply調(diào)用傳形參的時(shí)候穿的是數(shù)組或者是類數(shù)組，如下:
fn.apply(obj,[argument-1,argument-1,...])

至于bind和call或者apply的區(qū)別，我也舉一個(gè)例子

var a = {
    user:"bob",
    fn:function(){
        console.log(this.user); 
    }
}
var b = {
    user:"jay"
}

var c = a.fn.bind(b); 
c(); // => jay

從上面這個(gè)例子可以得出一個(gè)結(jié)論：
其實(shí)call和apply方法，都是對函數(shù)的直接調(diào)用，但是bind()方法需要加上()來執(zhí)行。

出現(xiàn)箭頭函數(shù)的時(shí)候，this指向?yàn)槎x時(shí)的上下文對象而非指向時(shí)，并且不能被call改變

首先我們先看一個(gè)例子:

var obj = {name:"bob"};

var name = "jay";

var sayName = () => console.log(this.name);

sayName(); // => jay
sayName.call(obj); //jay

由上面的例子我們可以看出來此時(shí)this指針在用call改變了之后指向的依然是全局對象(非嚴(yán)格瀏覽器環(huán)境中是window)而非obj。

ok，至此this指針的用法總結(jié)完畢。

后記

以上this的用法都為個(gè)人總結(jié)，如有不當(dāng)之處還請指出

轉(zhuǎn)載請注明出處.

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/92684.html

發(fā)表評論

登陸后可評論

0條評論

Zoom

男|高級講師

我要關(guān)注我要私信

TA的文章

【力扣】40. 組合總和 II

閱讀 2627·2021-11-12 10:36
PacificRack秋季促銷：洛杉磯VPS $18.00/年起，采用SSD硬盤，支持Linux/W

閱讀 2267·2021-08-23 09:47
把富文本的 ? 轉(zhuǎn)為</br>標(biāo)簽

閱讀 1689·2019-08-30 15:44
前端iPhone X適配總結(jié)

閱讀 1411·2019-08-30 14:10
小白面試之制作一個(gè)本地個(gè)人信息網(wǎng)頁

閱讀 2249·2019-08-29 16:52
面向web前端及node開發(fā)人員的vim配置

閱讀 2347·2019-08-29 16:40
移動(dòng)前端開發(fā)經(jīng)驗(yàn)小結(jié)

閱讀 1594·2019-08-29 16:17
玩轉(zhuǎn)3D Swiper性感秀之思路分析總結(jié)

閱讀 2415·2019-08-26 13:21

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長期優(yōu)惠，快來選購！

javascript基礎(chǔ)之this

相關(guān)文章

javascript 基礎(chǔ)之 call, apply, bind