[ES6]this指向window事件源箭头函数的this指向改变this指向callapplybind

this指向 window

声明式函数

function fun1(){console.log(this);}fun1();


匿名函数

const fun2 &＃61; function (){console.log(this);}fun2();


定时器 延时器

setInterval(function(){console.log(this);} , 1000);setTimeout(function(){console.log(this);} , 1000);


forEach循环

const arr &＃61; [1,2,3,4,5];arr.forEach(function(item){console.log(this);})


this指向 事件源

事件绑定中 事件处理函数 this指向默认是事件源也就是绑定事件的标签对象


<div>我是div标签对象div>


const oDiv &＃61; document.querySelector(&＃39;div&＃39;);oDiv.addEventListener(&＃39;click&＃39; , function(){console.log(this);})


this指向 数组/对象

数组/对象中 存储的函数 this指向是 数组/对象


// 数组中存储的函数 this指向 是 这个 数组本身const arr1 &＃61; [1,2,3, function(){console.log(this)} ];arr1[3]();


// 对象中存储的函数 this指向 是 这个 对象本身// 可以通过 this.属性 调用对象存储的数据const obj &＃61; {name:&＃39;张三&＃39;,age:18,sex:&＃39;男&＃39;,fun:function(){console.log(this);console.log(this.name);console.log(this.age);console.log(this.sex);},};obj.fun() ;


箭头函数的this指向

箭头函数的this指向是 父级程序的this指向如果没有父级程序 或者 父级程序没有this &＃xff0c;箭头函数的this指向是 window


// // 箭头函数绑定的事件处理函数// // 当前这个的程序中 事件处理函数 没有父级程序// // 箭头函数this指向是windowoDiv.addEventListener(&＃39;click&＃39; , ()&＃61;>{console.log(this);})


const obj &＃61; {name:&＃39;张三&＃39;,age:18,sex:&＃39;男&＃39;,// 对象中定义的函数 this指向是这个对象本身fun1:function(){console.log(this)},// 箭头函数,this指向是父级程序 // 当前箭头函数,父级程序是对象// 对象是没有this的,箭头函数this指向是windowfun2:()&＃61;>{console.log(this)},fun3:function(){// 定义在对象中的函数fun3,this指向是对象本身// 函数fun4是一个箭头函数,存储在 函数fun3 中 父级程序就是函数fun3// 函数fun3的this指向是存储fun3的对象obj// 箭头函数fun4 的this指向 和 父级程序fun3的this指向相同// 也就是 obj对象本身const fun4 &＃61; ()&＃61;>{console.log(this);}fun4();} };obj.fun1();obj.fun2();obj.fun3();

改变this指向

call

函数调用.call( 参数1 , 参数2,参数3.... );参数1: 要改变的this指向之后的所有参数参数2,参数3....原始函数需要的数据


const obj1 &＃61; {name:&＃39;张三&＃39;,age:18,sex:&＃39;男&＃39;,// 存储在对象obj1 中的函数 this指向默认是 对象obj1// this.name , this.age , this.sex 调用的应该是 obj1 中的数据fun:function(addr,phone){console.log( this.name );console.log( this.age );console.log( this.sex );console.log( addr );console.log( phone );}}obj1.fun(&＃39;北京&＃39; , 12341);


const obj2 &＃61; {name:&＃39;李四&＃39;,age:20,sex:&＃39;女&＃39;,};obj1.fun.call(obj2 , &＃39;天津&＃39; , 12345);


apply

函数调用.apply( 参数1 , [ 参数2,参数3.... ] );参数1: 要改变的this指向之后的所有参数参数2,参数3....以数组的形式 赋值 原始函数需要的数据


const obj2 &＃61; {name:&＃39;李四&＃39;,age:20,sex:&＃39;女&＃39;,};obj1.fun.apply(obj2 , [ &＃39;天津&＃39; , 12345 ]);

bind

const obj1 &＃61; {name:&＃39;张三&＃39;,age:18,sex:&＃39;男&＃39;,// 存储在对象obj1 中的函数 this指向默认是 对象obj1// this.name , this.age , this.sex 调用的应该是 obj1 中的数据fun:function(addr,phone){console.log( this.name );console.log( this.age );console.log( this.sex );console.log( addr );console.log( phone );}}const obj2 &＃61; {name:&＃39;李四&＃39;,age:20,sex:&＃39;女&＃39;,};obj1.fun.bind(obj2 , &＃39;天津&＃39; , 12345)();


不同点&＃xff1a;

1. 函数调用 call&＃xff0c;apply方法时&＃xff0c;返回的是调用函数的返回值。
2. bind是返回一个新的函数&＃xff0c;需要再加一个小括号来调用。
3. call和apply的区别就是&＃xff0c;call接受的是一系列参数&＃xff0c;而apply接受的是一个数组。
   
   

<div>我是div标签div><p>我是p标签p><h1>我是h1标签h1>


const oDiv &＃61; document.querySelector(&＃39;div&＃39;);
oDiv.addEventListener(&＃39;click&＃39; , fun );function fun(){this.style.color &＃61; &＃39;red&＃39;;this.style.width &＃61; &＃39;200px&＃39;;this.style.height &＃61; &＃39;200px&＃39;;this.style.background &＃61; &＃39;pink&＃39;;}

const oP &＃61; document.querySelector(&＃39;p&＃39;);const oH1 &＃61; document.querySelector(&＃39;h1&＃39;);oDiv.addEventListener(&＃39;click&＃39; , fun.bind( oP , &＃39;张三&＃39; , 18 , &＃39;男&＃39; ) );oDiv.addEventListener(&＃39;click&＃39; , fun.bind( oH1 , &＃39;张三&＃39; , 18 , &＃39;男&＃39; ) );function fun( name,age,sex ){this.style.color &＃61; &＃39;red&＃39;;this.style.width &＃61; &＃39;200px&＃39;;this.style.height &＃61; &＃39;200px&＃39;;this.style.background &＃61; &＃39;pink&＃39;;console.log( name , age , sex );}