1.前言
修改this指向是经常遇到的问题在这做个粗浅的理解
2.不管函数在哪,要看谁调用
1.基础
// *********1 全局作用域下 ,this指向 window console.log("1 全局作用域下",this)//window.console.log(this) // **********2 在事件函数中, this 指向 事件目标/触发者 document.body.onclick = function(){ console.log('2 在事件函数中',this) } // *********3 在构造函数中,this指向构造函数创建的对象 function Stuednt (_name){ this.name = _name console.log('3 在构造函数中',this) } var zhangSan = new Stuednt('张三') // var Lsi = new Stuednt('李四') // ********4 在对象方法中,this指向这个对象本身 var wangWu = { name:'王五', skill:function(){ console.log('4 在对象方法中',this) } } wangWu.skill() // ********5 计时器中使用this ,this指向window // 如果使用ES6的箭头函数则保持原有指向,事件函数中的事件目标 // 箭头函数导致this总是指向函数定义生效时所在的对象 // 箭头函数this为父作用域的this,不是调用时的this // 箭头函数的this永远指向其父作用域,任何方法都改变不了 document.querySelector('button').addEventListener("click",function(){ // window.setTimeout(function(){ setTimeout(function(){ console.log("5 计时器中使用this",this)//window },1000) console.log("监听事件 5",this) setTimeout(()=>{ console.log("5 箭头函数 →",this)// },1000) })
2.高那么一点点
var name = "李白"; var person = { name: "杜甫", sayHi() { console.log(this.name, "你好"); } }; person.sayHi(); // 把sayHi的函数地址给fn保存 var fn = person.sayHi; fn(); var person2 = { name: "王勃" }; person2.sayHi = person.sayHi; person2.sayHi(); // "use strict"; //严格模式下是 undefined // person2.sayHi.call(window);
3. this指向修改 apply call bind
1.如何判断用哪个
立即执行??
还是返回一个函数地址 ,找时间调用
// **************call(参数1,原函数参数1,原函数参数2...) 立即执行函数 // 参数1 是this指向, // 参数2 是原函数的参数 ,逗号 隔开 function fn2(a, b) { console.log(this); } fn2(); fn2.call({}, 1, 2); // ***************apply(参数1,[原函数参数]) 立即执行函数 // 参数1 是this指向, // 参数2 原函数的参数 数组形式 fn2.apply({}, [10, 20]); //******************bind(参数1,原函数参数1,原函数参数2...)绑定 并不执行 // 也就是不会去调用绑定的函数 // 参数1 是this指向, // 参数2 原函数参数 逗号 隔开 // 参数格式和call一样 // fn2.bind({}); var fnBind = fn2.bind({ name: "bind" }, 11, 22); // 自己找时间调用... fnBind(); // 函数被call执行了一次 执行完之后会被执行的结果代替没有返回值就是undefined 所以不会持续输出 // setInterval(fn地址, 不能是 fn(), 1000); setInterval( function (params) { console.log(this); }.call({ name: "call" }), 1000 ); // 所以用bind setInterval( function (params) { // console.log(this); }.bind({ name: "bind" }), 1000 );
4.Tips 抛砖引玉
var nums = [2,55,10,99,66] // 不是为了修改this ,是为了修改参数传递方式 console.log("min",Math.min.apply(Math,nums))