this

this是javascript的一個(gè)關(guān)鍵字，隨著函數(shù)使用場(chǎng)合不同，this的值會(huì)發(fā)生變化。但是總有一個(gè)原則，那就是this指的是調(diào)用函數(shù)的那個(gè)對(duì)象。

一、定義

1、this是函數(shù)內(nèi)部的一個(gè)特殊對(duì)象（或this引用）--它引用的是函數(shù)據(jù)以執(zhí)行的環(huán)境對(duì)象。

2、this引用是一種在JavaScript的代碼中隨時(shí)都可以使用的只讀變量。 this引用 引用（指向）的是一個(gè)對(duì)象，它有著會(huì)根據(jù)代碼上下文語境自動(dòng)改變其引用對(duì)象的特性。它的引用規(guī)則如下：

• 在最外層代碼中，this引用 引用的是全局對(duì)象。

• 在函數(shù)內(nèi)，this引用根據(jù)函數(shù)調(diào)用的方式的不同而有所不同。如下

1）構(gòu)造函數(shù)的調(diào)用--this引用 引用的是所生成的對(duì)象

2）方法調(diào)用--this引用 引用的是接收方對(duì)象

3）apply或call調(diào)用--this引用 引用的是有apply或call的參數(shù)指定的對(duì)象

4）其他方式的調(diào)用--this引用 引用的是全局對(duì)象

二、根據(jù)以上所述及網(wǎng)上的相關(guān)資料，this對(duì)象（引用）的使用情況總結(jié)如下：

JavaScript是動(dòng)態(tài)語言，this關(guān)鍵字在執(zhí)行的時(shí)候才能確定是誰。所以this永遠(yuǎn)指向調(diào)用者，即對(duì)“調(diào)用對(duì)象”的引用。簡(jiǎn)單點(diǎn)說就是調(diào)用的方法屬于哪個(gè)對(duì)象，this就指向那個(gè)對(duì)象。根據(jù)函數(shù)調(diào)用方式的不同，this可以 指向全局對(duì)象，當(dāng)前對(duì)象，或其他任意對(duì)象。

1、全局函數(shù)調(diào)用，全局函數(shù)中的this會(huì)指向全局對(duì)象window。（函數(shù)調(diào)用模式）

//代碼清單1
<script type="text/javascript">
var message = "this in window"; //這一句寫在函數(shù)外面和里面是一樣效果
function func() {
if(this == window){
alert("this == window"); 
alert(message);
this.methodA = function() {
alert("I'm a function");
}
}
}
func(); //如果不調(diào)用func方法，則里面定義的屬性或方法會(huì)取不到 
methodA();
</script>

func()的調(diào)用結(jié)果為this == window， this in window

methodA()的調(diào)用結(jié)果為I'm a function

2、構(gòu)造函數(shù)調(diào)用，即使用new的方式實(shí)例化一個(gè)對(duì)象，this會(huì)指向通過構(gòu)造函數(shù)生成的對(duì)象。（構(gòu)造器調(diào)用模式）

代碼清單2

<script type="text/javascript">
function Func() {
if (this == window) {
alert("this == window");
}
else {
alert("this != window");
}
this.fieldA = "I'm a field";
alert(this);
}
var obj = new Func();
alert(obj.fieldA); //this指向的是對(duì)象obj
</script>

3、對(duì)象方法的調(diào)用，this指向當(dāng)前對(duì)象。任何函數(shù)，只要該函數(shù)被當(dāng)做一個(gè)對(duì)象的方法使用或賦值時(shí)，該函數(shù)內(nèi)部的this都是對(duì)該對(duì)象本身的引用。也可理解為this寫在一個(gè)普通對(duì)象中，this指向的就是對(duì)象本身。（方法調(diào)用模式）

（方法的定義： 作為對(duì)象屬性的函數(shù)稱為方法）

//代碼清單3
<script type="text/javascript">
var obj = {
x: 3,
doit: function(){
if(this == window){
alert("this == window");
}else{
alert("method is called: " + this.x);
}
}
};
obj.doit(); //this指向的是對(duì)象obj
</script>

