this是函數(shù)內(nèi)部的對(duì)象并且被用于調(diào)用該函數(shù),this在全局中的使用非常之靈活,下面就帶大家來(lái)詳解JavaScript中this關(guān)鍵字的用法

this是函數(shù)內(nèi)部的一個(gè)特殊對(duì)象,this引用的是函數(shù)據(jù)以執(zhí)行的環(huán)境對(duì)象（關(guān)于環(huán)境對(duì)象我們會(huì)在文章最后作補(bǔ)充說(shuō)明）,在調(diào)用函數(shù)前this的值并不確定,不同的調(diào)用方式會(huì)導(dǎo)致this值的改變。

window.num = 22;

var o = {num: 11};

function sayNum(){

  alert(this.num)

}

sayNum();//22

o.sayNum = sayNum;

o.sayNum();//11

記?。汉瘮?shù)名僅僅是一個(gè)包含指針的變量而已。因此即使是在不同的環(huán)境中執(zhí)行，全局的sayNum()函數(shù)與o.sayNum()指向的仍然是同一個(gè)函數(shù)。

1.全局作用域中調(diào)用函數(shù)時(shí)

全局作用域中調(diào)用，this對(duì)象引用的是window

匿名函數(shù)的執(zhí)行具有全局性，因此其this對(duì)象通常也指向window

function fn1(){

  console.log(this);

}

fn1();

2.通過(guò)new操作符調(diào)用

this引用的是實(shí)例對(duì)象

function Person(name){

  this.name = name;

}

Person.prototype.printName = function(){

  alert(this.name);//Byron

};

var p1 = new Person('Byron');

3.作為對(duì)象的方法調(diào)用

this引用的是該對(duì)象

var obj1 = {

  name: 'Byron',

  fn : function(){

    console.log(this);

  }

};

obj1.fn();

4.間接調(diào)用

call和apply

每個(gè)函數(shù)都包含兩個(gè)非繼承而來(lái)的方法：call()和apply()。這兩個(gè)方法的用途都是在特定的作用域中調(diào)用函數(shù)，實(shí)際上等于設(shè)置函數(shù)體內(nèi)this對(duì)象的值。也就是說(shuō)，直接調(diào)用函數(shù)，調(diào)用時(shí)指定執(zhí)行環(huán)境是誰(shuí)

window.color = 'red';

var o = {color: 'blue'};

function sayColor(){

  alert(this.color);

}

sayColor.call(this);//red

sayColor.call(window);//red

sayColor.call(o);//blue

（1）apply方法

接收兩個(gè)參數(shù)，一個(gè)是在函數(shù)中運(yùn)行函數(shù)的作用域，另一個(gè)是參數(shù)數(shù)組。

（2）call方法

call方法與apply方法相同，區(qū)別在于接收參數(shù)的方式不同，對(duì)于call方法而言，第一個(gè)參數(shù)是this值沒(méi)有變化，變化的是其余參數(shù)都直接傳遞給函數(shù)。

function fn(){

   console.log(this)//windwow

   function InnerFn(){

     console.log(this)

   }

   InnerFn.call(this)//window

}

fn();

 function fn0(){

   console.log(this)//window

}

function fn1(){

   fn0.call(this);

   console.log(this);//window

}

fn1();

function fn0(){

 console.log(this)//object

}

var o = {

  fn1: function fn1(){

    fn0.call(this);

    console.log(this);//object

  }

}

o.fn1();  

5.bind方法

這個(gè)方法會(huì)創(chuàng)建一個(gè)函數(shù)的實(shí)例，其this值會(huì)被綁定到傳給bind()函數(shù)的值。也就是說(shuō)會(huì)返回一個(gè)新函數(shù)，并且使函數(shù)內(nèi)部的this為傳入的第一個(gè)參數(shù)

window.color = 'red';

var o = {color : 'blue'};

function sayColor(){

  alert(this.color)

}

var objectSayColor = sayColor.bind(o);

objectSayColor();//blue

補(bǔ)充說(shuō)明：執(zhí)行環(huán)境定義

定義了變量或者函數(shù)有權(quán)訪問(wèn)的其他數(shù)據(jù),每個(gè)執(zhí)行環(huán)境都有一個(gè)與之相關(guān)聯(lián)的變量對(duì)象,環(huán)境中定義的所有變量和函數(shù)都保存在這個(gè)對(duì)象中。我們編寫(xiě)的代碼無(wú)法訪問(wèn)這個(gè)對(duì)象,但解析器會(huì)在處理數(shù)據(jù)時(shí)在后臺(tái)使用它。

一、執(zhí)行環(huán)境的創(chuàng)建：

1.全局執(zhí)行環(huán)境

在web瀏覽器中，全局執(zhí)行環(huán)境被認(rèn)為是window對(duì)象,因此所有全局變量和函數(shù)都是作為window對(duì)象的屬性和方法創(chuàng)建的。代碼載入瀏覽器時(shí)，全局執(zhí)行環(huán)境被創(chuàng)建(當(dāng)我們關(guān)閉網(wǎng)頁(yè)或者瀏覽器時(shí)全局執(zhí)行環(huán)境才被銷(xiāo)毀)。

