关于this的指向

js函数中this的指向
函数在执行时内部会默认创建一个对象叫this，以不同的方式调用函数，内部的this指向是不一样的，this的指向在函数定义的时候是不能确定的，只有调用执行了函数以后才能确定this到底指向谁。谁直接调用了产生this的函数，this就指向谁。

函数的调用方式大概有6种，所以this的指向也可以大致按照这6种来区分。

1.函数名+小括号直接调用函数，this指向全局对象window。
因为以函数名加小括号的方式调用函数时相当于是window通过.调用了该函数，所以此时this指向window。

function show(){
    console.log(this);//window对象
}
show();

 

2通过对象点来调用对象的某个函数，this指向调用这个函数的对象。
举个例子就是，有一个对象obj，在这个对象内部有一个键值对，这个键值对的值是一个函数，那么通过obj.这个键可以调用这个函数，此时函数内部this指向的就是对象obj。

var user = {
    print:function(){
        console.log(this);//user 普通函数，谁调用这个函数，this指的就是谁
    }
}
user.print();

 

当函数被当做事件处理函数时，this指向触发事件的元素。

var btn = document.querySelector('button');
   btn.addEventListener('click', function() {

console.log(this);// this指向触发事件的元素btn。

alert('点击我'); })

 

IIFE：this指向window。
构造函数中this指向new出来的新对象。
在构造函数中使用new操作符的时候，js会先创建一个新的空对象，然后，执行这个函数，把函数中的执行对象赋给这个新生成的实例，也就是这个函数可以使用this来初始化这个新创建的对象的属性。最后返回这个新生成的对象。所以当使用new操作符之后，函数中的this指向的是新创建的对象。所以构造函数中的this就是指向new出来的那个对象。

.把构造函数当成普通函数调用 this指向和普通函数一样

 function Student(name){
    this.name = name;
    
     console.log(this);// 指向的window
    
}

Student('张三')

-------------------------------
var Stu = function(name){
    this.name = name;
    this.fun =function(){
        console.log(this);// 指向的是构造函数stu的实例对象
    }
}
let s = new Stu("stu1"); // 创建对象 会改变对象构造器内部的上下文环境
s.fun();

--------------------------------
var Stu = function(name){
    this.name = name;
    this.fun = ()=>{
        console.log(this);// 箭头函数在构造函数中，函数中的this指的是构造函数Stu的实例对象
    }
}
let s = new Stu("stu1"); // 创建对象 会改变对象构造器内部的上下文环境
s.fun();

 

定时器的回调函数中this指向window。

定时器 this 在 普通函数中(包括对象中的this) 一定指向 window
以setTimeout为例，setTimeout属于宏任务，它的回调在延时之后才进入到主线程执行，而函数执行的时候才会明确this的指向。执行的时候由于没有设置内部this的指向，相当于是普通函数调用，所以默认指向window。

var name = "我在window里面";
var obj1 = {
    name : "我是obj1里面的",
    fn(){
        console.log(this); // this指向obj1
        var that = this;
        console.log(that);  // that指向obj1
        setTimeout(function(){
            console.log(this.name); //  我是window里面的
            console.log(that.name); //  我是obj1里面的
        },1000)
    }
}
obj1.fn()
------------------------------------------
var name = "我在window里面";
var obj1 = {
name : "我是obj1里面的",
fn(){
console.log(this); // this指向obj1
var that = this;
console.log(that); // that指向obj1
setTimeout(()=>{
console.log(this.name); // 我是obj1里面的
console.log(that.name); // 我是obj1里面的
},1000)
}
}
obj1.fn()

-----------------------------------------

var name = "我在window里面";
var obj1 = {
name : "我是obj1里面的",
fn:()=>{
console.log(this); // this指向window
var that = this;
console.log(that); // that指向window
setTimeout(()=>{
console.log(this.name); // 我是window里面的
console.log(that.name); // 我是window里面的
},1000)
}
}
obj1.fn()

 

总结
谁直接调用产生this的函数，this就指向谁。但是在使用了new操作符以后，构造函数内部的this指向的是新对象，也就是指向new出来的新实例。
改变this指向有3个方法：
call() 调用时，传入的第一个参数用来指定函数内部this指向，后面的所有参数是函数执行时需要的实参（实参必须列举出来）。
apply() 调用时，第一个参数和call一样，用来指定函数内部this的指向，第二个参数是一个数组或伪数组（比如arguments对象），数组元素是函数执行时需要的所有实参。
bind() 只有一个参数，用来指定函数内部this的指向，但是会返回一个新的函数。
call和apply是一次性改变this，bind是永久性改变this