this是面向?qū)ο笳Z言中的一個重要概念，在JAVA,C#等大型語言中，this固定指向運(yùn)行時的當(dāng)前對象。但是在javascript中，由于javascript的動態(tài)性（解釋執(zhí)行，當(dāng)然也有簡單的預(yù)編譯過程），this的指向在運(yùn)行時才確定。這個特性在給我們帶來迷惑的同時也帶來了編程上的自由和靈活，結(jié)合apply(call)方法，可以使JS變得異常強(qiáng)大。

2.變化的this
在JavaScript中，this通常指向的是我們正在執(zhí)行的函數(shù)本身，或者是指向該函數(shù)所屬的對象（運(yùn)行時）。當(dāng)我們在頁面中定義了函數(shù)doSomething()的時候，它的owner是頁面，或者是JavaScript中的window對象（或global對象）。對于一個onclick屬性，它為它所屬的HTML元素所擁有，this應(yīng)該指向該HTML元素。

2.1在幾種常見場景中this的變化

函數(shù)示例
function doSomething ()
{
alert(this.navigator); //appCodeName
this.value = "I am from the Object constructor";
this.style.backgroundColor = "# 000000";
}
1. (A)作為普通函數(shù)直接調(diào)用時，this指向window對象.

2. (B)作為控件事件觸發(fā)時

1） inline event registration 內(nèi)聯(lián)事件注冊 .將事件直接寫在HTML代碼中(<element

οnclick=”doSomething()”>), 此時this指向 window對象 。

2） Traditional event registration 傳統(tǒng)事件注冊 （DHTML方式）.
形如 element.onclick = doSomething; 此時this指向 element對象

3） <element οnclick=”doSomething(this)”>作為參數(shù)傳遞可以指向element

3. (C)作為對象使用時this指向當(dāng)前對象。形如：new doSomething();
4. (D)使用apply 或者call方法時，this指向所傳遞的對象。

形如：var obj={}; doSomething.apply(obj,new Array(”nothing”); //this?obj
2.2 this 指向分析

1 A場景。
直接調(diào)用的情況下，doSomething的運(yùn)行時擁有者是window對象，因此this指向window
圖示：

圖1：A場景

2 B場景。
1）Traditional Event Registration
當(dāng)我們要讓函數(shù)中的this指向當(dāng)前HTMLELEMENT時，可這樣寫
element.onclick = doSomething;
doSomething的引用(地址)賦給了element的onclick屬性(這樣就成為了函數(shù))。此時
doSomething運(yùn)行時擁有者(owner)就變成了element,this便指向了element。

圖示：

圖2: B場景 Traditional Event Registration

進(jìn)行批量添加事件時，this均可正確指向。

圖示：

圖3： 多次Traditonal Event Registration

2) Inline Event Registration
形如 <element οnclick=”doSomething()”>
圖示:

圖4：B場景 Inline Event Registration

這兩種注冊方式的區(qū)別是
element.onclick = doSomething;
alert(element.onclick)
可以得到
function doSomething() {
alert(this.navigator); //appCodeName
this.value = "I am from the Object constructor";
this.style.backgroundColor = "# 000000";
}
可以看到this關(guān)鍵字被展現(xiàn)在onclick函數(shù)中，它指向HTML元素。

如果執(zhí)行
<element οnclick="doSomething()">
al ert(element.onclick)

可以得到 :
function onclick(){
doSomething();
}

這僅僅是對doSomething()函數(shù)的一次調(diào)用,而doShomething的擁有者是window,因此 doSomething內(nèi)的this指向window對象（啰嗦哦…….）.

3 . C場景
具體內(nèi)部細(xì)節(jié)不太了解,不知道是否可以這樣理解
new doSomething(…..)
約等同于
var tempObj = {}; doSomething.apply(obj,new Array());
這樣tempObj 可以得到doSomething內(nèi)所定義的屬性和方法,但是對 于 doSomething.prototype上的屬性方法無法得到-_-!!

4 D場景
不懂…..

完了
不專業(yè)，比較淺顯，想不出幾個專有名詞，郁悶~

