js的this指向问题

this 是JavaScript语言的一个关键字。它代表函数运行时自动生成的一个内部对象，一般用在函数内部。随着函数使用场合的不同，this的指向会发生变化，但是有一个变化的规律，this指向函数的调用者。接下来，我们就针对每一种情况，详细讨论this的指向。

情况一：在全局作用域的函数中

在全局作用域中定义一个普通函数，这个普通函数就作为全局对象window的属性存在，因此this指向全局对象window。

其实在window中还可以划分出一个global对象，作为window的一部分，但是无法通过代码访问，也可以说this指向global

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

情况二：在字面量创建的对象中

this指向当前的对象

var obj = {
    fname: 'aaa',
    fun: function(){
        console.log(this.fname);  // aaa
        
    }   
}
obj.fun();

情况三：在构造函数中

this指向通过new关键字创建出的新对象

function Person(name){
    this.fname = name;
    this.play = function(){
        console.log(this.fname + 'Play Basketball!');
    }
}
var kb = new Person('kb ');
kb.play();  // kb Play Basketball!

 

如何改变this的指向？

通过三个方法改变this的指向：

• call()
• apply()
• bind()

（1）使用call改变this的指向：调用call()方法时函数也会被执行，第一个参数是要指向的对象名，后面为向函数传递的实参

function fun(a, b){
    console.log(a+b);  // 3
    console.log(this);  // 原来指向window，现在指向obj
    
}
var obj = {
    fname: 'Hello'
}
fun.call(obj, 1, 2);

（2）使用apply改变this的指向：调用apply()方法时函数会被执行，第一个参数是要指向的对象名，向函数传递的实参包含在数组中

function fun(a, b){
    console.log(a+b);  // 3
    console.log(this);  // obj
}
var obj = {
    fname: 'Hello'
}
fun.apply(obj, [1, 2]);

（3）使用bind改变this的指向：调用bind()方法后会返回一个新函数，再调用新函数才会执行函数体，bind()的第一个参数是所要指向的对象，后面是向函数传递的实参（向函数传递的实参也可以在新函数调用时传）

function fun(a, b){
    console.log(a+b);   // 3
    console.log(this);  // obj
}
var obj = {
    fname: 'Hello'
}
// var fun2 = fun.bind(obj, 1, 2);
var fun2 = fun.bind(obj, 1);
fun2(2);