2.局部執(zhí)行環(huán)境

每個(gè)函數(shù)都有自己的執(zhí)行環(huán)境，因此局部執(zhí)行環(huán)境為函數(shù)對(duì)象。當(dāng)函數(shù)被調(diào)用時(shí)函數(shù)的局部環(huán)境被創(chuàng)建（函數(shù)內(nèi)的代碼執(zhí)行完畢后，該環(huán)境被銷(xiāo)毀，同時(shí)保存在其中的所有變量和函數(shù)定義也隨之被銷(xiāo)毀)。

這個(gè)執(zhí)行環(huán)境以及相關(guān)的變量對(duì)象是個(gè)抽象的概念，解釋如下

var a = 1;

function fn(num1,num2){

  var b = 2;

  function fnInner(){

    var c = 3;

    alert(a + b + c);

  }

  fnInner();//fnInner調(diào)用時(shí)局部執(zhí)行環(huán)境創(chuàng)建

}

fn(4,5);//fn調(diào)用時(shí)局部執(zhí)行環(huán)境創(chuàng)建

二、作用域鏈

javascript函數(shù)的執(zhí)行用到了作用域鏈，這個(gè)作用域鏈?zhǔn)呛瘮?shù)定義的時(shí)候創(chuàng)建的,當(dāng)定義一個(gè)函數(shù)時(shí)，它實(shí)際保存一個(gè)作用域鏈。當(dāng)調(diào)用這個(gè)函數(shù)時(shí)，它創(chuàng)建一個(gè)新的對(duì)象來(lái)存儲(chǔ)它的局部變量，并將這個(gè)對(duì)象添加至保存的作用域鏈。作用域鏈的前端始終都是當(dāng)前執(zhí)行的代碼所在環(huán)境的變量對(duì)象。作用域鏈的末端始終都是全局執(zhí)行環(huán)境的變量對(duì)象。作用域鏈的用途，是保證對(duì)執(zhí)行環(huán)境有權(quán)訪問(wèn)的所有變量和函數(shù)的有權(quán)訪問(wèn)

var scope = 'global scope';

function checkscope(){

  var scope = 'local scope';

  function f(){return scope};

  return f;

}

checkscope()();//local scope

理解:當(dāng)調(diào)用checkscope時(shí)，函數(shù)f被定義并作為局部變量綁定到了checkscope作用域鏈上,因此函數(shù)f無(wú)論在哪里調(diào)用,這種綁定依然有效,因此返回值為local scope。

var num1 = 1;

function Outer(){

  var num2 = 2;

  console.log(num1 + num2);//3

  function Inner(){

    //這里可以訪問(wèn)num3,num2,num1

    var num3 = 3;

    console.log(num1 + num2 + num3);//6

    }

  //這里可以訪問(wèn)num2,Inner(),num1但不能訪問(wèn)num3

  Inner();

}

Outer();

console.log(num1);//1，執(zhí)行環(huán)境

//這里只能訪問(wèn)num1

作用域鏈(向上搜索):內(nèi)部環(huán)境可以通過(guò)作用域鏈訪問(wèn)所有的外部環(huán)境，但外部環(huán)境不能訪問(wèn)內(nèi)部環(huán)境中的任何變量和函數(shù)。

var name = 'Byron';

 function fn(){

   var name = 'Csper';

   console.log(name);//Casper

 }

 fn();

越往內(nèi)部的環(huán)境，變量權(quán)重越高。

注意：沒(méi)有帶var關(guān)鍵字直接聲明的變量屬于全局變量如直接聲明a = 1,此時(shí)的a為全局變量。

javscript引擎在進(jìn)入作用域時(shí)，會(huì)對(duì)代碼分兩輪處理。第一輪，初始化變量。第二輪，執(zhí)行代碼

var a = 1;

function prison (a) {

  console.log(a);//1

  var a;

  console.log(a);//1

}

prison(1);

三、函數(shù)執(zhí)行

函數(shù)調(diào)用進(jìn)入執(zhí)行環(huán)境時(shí)，首先處理arguments，初始化形參(默認(rèn)值為undefined)，然后初始化函數(shù)內(nèi)的函數(shù)聲明，當(dāng)代碼一步一步執(zhí)行時(shí)再初始化函數(shù)內(nèi)的變量聲明(進(jìn)入環(huán)境未開(kāi)始執(zhí)行代碼時(shí)，值為undefined)。所以函數(shù)內(nèi)的初始化順序?yàn)樾螀?，函?shù)聲明，變量聲明?？梢詮纳蠄D圖一看出。下面我來(lái)舉個(gè)例子(整個(gè)全局環(huán)境也是函數(shù))。

alert(typeof fn);//function，函數(shù)聲明提前

alert(typeof fn0);//undefined,變量聲明提前但未賦值

function fn(){

//函數(shù)表達(dá)式

}

var fn0 = function(){

//函數(shù)定義式

}

alert(typeof fn0);//function，此時(shí)變量已被賦值