this指向問題 · javascript

1. 哪個函數使用this this就指向當前 ~~~ <input type="button" value="hello" id="test"> <script> var value = "change" var test = document.getElementById("test"); test.onclick = function(){ go(); } function go(){ console.log(this.value); } ~~~ 2. setTimeout 是window的事件 this指向window ~~~ <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); //change },300) //this還是指向window-->函數正常調用,this指向window } ~~~ 3. 箭頭函數解決this指向問題 ~~~ <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> ~~~ 4. bind 解決this指向問題 ~~~ <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> ~~~ 5. 定義變量裝載this ~~~ <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> ~~~ 6. call-->改變函數內部this,關鍵字的指向 call(thisObj,params) ~~~ 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); ~~~ 7. apply-->改變函數內部this關鍵字的指向 apply(thisObj,[params]) ~~~ var cheng={ name:"cheng" } var jiang = { name:"jiang", sayName(a,b){ console.log(this.name); console.log(a+b); } } jiang.sayName.apply(cheng,[1,2]) ~~~ 6. call-->改變函數內部this,關鍵字的指向 call(thisObj,params) ~~~ ~~~ this在函數和事件中的指向以及改變方法 ~~~ <input type="text" value="童" id="input"> <script> // var input =document.getElementById("input"); // var value="wang" // input.onclick=function(){ // console.log(this.value) // } // input.onclick.apply() // var name="tong" // var obj={ // name:"wang", // age:18, // sayname:function(){ // console.log(this.name) // } // } // obj.sayname.apply() </script> ~~~ 在構造函數中this的指向以及改變方式 ~~~  <script> var obj={ name:"童" } class person{ constructor(name,age){ this.name = name; this.age = age; // this.sayname=function(){ // console.log(this.name) // } } sayname(){ console.log(this.name) } } var stu =new person("tong") stu.sayname.call(obj); // function fn(name){ // this.name=name; // this.fn1=function(){ // console.log(this.name); // } // }; // var obj={}; // // fn.call(obj,'jack'); // fn.apply(obj,['jack']); // console.log(obj.name); // obj.fn1(); </script> ~~~ ~~~ var name = "li"; var cheng = { name: "cheng", test() { console.log(this.name) } } // cheng.test.bind()() // console.log(typeof(cheng)) // var a = cheng.test.bind() // a() // cheng.test.call(); // cheng.test.apply() ~~~