this
this是javascript的一個關(guān)鍵字,隨著函數(shù)使用場合不同涵亏,this的值會發(fā)生變化。但是總有一個原則宠默,那就是this指的是調(diào)用函數(shù)的那個對象矛纹。
一、定義
1光稼、this是函數(shù)內(nèi)部的一個特殊對象(或this引用)--它引用的是函數(shù)據(jù)以執(zhí)行的環(huán)境對象或南。
2孩等、this引用是一種在JavaScript的代碼中隨時都可以使用的只讀變量。 this引用 引用(指向)的是一個對象采够,它有著會根據(jù)代碼上下文語境自動改變其引用對象的特性肄方。它的引用規(guī)則如下:
? 在最外層代碼中,this引用 引用的是全局對象蹬癌。
? 在函數(shù)內(nèi)权她,this引用根據(jù)函數(shù)調(diào)用的方式的不同而有所不同。如下
1)構(gòu)造函數(shù)的調(diào)用--this引用 引用的是所生成的對象
2)方法調(diào)用--this引用 引用的是接收方對象
3)apply或call調(diào)用--this引用 引用的是有apply或call的參數(shù)指定的對象
4)其他方式的調(diào)用--this引用 引用的是全局對象
二逝薪、根據(jù)以上所述及網(wǎng)上的相關(guān)資料隅要,this對象(引用)的使用情況總結(jié)如下:
JavaScript是動態(tài)語言,this關(guān)鍵字在執(zhí)行的時候才能確定是誰董济。所以this永遠(yuǎn)指向調(diào)用者步清,即對“調(diào)用對象”的引用。簡單點(diǎn)說就是調(diào)用的方法屬于哪個對象虏肾,this就指向那個對象廓啊。根據(jù)函數(shù)調(diào)用方式的不同,this可以 指向全局對象封豪,當(dāng)前對象谴轮,或其他任意對象。
1吹埠、全局函數(shù)調(diào)用第步,全局函數(shù)中的this會指向全局對象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方法缘琅,則里面定義的屬性或方法會取不到
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的方式實例化一個對象驯杜,this會指向通過構(gòu)造函數(shù)生成的對象受啥。(構(gòu)造器調(diào)用模式)
代碼清單2
<script type="text/script">
function Func() {
if(this== window) {
alert("this == window");
}
else{
alert("this != window");
}
this.fieldA ="I'm a field";
alert(this);
}
var obj =newFunc();
alert(obj.fieldA);//this指向的是對象obj
</script>
3做个、對象方法的調(diào)用,this指向當(dāng)前對象滚局。任何函數(shù)居暖,只要該函數(shù)被當(dāng)做一個對象的方法使用或賦值時,該函數(shù)內(nèi)部的this都是對該對象本身的引用藤肢。也可理解為this寫在一個普通對象中太闺,this指向的就是對象本身。(方法調(diào)用模式)
(方法的定義: 作為對象屬性的函數(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指向的是對象obj
</script>
4嘁圈、通過apply或call方法調(diào)用省骂,this指向傳入的對象蟀淮。
apply 或call 方法可以用來代替另一個對象調(diào)用一個方法。call 方法可將一個函數(shù)的對象上下文從初始的上下文改變?yōu)橛?thisObj 指定的新對象钞澳。如果沒有提供 thisObj 參數(shù)怠惶,那么 Global 對象被用作 thisObj。 (apply調(diào)用模式)
//代碼清單4
<script type="text/script">
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 --原型對象及構(gòu)造函數(shù)中的this指向新創(chuàng)建的實例對象策治。使用prototype擴(kuò)展方法可以使用this獲取到源對象的實例,私有字段無法通過原型鏈獲取兰吟。
//代碼清單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);//出錯,私有字段無法通過原型鏈獲取通惫。
}
};
var obj =newFunc();
obj.ExtendMethod("From prototype");//此時構(gòu)造函數(shù)及原型鏈中的this指向?qū)ο髈bj
</script>
6、閉包中的this --閉包:寫在function中的function混蔼,this指向全局對象window履腋。
6.1 對象中的閉包
//代碼清單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>
此時,閉包中的this指向全局對象window拄丰,只能取到全局對象的屬性府树。那么對象內(nèi)部的屬性(外部函數(shù)的變量)要想訪問又怎么辦呢? 把外部函數(shù)的this對象保存在一個閉包能訪問的變量就可以了料按⊙傧溃看如下代碼:
//代碼清單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垄潮,還是實例化一個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 =newa();
c();//false, true, [object object]
</script>
7弯洗、函數(shù)使用bind()方法綁定一個對象,this會指向傳給bind()函數(shù)的值逢勾。
<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指向元素本身
<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就是指全局對象window逃贝。這個跟第一點(diǎn)的全局函數(shù)調(diào)用的全局變量一樣。
原文鏈接:http://www.cnblogs.com/thislbq/archive/2016/08/04/5738811.html