JavaScript中this的指向

    技术2024-10-13  59

    JavaScript-this指向问题

    this指向

    1.script中的this指向

    指向:window <script> console.log(this) // window </script>

    2.全局变量,全局方法,普通函数this指向需要看调用的环境

    都省略了一个 windowthis指向全局 window // 普通的函数调用 window.function myFun() { console.log(this); } myFun(); // window var fun = 2; ===> window.fun =2; 在html中调用函数-window // html 中的内容 <button onclick="myFun()"></button> // 普通的函数调用 function myFun() { console.log(this); } // 这种在html中调用的还是指向:window 在html中定义一个元素,js中调用,this指向元素本身 <!-- html 内容 --> <div id="divs"></div> function myFun() { console.log(this); } divs.myFun() // <div id="divs"></div> 指向了元素本身

    3.setInterval 中的this指向

    指向:window setInterval(function() { var a = 1 console.log(a); console.log(this); },1000) 相当于 ===> window.setInterval(function() { var a = 1 console.log(a); console.log(this); },1000) // 所以this指向window

    4.箭头函数

    指向:作用域的上一层的this var obj = { naem : "momo", fun() { setInterval( () => { console.log(this.name); },200) } } obj.fun(); // 本来setInterval中的this指向window, // 但是我们使用了箭头函数,所以this指向了箭头函数作用域的上一层this

    5.对象函数调用

    指向:哪个函数调用就指向哪个函数 var obj = { fun : function() { console.log(this ,"++++++++++"); } } obj.fun(); // 指向函数本身

    6.构造函数

    指向:实例化对象 function Person(){ console.log(this,"++++++") } var p = new Person(); console.log(p)

    7.对象中的this指向

    指向:这里的this指向obj(谁调用this所在的函数,那么this就指向谁。) var obj = { name:'张三', fn:function(){ console.log("你好,我叫"+this.name); ///你好,我叫张三 } }

    8.apply()、call()以及bind() 中的this

    call()—中的this指向的是第一个参数 function say(a,b) { console.log(this,a+b); } say(5,2); // (window ,7) 直接调用时函数为全局方法,this指向window say.call({name : "momo",age : 18},3,5) // ({name : "momo",age : 18},8) this指向了第一个参数对象 apply()—中的this指向的是第一个参数 function say(a,b) { console.log(this,a+b); } say(5,2); // (window ,7) 直接调用时函数为全局方法,this指向window say.apply({name : "momo",age : 18},[3.5]) // ({name : "momo",age : 18},8) this指向了第一个参数对象 // 后面的参数,可以为数组 bind()—可以返回一个新的函数方法,this指向可以定义,第一个参数 function say(a,b) { console.log(this,a+b); } say(5,2); // (window ,7) 直接调用时函数为全局方法,this指向window var sa = say.bind({name : "momo",age : 18}); sa(); // ({name : "momo",age : 18}) this指向对应的第一个参数对象 var sa = say.bind({name : "momo",age : 18},10); sa(5); // ({name : "momo",age : 18},15) // this指向对应的第一个参数对象, // sa(5),传递的参数被当作say()函数的第二个参数 var sa = say.bind({name : "momo",age : 18},10,5); sa(); // ({name : "momo",age : 18},15) // this指向对应的第一个参数对象
    Processed: 0.010, SQL: 9