1-1 函数中this指向

  1. //在函数内部 谁调用这个函数 this必然指向谁
  2. 函数正常调用的时候this指向: window
  3. 定时器: this指向window
  4. 构造函数:this1指向实例化对象
  1. var name = "张三"
  2. function show(){
  3. console.log(this.name);
  4. }
  5. function go(){
  6. var name = "李四"
  7. show()
  8. }
  9. go() // "张三" // window.go()
  10. function go(){
  11. var name = "李四"
  12. console.log(this.name); // window.name
  13. }
  14. go() // "张三" window.go()

1-2 改变函数中this指向

1-2-1 call

语法: funName.call(obj,arg1,arg2...)

  1. var name="王五"
  2. var obj = { name:"李四" }
  3. function go(){
  4. console.log(this.name);
  5. }
  6. go() // 王五
  7. go.call(obj) // 李四

1-2-2 apply

语法:funName.call(obj,[arg1,arg2...])

  1. callapply的区别:
  2. 应用场景:传递多个参数的情况
  3. call依次去传递
  4. apply 需要传递数组
  1. var name="window"
  2. var zhang={
  3. name:"张三"
  4. }
  5. function show(a,b){
  6. console.log(this.name);
  7. console.log(a+b);
  8. }
  9. show(1,2)
  10. show.call(zhang,2,3)
  11. show.apply(zhang,[1,2])

1-2-3 bind

  1. bind 绑定的函数不会马上执行,只是改变了函数上下文的执行环境
  2. callapply调用的时候马上执行
  1. var name = "window"
  2. var zhang = {
  3. name:"张三"
  4. }
  5. var show = function (a,b){
  6. console.log(this.name);
  7. console.log(a+b);
  8. }.bind(zhang)
  9. show(2,3) // zhang 5

使用场景

  • 解决定时器中this的指向问题 ```javascript

解决

1.使用bind解决

btn.onclick = function(){ setTimeout(function(){
console.log(this.id);
}.bind(btn),1000) }

/* btn.onclick = function(){ var self = this setTimeout(function(){
console.log(this.id);
}.bind(self),1000) }

btn.onclick = function(){ setTimeout(function(){
console.log(this.id);
}.bind(this),1000) } */

2.使用箭头函数解决

btn.onclick = function(){ setTimeout(()=>{ console.log(this.id); },1000) } ```