PS 1：好多內(nèi)容是copy的(*_*!)，對圖中表達(dá)有點(diǎn)疑意。圖上多次寫出 copy of function ，按照字面理解是函數(shù)對象的拷貝，我認(rèn)為實(shí)際上是一個引用拷貝，對象拷貝是不可能的，如果是這樣的話，每次添加事件都會拷貝一次對象，這顯然不妥。

PS 2: 因?yàn)閠his指向在運(yùn)行時才確定，我們經(jīng)常碰到一個問題，當(dāng)給一個DOM對象添加事件后，我們希望this指向一個指定對象，而非DOM對象本身，如下例。
<input type="button" id='btn' />
<script language="javascript">function btnObj(id)
{
this.disabled = true;
this.btn=document.getElementById(id);
/*
this.btn.onclick = btnOnclick ;
假如我們這樣寫，this會指向DOM對象，btnOnclick執(zhí)行過程會報(bào)錯
因?yàn)镈OM btn并沒有一個btn屬性
*/
//通過這種方式可以解決這個問題[有些情況也可用tempThis = this這種形式]
this.btn.onclick = passHandler(this,btnOnclick);}function btnOnclick()
{

//如果this是DOM對象，這里就會報(bào)錯，因?yàn)闆]有btn屬性
this.btn.disabled = this.disabled;
}

function passHandler(obj,fun,arg)
{
return function(){
//if(!arg) {var arg = [];}
return fun.apply(obj,(arg?arg:[]));
}
}

new btnObj(”btn”);
</script>

?

arguments 屬性

為當(dāng)前執(zhí)行的 function 對象返回一個arguments 對象。

function.arguments

function 參數(shù)是當(dāng)前執(zhí)行函數(shù)的名稱，可以省略。

說明

通過 arguments 屬性，函數(shù)可以處理可變數(shù)量的參數(shù)。 arguments 對象的 length 屬性包含了傳遞給函數(shù)的參數(shù)的數(shù)目。對于arguments 對象所包含的單個參數(shù)，其訪問方法與數(shù)組中所包含的參數(shù)的訪問方法相同。

示例

下面的例子說明了 arguments 屬性的用法：

function ArgTest(){ var i, s, numargs = arguments.length; s = numargs; if (numargs < 2)?arguments 屬性

為當(dāng)前執(zhí)行的 function 對象返回一個arguments 對象。

function.arguments

function 參數(shù)是當(dāng)前執(zhí)行函數(shù)的名稱，可以省略。

說明

通過 arguments 屬性，函數(shù)可以處理可變數(shù)量的參數(shù)。 arguments 對象的 length 屬性包含了傳遞給函數(shù)的參數(shù)的數(shù)目。對于arguments 對象所包含的單個參數(shù)，其訪問方法與數(shù)組中所包含的參數(shù)的訪問方法相同。

示例

下面的例子說明了 arguments 屬性的用法：

function ArgTest(){ var i, s, numargs = arguments.length; s = numargs; if (numargs < 2)

在舉個列子

<script language="JavaScript">
/**//*
* 演示arguments的用法,如何獲取實(shí)參數(shù)和形數(shù)數(shù)
*/
function argTest(a,b,c,d){
var numargs = arguments.length; // 獲取被傳遞參數(shù)的數(shù)值。
var expargs = argTest.length; // 獲取期望參數(shù)的數(shù)值。
alert("實(shí)參數(shù)目為:"+numargs)
alert("形數(shù)數(shù)目為:"+expargs)

alert(arguments[0])
alert(argTest[0]) //undefined 沒有這種用法
}
//argTest(1,2)
//argTest(1,2,3,4,5)

/**//*
* arguments不是數(shù)組(Array類)
*/

Array.prototype.selfvalue = 1;
function testAguments(){
alert("arguments.selfvalue="+arguments.selfvalue);
}
//alert("Array.sefvalue="+new Array().selfvalue);
//testAguments();

轉(zhuǎn)載于:https://www.cnblogs.com/delin/archive/2010/06/17/1759711.html

總結(jié)

以上是生活随笔為你收集整理的this和arguments的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。