4、通過apply或call方法調(diào)用，this指向傳入的對(duì)象。

apply 或call 方法可以用來代替另一個(gè)對(duì)象調(diào)用一個(gè)方法。call 方法可將一個(gè)函數(shù)的對(duì)象上下文從初始的上下文改變?yōu)橛?thisObj 指定的新對(duì)象。如果沒有提供 thisObj 參數(shù)，那么 Global 對(duì)象被用作 thisObj。 （apply調(diào)用模式）

//代碼清單4
<script type="text/javascript">
var obj = {
x: 3,
doit: function(){
alert("method is called: " + this.x);
}
};
var obj2 = {x: 4};
obj.doit(); //3,this指向obj
obj.doit.apply(obj2); //4,this指向obj2
obj.doit.call(obj2); //4,this指向obj2
</script>

5、原型鏈中的this --原型對(duì)象及構(gòu)造函數(shù)中的this指向新創(chuàng)建的實(shí)例對(duì)象。使用prototype擴(kuò)展方法可以使用this獲取到源對(duì)象的實(shí)例，私有字段無法通過原型鏈獲取。

//代碼清單5
<script type="text/javascript">
function Func() {
this.fieldA = "I'm a field";
var privateFieldA = "I'm a var";
}
Func.prototype = {
ExtendMethod: function(str) {
alert(str + " :" + this.fieldA);
alert(privateFieldA); //出錯(cuò),私有字段無法通過原型鏈獲取。
}
};
var obj = new Func();
obj.ExtendMethod("From prototype"); //此時(shí)構(gòu)造函數(shù)及原型鏈中的this指向?qū)ο髈bj
</script>

6、閉包中的this --閉包：寫在function中的function，this指向全局對(duì)象window。

6.1 對(duì)象中的閉包

//代碼清單6
<script type="text/javascript">
var name = "The window";
var obj = {
name: "My Object",
getNameFunc: function(){
return function(){
return this.name;
}
}
};
alert(obj.getNameFunc()()); //The window
</script>

此時(shí)，閉包中的this指向全局對(duì)象window，只能取到全局對(duì)象的屬性。那么對(duì)象內(nèi)部的屬性（外部函數(shù)的變量）要想訪問又怎么辦呢？ 把外部函數(shù)的this對(duì)象保存在一個(gè)閉包能訪問的變量就可以了?？慈缦麓a：

//代碼清單7
<script type="text/javascript">
var name = "The window";
var obj = {
name: "My Object",
getNameFunc: function(){
var that = this;
return function(){
return that.name;
}
}
};
alert(obj.getNameFunc()()); //My object
</script>

將外部函數(shù)的this賦值給that變量，就能讀取到外部函數(shù)的變量。

6.2 不管是直接引用function，還是實(shí)例化一個(gè)function，其返回的閉包函數(shù)里的this都是指向window。

//代碼清單8
<script type="text/javascript">
function a() {
alert(this == window);
var that = this;
var func = function() {
alert(this == window);
alert(that);
};
return func;
}
var b = a();
b(); //true, true, [object Window]
var c = new a();
c(); //false, true, [object object]
</script>

7、函數(shù)使用bind()方法綁定一個(gè)對(duì)象，this會(huì)指向傳給bind()函數(shù)的值。

//代碼清單9
<script type="text/javascript">
window.color = "red";
var obj = {color: "blue"};
function sayColor(){
alert(this.color);
}
var objSayColor = sayColor.bind(obj);
objSayColor(); //blue
</script>

8、內(nèi)嵌在HTML元素中的腳本段，this指向元素本身

//代碼清單10
<div onclick="test(this)" id="div">Click Me</div>
<script type="text/javascript">
function test(obj) {
alert(obj); //[object HTMLDivElement]
}
</script>

9、寫在script標(biāo)簽中：this就是指全局對(duì)象window。這個(gè)跟第一點(diǎn)的全局函數(shù)調(diào)用的全局變量一樣。

以上所述是小編給大家介紹的JavaScript中的this引用，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

最新評(píng)論