JavaScript的this的值到底是什么?

前言

JavaScript 有一套完全不同于其它語言的對 this 的處理機(jī)制。 一般有四種不同的情況下 ,this 指向的各不相同。但是有一個總的原則,那就是this指的是,調(diào)用函數(shù)的那個對象。

this

一、函數(shù)調(diào)用

函數(shù)調(diào)用時,this指向全局對象,如果是在瀏覽器中中,這個對象是window

請看下面這段代碼:

var fn  = function() {
    function test() {
      console.log(this);
    // this 將會被設(shè)置為全局對象(譯者注:瀏覽器環(huán)境中也就是 window 對象)
    }
    test();
}
fn() //執(zhí)行函數(shù)fn,結(jié)果指向window

二、方法調(diào)用

當(dāng)函數(shù)作為對象的方法時,this指向該對象

請看下面這段代碼:

var age = 10;
var xiaoming = {};

xiaoming.age = 18;
xiaoming.getAge = function(){
  console.log(this.age);
}

xiaoming.getAge(); //18

之所以為18不是10,因為this指向xiaoming這個對象,所以打印出來是18

三、調(diào)用構(gòu)造函數(shù)

如果函數(shù)傾向于和 new 關(guān)鍵詞一塊使用,則我們稱這個函數(shù)是 構(gòu)造函數(shù)。 在函數(shù)內(nèi)部,this 指向新創(chuàng)建的對象。

請看下面這段代碼:


var x = 0;

function test(){
  this.x = 1;
}
var obj = new test();

console.log(obj.x); //  1

 

打印出來為1不為0,表明this指向新對象obj,而不是全局對象。

四、顯式的設(shè)置 this (apply和call)

當(dāng)使用 Function.prototype 上的 call 或者 apply 方法時,函數(shù)內(nèi)的 this 將會被 顯式設(shè)置為函數(shù)調(diào)用的第一個參數(shù).

當(dāng)?shù)谝粎?shù)為null 或者 undefined,在瀏覽器環(huán)境里那么window對象就是默認(rèn)的this指向。

var age = 0;
var xiaoming = {};

function setAge(age){this.age = age;}

xiaoming.age = 18;
xiaoming.setAge = setAge;

xiaoming.setAge.apply(null,[20]);
xiaoming.age     // 18
age              // 20

xiaoming.setAge.call(xiaoming,25);
xiaoming.age     // 25
age              // 20

apply和call區(qū)別在于傳遞參數(shù)格式不同,call()接受一個參數(shù)列表,而apply()接受包含多個參數(shù)的數(shù)組(或類數(shù)組對象)

文筆有限,才疏學(xué)淺,文中若有不對之處,還望告知。


參考文章

this 的工作原理

this 的值到底是什么?一次說清楚

Javascript的this用法

Function.prototype.apply()

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 第5章 引用類型(返回首頁) 本章內(nèi)容 使用對象 創(chuàng)建并操作數(shù)組 理解基本的JavaScript類型 使用基本類型...
    大學(xué)一百閱讀 3,665評論 0 4
  • 1. this之謎 在JavaScript中,this是當(dāng)前執(zhí)行函數(shù)的上下文。因為JavaScript有4種不同的...
    百里少龍閱讀 1,092評論 0 3
  • 看著周圍的伙伴一個個翻開了新的篇章,我卻懶得翻頁,我不敢想看到十年后自己,仿佛身邊就有這樣的模版
    忽然提IU閱讀 109評論 0 1
  • 遇見任何事情,發(fā)現(xiàn)任何問題,首先要想的不是找出誰的責(zé)任,而是我怎么能快速的解決,能有效的最小的代價,來換取前進(jìn)。 ...
    乾立風(fēng)中閱讀 177評論 0 0
  • 002 表演型人格 目錄 ??音海凜 短暫的沉默過后,馬可回過頭問我,剛才你在KTV唱的那首歌日文是從哪里來的,“...
    音海凜閱讀 1,067評論 0 1

友情鏈接更多精彩內(nèi)容