[TOC] ## 7.1 this * javascript的頂級作用域是window,全局變量是widow的屬性,函數是window的方法; ` this的指向:` * 1.在事件中,this指向正在執行事情的當前對象 * 2.在方法中,誰調用方法,this指向誰 ~~~ var a = 10; // window.a=10; function b(){ console.log(this.a); //10 } // window.b(); b(); console.log(window.a); //10 ~~~ ## 7.2 this 指向 > .函數作為普通函數調用,this指向window ~~~ <!-- 自定義屬性data-name=value --> <input type="button" value="hello" id="test"> <script> var value = "change" var test = document.getElementById("test"); test.onclick = function(){ // setTimeout(function(){ // console.log(this.value); //hello // },300) go(); //this還是指向window-->函數正常調用,this指向window } function go(){ console.log(this.value); } </script> ~~~ ### 7.2.1 bind 改變函數內部this關鍵字的指向 > bind后函數不會執行，而只是返回一個改變了上下文的函數副本，而call和apply是直接執行函數 ~~~ <!-- 自定義屬性data-name=value --> <input type="button" value="hello" id="test"> <script> var value = "change" var test = document.getElementById("test"); test.onclick = function(){ setTimeout(function(){ console.log(this.value); //hello }.bind(this),300) } </script> * * * * * <script> // bind-->改變函數內部this關鍵字的指向 var name = "zhang"; var obj = { name:"cheng" }; var func = function(){ console.log(this.name); }.bind(obj); func(); </script> ~~~ ### 7.2.2 call/apply > call --> 改變函數內部this ，關鍵字的指向 call(thisObj,params) apply -->改變函數內部this關鍵字的指向 apply(thisObj,[params]) //傳值傳數組z ``` var cheng = { name:"cheng" } var jiang = { name:"jiang", sayName(a,b){ console.log(this.name) console.log(a+b); } } jiang.sayName.call(cheng,1,2); // cheng 3 jiang.sayName.apply(cheng,[1,3]); //cheng 4 ``` ### 7.2.3 this 中使用箭頭函數 * 箭頭函數可以改變函數的this指向 ~~~ <!-- 自定義屬性data-name=value --> <input type="button" value="hello" id="test"> <script> var value = "change" var test = document.getElementById("test"); test.onclick = function(){ setTimeout(()=>{ console.log(this.value); },300) } </script> ~~~ ## self.value ~~~ <!-- 自定義屬性data-name=value --> <input type="button" value="hello" id="test"> <script> var value = "change" var test = document.getElementById("test"); test.onclick = function(){ var self = this setTimeout(function(){ console.log(self.value); //hello },300) } </script> ~~~