一、根据函数调用方式的不同，就会指向不同的对象：

  • 以函数的形式调用时，this就永远指向window

    1. var name="zhang"
    2.       function show(){
    3.           console.log(this.name)
    4.       }
    6.       // 函数正常调用的时候 this指向window
    7.       function go(){
    8.           var name="lisi"
    9.           show()
    10.       }
    11.       go()  //window.go()

  • 以方法的形式调用时，this就是调用方法的那个对象

    1. function fun(){
    2.           console.log(this.name)
    3.       }
    4.       var obj={
    5.           name:"xuan",
    6.           sayName:fun
    7.       }
    8.       obj.sayName()  // xuan

二、改变函数中this指向

2-1、call

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

2-2、apply

  1. var names = "wangwu"
  2.         var obj = {
  3.             name: "xuanxuan"
  4.         }
  5.         function nam() {
  6.             console.log(this.name)
  7.         }
  8.         // apply 可以改变函数内部关键字的指向  funName.apply(obj)
  9.         nam.apply(obj)

2-3、bind

bind 绑定的函数不会马上执行，只是改变了函数上下文的执行环境

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

使用场景

  1. <button id="btn">按钮</button>
  3. <script>
  4.   var id="1001";
  5.   var btn = document.getElementById("btn")
  6.   btn.onclick = function(){
  7.     setTimeout(function(){   // window.setTimeout
  8.       console.log(this.id);   // 1001 
  9.     },1000)
  10.   }
  11. </script>
  13. ## 解决
  14. # 1.使用bind解决
  15. btn.onclick = function(){
  16.   setTimeout(function(){   
  17.     console.log(this.id);   
  18.   }.bind(btn),1000)
  19. }
  21. /* btn.onclick = function(){
  22.      var self = this
  23.    setTimeout(function(){   
  24.       console.log(this.id);   
  25.    }.bind(self),1000)
  26.   } 
  28.   btn.onclick = function(){
  29.     setTimeout(function(){   
  30.       console.log(this.id);   
  31.     }.bind(this),1000)
  32.   } 
  33. */
  34. # 2.使用箭头函数解决
  35. btn.onclick = function(){
  36.   setTimeout(()=>{
  37.     console.log(this.id);
  38.   },1000)
  39. }

三、call和apply的区别

  • c**all：依次传递**

  • apply：需要传递数组

    1. var name="window"
    2.       var obj={
    3.           name:"xuan"
    4.       }
    5.       function go(a,b){
    6.           console.log(this.name)
    7.           console.log(a+b)
    8.       }
    9.       // go(5,6)
    11.       // 传递多个参数
    12.       // call：依次传递
    13.       // apply：需要传递数组
    14.       go.call(obj,5,6)  // xuan 11
    16.       go.apply(obj,[5,6])