javascript中this的理解

1、在函数中执行，分严格模式和非严格模式

非严格模式

非严格模式                                    严格模式
                                             "use strict"
function func(){                             function func(){  
    console.log(this);                            console.log(this);
}                            =====》         }

func()  //this指向window                      func()  //this指向undefined

2、作为对象的方法被调用，

作为对象的方法被调用时：

var obj = {
    name: '小贺',
    sayName: function(){
        console.log(this.name);
    }    
}
obj.sayName(); //会打印出小贺，this指向obj

将对象的方法，赋值给一个变量被调用。

var obj = {
    name: '小贺',
    sayName: function(){
        console.log(this);
    }    
}
var test = obj.sayName; 
test();     //this指向window

3、作为构造函数被调用

在调用一个构造函数的时候加上 new 这个关键字：

function Person (name) {
this.name = name;
    console.log( this );
}
var  p1 = new Person('kk'); //此时，this 指向这个构造函数调用的时候实例化出来的对象。

构造函数其实也是一个函数，若将构造函数当做普通函数来调用，this 指向 Window

function Person (name) {
    
    this.name = name;
    console.log(this);
}
var  p2 = Person('MM');   //当前的this指向window

4、在定时器中调用时，this指向window

setTimeout(function(){
    console.log(this);   //this指向window
},0)

在没有特殊指向时，setTimeout和setInterval的回调函数中的this都是指向window。这是因为JS定时器都是定义在window下的。

5、在箭头函数中的this

1)、箭头函数实在全局的作用域下调用的。this指向window.

var func = () => {
    console.log(this); 
}
func();   //this指向window

2)、箭头函数作为对象的一个函数被调用时，this指向window。

var obj = {
    name: 'koga',
    func : () => {
        console.log(this);
    }
}
obj.func()      //this 指向 window

3)、结合定时器调用时。

var obj = {
    name: 'koga',
    func: function(){
        setTimeout(function(){
            console.log(this); 
        },0)
    }
}
obj.func();  //this指向window 

var obj = {
    name: 'koga',
    func: function(){
        setTimeout(() => {
            console.log(this); 
        },0)
    }
}
obj.func();  //this指向obj

在对象的函数中，普通函数作为定时器的回调方法执行时，this指向window。箭头函数作为定时器的回调方法执行时，this指向定义时所在的对象。

箭头函数中 this 的值取决于该函数外部非箭头函数的 this 的值，且不能通过 call() 、 apply() 和 bind() 方法来改变 this 的值。

6、call、apply、bind

func.call(thisArg,arg1,arg2,arg3); 

这样会立即执行函数func，thisArg是指定执行函数中的this的上下文，后边的都是执行该函数的参数。

func.apply(thisArg,[array])

会立即执行函数func,thisAgr是指定执行函数中的this的上下文。后边是执行该函数的参数，它是一个数组。

func.bind(thisArg,arg1,arg2,arg3,arg4)

它不会立即执行，而是返回一个新函数，这个心函数被指定了this的上下文，后边的是执行该函数时传入的参数。

function Person (name, age) {
   this.name = name;
   this.age = age;
      console.log(this);
}
var obj = {
      name: 'kk' ,
      age:  6
    };
Person.call(obj, 'mm', 10 );
// obj，{name: "mm", age: 10}
Person .apply(obj, ['mm',10]);
// obj，{name: "mm", age: 10}
var p1 =  Person.bind(obj, 'mm', 10)
var p2 = new p1();
// Person {name: "mm", age: 10}

在这个示例中，call、apply 和 bind 的 this 都指向了 obj，都能正常运行；call、apply 会立即执行函数，call 和 apply 的区别就在于传递的参数，call 接收多个参数列表，apply 接收一个包含多个参数的数组；bind 不是立即执行函数，它返回一个函数，需要执行 p2 才能返回结果，bind 接收多个参数列表。

7、如何修改this的指向。

1)、使用箭头函数修改this的指向。

var obj = {
    name:'koga',
    func1: function(){
        console.log(this.name);
    },
    func2: function(){
        setTimeout(function(){
            this.func1();
        })
    }
}

这时会报错，因为这是setTimeout中的this指向的是window,而在window上并未定义func1方法。

var obj = {
    name:'koga',
    func1: function(){
        console.log(this.name);
    },
    func2: function(){
        setTimeout(() => {
            this.func1();
        })
    }
}

这时不会报错，箭头函数的this取决于该函数外边的非箭头函数的this的指向。也即是func2中的this的指向，即obj。

2）在函数中使用_this = this

var obj = {
    name:'koga',
    func1: function(){
        console.log(this.name);
    },
    func2: function(){
        var _this = this;
        setTimeout(function(){
            _this.func1();
        })
    }
}

此时，func2 也能正常运行。在 func2 中，首先设置 var _this = this，这里的 this 是指向 func2 的对象 obj，为了防止在 func2 中的 setTimeout 被 window 调用而导致的在 setTimeout 中的 this 为 window。我们将 this (指向变量 obj) 赋值给一个变量 _this，这样，在 func2 中我们使用 _this 就是指向对象 obj 了。

3)、使用call 、apply、bind等方法改变this的指向。