7. this · JavaScript

[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 ~~~  <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是直接执行函数 ~~~  <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指向 ~~~  <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 ~~~  <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> ~~~