JS中this的指向问题

js中this的指向是个很有趣的问题，特别是在一些特定的场景，你可能想象不到它会指向到哪里。

今天我们讲讲常见的几种this的指向以及如何改变this的指向。

行内绑定事件中的this指向

<p onclick = 'fn()' ></p>


function fn() {
    console.log(this)
}

此时 this指向的是window

js动态绑定事件中的this指向

<p id = 'app'> </p>


app.onclick = function() {
    console.log(this);
}

此时this指向的是 当前节点对象 p

普通函数中的this指向

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

fn();

此时 this指向的是window

对象中this的指向

var obj = {
    name = 'zs',
    say(){
    console.log(this);
  }    
}

obj.say();

此时this指向的是当前对象

定时器中的this指向

    let times = setInterval(function() {
            console.log(this)
        }, 1000);

此时this指向的是window

箭头函数中的this指向

     var obj = {
            name: 'zs',
            say: function() {
                setTimeout(() => {
                    console.log(this.name);
                }, 20)
            }
        }
        obj.say();

此时this指向的是obj这个对象  因为箭头函数没有自己的this 它的this是当前宿主的this

普通的this指向差不多就是这些了，剩下的就是构造函数构造方法里面等一些其它比较复杂一点的场景中的this指向问题

感兴趣的可以自己去了解 再给大家讲一下关于改变this指向的三种方法

1 bing()

var obj2 = { name: "ls" };
 var obj = {
     name: 'zs',
     say: function() {
          setTimeout(() => {
               console.log(this);
             }, 20)
          }
    }
var fn = obj.say.bind(obj2);
fn();  // {name: "ls"}

// bind()方法 第一个参数是this的新指向,有参数的话就写在后面  不会立即调用 需要手动调用
// 它会返回一个函数 也就是 原函数的克隆体 
// 所以bind方法的本质是 克隆一份原函数 然后返回新函数并修改新函数中的this指向

特别需要注意的地方是 bing()方法不会立即调用 而且它的本质是克隆原函数 并返回新函数 再修改新函数中的this指向

2 call() 和 apply()

function fn1(x, y) {
   console.log(this)
   console.log(x + y);
}

function fn2(x, y) {
   console.log(this);
   console.log(x * y);
}

//fn1(4, 5); // window 9  
fn1.call(fn2, 4, 5); // fn2 9

/*

    我们调用 fn1 不修改它的指向 指向的是 window 并且输出 结果是9
    接着我们再调用 fn1 但是 使用call()方法将它的指向修改为 fn2 所以此时它输出的结果是 fn2 9

*/

注意看call()括号里的参数 其中 第一个参数表示fn1将要指向谁 后续参数则为原函数需要的参数 是以参数列表的形式传递

 function fn1(x, y) {
   console.log(this)
   console.log(x + y);    
}

function fn2(x, y) {
   console.log(this);
   console.log(x * y);
}

//fn1(4, 5); // window 9  
//fn1.apply(fn2, 7, 6); // Uncaught TypeError: CreateListFromArrayLike called on non-object
//fn1.apply(fn2,[7,6]; // fn2  13

注意看apply()括号里的参数 第一个是新的this指向没什么问题 但是后续的参数可以看到使用参数列表形式传递会报错 因为apply的参数传递形式必须是数组形式的