一、前言
1、 Javascript是一門基於對象的動態語言，也就是說，所有東西都是對象，一個很典型的例子就是函數也被視為普通的對象。Javascript可以通過一定的設計模式來實現面向對象的編程，其中this “指針”就是實現面向對象的一個很重要的特性。但是this也是Javascript中一個非常容易理解錯，進而用錯的特性。
2、this是Javascript語言的一個關鍵字。 它代表函數運行時，自動生成的一個內部對象。
二、進入正題
1、全局代碼中的——this
1、 瀏覽器宿主的全局環境中，this指的是window對象。在全局代碼中，this始終是全局對象本身，這樣就有可能間接的引用到它了。
示例:
<script type="text/javascript">
console.log(this); //window
console.log(this == window);//true
</script>
2、 瀏覽器中在全局環境下，使用var聲明變量將會把值賦給this或window。
示例：
<script type="text/javascript">
var name = "Jack" ;
console.log(this.name);//Jack
console.log(window.name);//Jack
</script>
3、任何情況下，即使創建變量時沒有使用var，也是在操作全局this。而在函數里面創建變量時，結果為undefined。
示例：
<script type="text/javascript">
name = "Jack";
function testThis() {
age = 20;
console.log(this.age); // 20
}
console.log(this.age); // undefined
console.log(this.name);// Jack
testThis();
console.log(this.name);// Jack
</script>
二、函數代碼中的——this
1、先來看一個最簡單的例子
<script type="text/javascript">
var name = "Jack";
function sayHi(){
console.log("你好，我的名字叫" + name);// "你好，我的名字叫Jack"
console.log("你好，我的名字叫" + this.name);// "你好，我的名字叫Jack"
}
sayHi();
</script>
首先，我們定義了一個全局字符串對象name和函數對象sayHi。運行都會打印出，“你好，我的名字叫Jack”。全局變量name將值賦給this。
2、我們把上面的代碼改一改：
<script type="text/javascript">
name = "Jack";
function testThis() {
this.name = "Alice";
}
console.log("你好，我的名字叫"+this.name); // "你好，我的名字叫Jack"
testThis();
console.log("你好，我的名字叫"+this.name); // "你好，我的名字叫Alice"
</script>
運行結果為Jack中的this為函數調用之前的全局變量name=Jack將值賦給this，此時textThis函數未將Alice賦值給this；運行結果為Alice為函數調用之后testThis函數將Alice值賦值給了全局變量name，此時name = "Alice" this.name = "Alice"。
3、函數也是普通的對象，可以將其當作一個普通變量使用。我們再把上面的代碼改一改：
<script type="text/javascript">
var name = "Jack";
function sayHi(){
console.log("你好，我的名字叫" + this.name);// undefined
}
var person = {};
person.sayHello = sayHi;
person.sayHello();
</script>
//而定義 person = {name：Alice} ，則：
<script type="text/javascript">
var name = "Jack";
function sayHi(){
console.log("你好，我的名字叫" + this.name);// "你好，我的名字叫Alice"
}
var person = {name:Alice};
person.sayHello = sayHi;
person.sayHello();
</script>
第一，我們定義了一個全局函數對象sayHi並執行了這個函數，函數內部使用了this關鍵字，那么執行this這行代碼的對象是sayHi（一切皆對象的體現），sayHi是被定義在全局作用域中。其實在Javascript中所謂的全局對象，無非是定義在window這個根對象下的一個屬性而已。因此，sayHi的所有者是window對象。也就是說，在全局作用域下，你可以通過直接使用name去引用這個對象，你也可以通過window.name去引用同一個對象。因而this.name就可以翻譯為window.name。
第二，我們定義了一個person的對象，並定義了它的sayHello屬性，使其指向sayHi全局對象。那么這個時候，當我們運行person.sayHello的時候，this所在的代碼所屬對象就是sayHello了（其實准確來說，sayHi和sayHello是只不過類似兩個指針，指向的對象實際上是同一個），而sayHello對象的所有者就是person了。第一次，person里面沒有name屬性，因此彈出的對話框就是this.name引用的就是undefined對象（Javascript中所有只聲明而沒有定義的變量全都指向undefined對象）；而第二次我們在定義person的時候加了name屬性了，那么this.name指向的自然就是我們定義的字符串了。
參考上面解釋，我們將上面示例改造成面向對象式的代碼：
<script type="text/javascript">
var name = "Jack";
function sayHi(){
console.log("你好，我的名字叫" + this.name);//兩次函數調用均成功，打印兩次："你好，我的名字叫Marry" "你好，我的名字叫Alice"
}
function Person(name){
this.name = name;
}
Person.prototype.sayHello = sayHi;
var marry = new Person("Marry");
marry.sayHello();
var alice = new Person("Alice");
alice.sayHello();
</script>
在上面這段代碼中，我們定義了一個Person的“類”（實際上還是一個對象），然后在這個類的原型（類原型相當於C++中的靜態成員變量的概念）中定義了sayHello屬性，使其指向全局的sayHi對象。運行代碼我們可以看到，marry和kevin都成功打印出來。
4、當用調用函數時使用了new關鍵字，此刻this指代一個新的上下文，不再指向全局this。通常我將這個新的上下文稱作實例。
<script type="text/javascript">
name = "Jack";
function testThis() {
this.name = "Alice";
}
console.log(this.name); // "Jack"
new testThis();
console.log(this.name); // "Jack"
console.log(new testThis().name); // "Alice"
</script>
三、對象代碼中的——this
1、可以在對象的任何方法中使用this來訪問該對象的屬性。這與用new得到的實例是不一樣的。
var obj = {
name: "Jack",
func: function () {
console.log(this.name); // "Jack"
}
};
obj.func();
2、可以將函數綁定到對象，就好像這個對象是一個實例一樣。
var obj = {
name: "Jack"
};
function logName() {
console.log(this.name); //logs "Jack"
}
logName.apply(obj);
3、也可以不通過this，直接訪問對象的屬性。
var obj = {
name: "Jack",
deeper: {
logName: function () {
console.log(obj.name);// "Jack"
}
}
};
obj.deeper.logName();
四、jQuery代碼中的——this
1、jQuery庫中大多地方的this也是指代的DOM元素。頁面上的事件回調和一些便利的靜態方法比如$.each 都是這樣的。
<div class="foo bar1"></div>
<div class="foo bar2"></div>
<script src="../05-JQuery/JS/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$(function(){
$(".foo").each(function () {
console.log(this); // <div class="foo bar1"></div> <div class="foo bar2"></div>
});
$(".foo").on("click", function () {
console.log(this); // <div class="foo bar1"> <div class="foo bar2"></div>
});
})
</script>
五、DOM事件中的——this
在DOM事件的處理函數中，this指代的是被綁定該事件的DOM元素。
function Listener() {
document.getElementById("foo").addEventListener("click", this.handleClick); } Listener.prototype.handleClick = function (event) { console.log(this); //logs "<div id="foo"></div>" } var listener = new Listener(); document.getElementById("foo").click();
六、使用with時的——this
使用with可以將this人為添加到當前執行環境中而不需要顯示地引用this。
function Thing () {
}
Thing.prototype.foo = "bar"; Thing.prototype.logFoo = function () { with (this) { console.log(foo); foo = "foo"; } } var thing = new Thing(); thing.logFoo(); // logs "bar" console.log(thing.foo); // logs "foo"
結束：
上面，就是博主自己在實踐的過程中，總結的一點經驗，希望對大家能否有所幫助，歡迎大家能夠提出高貴意見，博主定當補充改正。