這次帶給大家js中This的優雅使用，js中This優雅使用的注意事項 有哪些，下面就是實戰案例，一起來看一下。
當一個函數被呼叫時，會建立一個活動記錄（執行上下文）。
這個記錄會包含函數在哪裡被呼叫（呼叫堆疊）、函數的呼叫方法、傳入的參數>等資訊。
this就是記錄的其中一個屬性，會在函數執行的過程中被使用。
this既不指向函數本身也不指向函數的作用域。
this實際上是在函數被呼叫時發生的綁定，它指向什麼完全取決於函數在哪裡被呼叫。
一、為什麼要使用this
this提供了一種更優雅的方式來隱式的「傳遞」一個物件的引用，因此可以將API設計的更加簡潔並且易於復用。
var me = {
name: "fenfei" };
//不使用this，调用 function speak(name){
console.log("Hello, I'm "+ name);
}
speak(me.name); //Hello, I'm fenfei
//使用this，调用 function speak(){
console.log("Hello, I'm "+ this.name);
}
speak.call(me); //Hello, I'm fenfei 登入後複製
二、this存在的兩個誤解
（1）this指向函數本身；
作用域無法透過JavaScript程式碼存取，它存在於JavaScript引擎內部。每當把this和詞法作用域的查找混合使用時，一定要提醒自己，這是無法實現的！
this是在運行時進行綁定的，並不是寫時綁定，它的上下文取決於函數呼叫時的各種條件。 this的綁定和函數宣告的位置沒有任何關係，只取決於函數的呼叫位置（也就是函數的呼叫方式）！
三、綁定規則
1）預設綁定
最常用的函數呼叫類型：獨立函數呼叫。可以把這條規則看成是無法套用其他規則時的預設規則。
function foo() { console.log(this.a);
}var a = 2;
foo(); // 2 登入後複製
2）隱式規則
隱含綁定的規則是呼叫位置是否有上下文對象，或說是否被某個物件擁有或包含。
function foo() { console.log(this.a);
}var obj = { a: 2, foo: foo
};
obj.foo(); // 2 登入後複製
。當foo（）被呼叫時，this被綁定到obj，因此this.a和obj.a是一樣。
但有時候會出現隱含遺失。
function foo() { console.log(this.a);
}var obj = { a: 2, foo: foo
};var bar = obj.foo; // 函数 var a = "oops, global"; //bar(); // "oops, global" 登入後複製
。雖然bar是obj.foo的一個引用，但實際上，它引用的是foo函數本身。
call與apply
var name="全局";var xpg={ name:"局部"};function getName(){
alert(this.name);
}
getName(xpg);//全局getName.call(xpg);//局部getName.call();//全局 登入後複製
。其中this身處函數getName中。無論this身處何處，一定要找到函數運行時的位置。此時函數getName執行時的位置,對於window物件 ，getName回傳的this.name其實是window.name，所以alert出來的是「全域」！
bind（）
function f(){
return this.a;
}
var g = f.bind({a : "test"});
//想把某个对象作为this的时候，就把它传进去，得到一个新对象gconsole.log(g()); // test
//重复调用的时候，this已经指向bind参数。
//这对于我们绑定一次需要重复调用依然实现绑定的话，会比apply和call更加高效（看下面这个例子）var o = {a : 37, f : f, g : g}; 登入後複製
console.log(o.f(), o.g()); // 37, test //o.f()透過物件的屬性調用，this指向對象o;//比較特殊的是即使我們把新綁定的方法作為對象的屬性調用，//o.g()依然會按之前的綁定去走，所以答案是test不是g
4）new綁定
new的this綁定不能被修改！
new呼叫函數會自動執行下面操作：
function Person(name,age) { this.name = name this.age = age console.log("我也只不过是个普通函数")
}
Person("zxt",22) // "我也只不过是个普通函数"console.log(name) // "zxt"console.log(age) // 22var zxt = new Person("zxt",22) // "我也只不过是个普通函数"console.log(zxt.name) // "zxt"console.log(zxt.age) // 22 登入後複製
上面這個例子中，首先定義了一個 Person 函數，既可以普通調用，也可以以建構函數 的形式的呼叫。
因此，所謂的new綁定是指透過new運算元來呼叫函數時，會產生一個新對象，並且會把建構函式內的this綁定到這個對象。
四、優先權
new綁定>call\apply等顯示綁定>隱含綁定>預設綁定。
了解了函数调用中this绑定的四条规则，需要做的就是找到函数的调用位置并判断对应哪条规则。
（1）函数是否是new绑定？如果是，this绑定的是新创建的对象。
new绑定和call、apply无法一起使用，因此不能使用new foo.call(obj).
五、this绑定例外
1）被忽略的绑定
如果你把null或者undefined作为this的绑定对象传入call、apply或者bind。
function foo() { console.log(this.a);
}var a = 2;
foo.call(null); // 2 登入後複製
2)间接引用
function foo() { console.log(this.a);
}var a = 2;
var o = { a: 3, foo: foo };
var p = { a: 4 };
o.foo(); // 3(p.foo = o.foo)(); // 2 登入後複製
赋值表达式p.foo = o.foo的返回值是目标函数的引用，因此调用位置是foo()而不是p.foo()或者o.foo()。
当没有明确的执行时的当前对象时，this指向全局对象window。
var name = "Tom";var Bob = { name: "Bob", show: function(){
alert(this.name);
}
}var show = Bob.show;
show(); //Tom 登入後複製
。你可能也能理解成show是window对象下的方法，所以执行时的当前对象时window。但局部变量引用的函数上，却无法这么解释：
var name = "window";var Bob = { name: "Bob", showName: function(){
alert(this.name);
}
};var Tom = { name: "Tom", showName: function(){ var fun = Bob.showName;
fun();
}
};
Tom.showName(); //window 登入後複製
4)在浏览器中setTimeout、setInterval和匿名函数 执行时的当前对象是全局对象window:
var name = "Bob";
var nameObj ={
name : "Tom",
showName : function(){
alert(this.name);
},
waitShowName : function(){
setTimeout(this.showName, 1000);
}
};
nameObj.waitShowName(); 登入後複製
5)软绑定
var count=2;var obj={ count:0, cool:function coolFn(){ console.log(this.count);//0
var self=this; if(self.count<1){
setTimeout(function timer(){
self.count++; console.log("awesome?"); console.log(self.count);//1
console.log(this.count);//2
},100);
}
}
};
obj.cool(); 登入後複製
6)dom事件中的this
（1）直接在dom元素中使用
分析：对于dom元素的一个onclick（或其他如onblur等）属性，它为所属的html元素 所拥有，直接在它触发的函数里写this，this应该指向该html元素。
（2）给dom元素注册js函数
a、不正确的方式
<script type="text/javascript">
function thisTest(){
alert(this.value); // 弹出undefined, this在这里指向??}</script><input id="btnTest" type="button" value="提交" onclick="thisTest()" /> 登入後複製
。分析：onclick事件直接调用thisTest函数，程序就会弹出undefined。
b、正确的方式
<input id="btnTest" type="button" value="提交" /><script type="text/javascript">
function thisTest(){
alert(this.value);
}document.getElementById("btnTest").onclick=thisTest;
//给button的onclick事件注册一个函数</script> 登入後複製
。分析：在前面的示例中，thisTest函数定义在全局作用域（这里就是window对象），所以this指代的是当前的window对象。函数作用域 内，this归btnTest所有，this也就指向了btnTest。
因为多个不同的HTML元素虽然创建了不同的函数副本，但每个副本的拥有者都是相对应的HTML元素，各自的this也都指向它们的拥有者，不会造成混乱。
<input id="btnTest1" type="button" value="提交1" onclick="thisTest()" /><input id="btnTest2" type="button" value="提交2" /><script type="text/javascript">function thisTest(){this.value="提交中";
}var btn=document.getElementById("btnTest1");
alert(btn.onclick); //第一个按钮函数var btnOther=document.getElementById("btnTest2");
btnOther.onclick=thisTest;
alert(btnOther.onclick); //第二个按钮函数</script> 登入後複製
其弹出的结果是：
//第一个按钮function onclick(){
thisTest()
}//第二个按钮function thisTest(){ this.value="提交中";
} 登入後複製
7)this词法（ES6：箭头函数）
箭头函数不使用function关键字定义，而是使用“胖箭头”的操作符=>定义；箭头函数不使用this的四种标准规则，而是根据外层（函数或者全局）作用域来决定this。
function foo(){ return (a)=>{ //this继承自foo
console.log(this.a);
};
}var obj1={ a:2}var obj2={ a:3}var bar=foo.call(obj1);
bar.call(obj2);//2不是3！ 登入後複製
foo（）内部创建的箭头函数会捕获调用时foo（）的this。由于foo（）的this被绑定到obj1，bar（引用箭头函数）的this也被绑定到obj1，而箭头函数的绑定无法修改。（new的也不能！）
相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
推荐阅读：
怎样利用JS做出引用传递与值传递
使用JS实做出加密解密操作
以上是js中This的優雅使用的詳細內容。更多資訊請關注PHP中文網其他相關文章！
