js中This的優雅使用

這次帶給大家js中This的優雅使用，js中This優雅使用的注意事項有哪些，下面就是實戰案例，一起來看一下。

當一個函數被呼叫時，會建立一個活動記錄（執行上下文）。

這個記錄會包含函數在哪裡被呼叫（呼叫堆疊）、函數的呼叫方法、傳入的參數>等資訊。

this就是記錄的其中一個屬性，會在函數執行的過程中被使用。

this既不指向函數本身也不指向函數的作用域。

this實際上是在函數被呼叫時發生的綁定，它指向什麼完全取決於函數在哪裡被呼叫。
在嚴格模式下，一般函數呼叫的時候this指向undefined。

一、為什麼要使用this

this提供了一種更優雅的方式來隱式的「傳遞」一個物件的引用，因此可以將API設計的更加簡潔並且易於復用。
eg：

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指向函數本身；
（2）this指向函數的作用域。

作用域無法透過JavaScript程式碼存取，它存在於JavaScript引擎內部。每當把this和詞法作用域的查找混合使用時，一定要提醒自己，這是無法實現的！

this是在運行時進行綁定的，並不是寫時綁定，它的上下文取決於函數呼叫時的各種條件。 this的綁定和函數宣告的位置沒有任何關係，只取決於函數的呼叫位置（也就是函數的呼叫方式）！

三、綁定規則

1）預設綁定

最常用的函數呼叫類型：獨立函數呼叫。可以把這條規則看成是無法套用其他規則時的預設規則。
eg：

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函數本身。
因此此時的bar()其實是一個不帶任何修飾的函數調用，應用了預設綁定。
3）顯示綁定

call與apply
。在JavaScript中 call與apply就像this的父母一般，讓this住哪它就得住哪，不得不聽話！當無參數時，目前物件為window
eg：

var name="全局";var xpg={    name:"局部"};function getName(){
    alert(this.name);
}
getName(xpg);//全局getName.call(xpg);//局部getName.call();//全局

。其中this身處函數getName中。無論this身處何處，一定要找到函數運行時的位置。此時函數getName執行時的位置,對於
（1）getName(xpg);//全域
顯然，函數getName所在的物件是window，因此this的安身之處定然在window，即指向window物件，getName回傳的this.name其實是window.name，所以alert出來的是「全域」！
（2）getName.call(xpg);//局部
。其中，call指定this的安身之處就是在xpg對象，因為this被迫只能在xpg那安家，則此時this指向xpg對象， this.name其實是xpg.name，因此alert出來的是“局部” ！

bind（）
。 bind方法是es5開始提供的，所以ie9 才支援
eg：

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呼叫函數會自動執行下面操作：
（1）建立（或說建構）一個全新的物件；
（2）這個新物件會被執行[[原型]]連接;
（3）這個新對象會綁定到函數呼叫的this；
（4）如果函數沒有回傳其他對象，那麼new表達式中的函數呼叫會自動傳回這個新對象。
eg：

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操作符,則建構了一個新的物件。
。普通呼叫時，前面已經介紹過，此時應用預設綁定規則，this綁定在了全域 物件上，此時全域物件上會分別增加 name 和 age 兩個屬性。
。當透過new操作符呼叫時，函數會傳回一個對象，從輸出結果來看 this 物件綁定在了這個返回的物件上。

因此，所謂的new綁定是指透過new運算元來呼叫函數時，會產生一個新對象，並且會把建構函式內的this綁定到這個對象。

四、優先權

new綁定>call\apply等顯示綁定>隱含綁定>預設綁定。

了解了函数调用中this绑定的四条规则，需要做的就是找到函数的调用位置并判断对应哪条规则。

（1）函数是否是new绑定？如果是，this绑定的是新创建的对象。
var bar = new Foo();
（2）函数是否通过call、apply显示绑定或硬绑定？如果是，this绑定的是指定的对象。
var bar = foo.call(obj);
（3）函数是否在某个上下文对象中隐式调用？如果是，this绑定的是那个上下文对象。
var bar = obj.foo();
（4）上述全不是，则使用默认绑定。如果在严格模式下，就绑定到undefined，否则绑定到全局window对象。
var bar = foo();

new绑定和call、apply无法一起使用，因此不能使用new foo.call(obj).

五、this绑定例外

1）被忽略的绑定

如果你把null或者undefined作为this的绑定对象传入call、apply或者bind。
这些值在调用时会被忽略，实际应用的是默认绑定规则。
eg：

function foo() {  console.log(this.a);
}var a = 2;
foo.call(null); // 2

2)间接引用
eg：

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()。
3）当前对象不明确时的this

当没有明确的执行时的当前对象时，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)软绑定
eg：

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。
因为thisTest函数是在window对象中定义的， 所以thisTest的拥有者（作用域）是window，thisTest的this也是window。而window是没有value属性的，所以就报错了。

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对象。
而通过document.getElementById(“btnTest”).onclick=thisTest;这样的形式，其实是将btnTest的onclick属性设置为thisTest函数的一个副本，在btnTest的onclick属性的函数作用域内，this归btnTest所有，this也就指向了btnTest。

因为多个不同的HTML元素虽然创建了不同的函数副本，但每个副本的拥有者都是相对应的HTML元素，各自的this也都指向它们的拥有者，不会造成混乱。
eg:

<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。
eg：

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中文網其他相關文章！