JavaScript中this详解

介绍

this是JavaScript语言中的一个关键字，表示函数在调用时所在的对象。this的指向是在函数被调用时确定的，而不是在函数被创建时确定的。由于JavaScript中的函数可以在不同的对象上下文中被调用，因此this的指向具有动态性。

this的四种调用方式

1. 作为函数调用

当函数不作为对象的属性，或使用call、apply方法调用时，this指向全局对象window。

function foo(){
    console.log(this);
}
foo();  // window

2. 作为对象的方法调用

当函数作为对象的属性被调用时，this指向该对象。

var obj = {
    name: 'Jack',
    sayName: function(){
        console.log(this.name);
    }
}
obj.sayName();  // Jack

3. 作为构造函数调用

当函数用new关键字调用时，this指向新创建的对象。

function Person(name){
    this.name = name;
}
var p = new Person('Tom');
console.log(p.name);  // Tom

4. 作为事件处理函数调用

当函数作为事件处理函数被调用时，this指向触发该事件的元素。

var btn = document.getElementById('btn');
btn.onclick = function(){
    console.log(this.id);
}

改变this指向的方法

1. 使用call和apply方法

两者作用相同，区别在于传入参数的方式不同，call方法是一一列举参数，apply方法是将参数作为数组传入。

function fn(){
    console.log(this);
}
var obj = {name:'Jack'};
fn.call(obj);  // obj

2. 使用bind方法

bind方法返回一个新函数，将原函数中的this绑定到指定的对象上，并返回这个新函数。

function fn(){
    console.log(this);
}
var obj = {name:'Jack'};
var newFn = fn.bind(obj);
newFn();  // obj

总结

this的指向具有动态性，需要根据具体调用方式来确定其指向。在需要改变this指向时，可以使用call、apply、bind方法。