详解JS中的this、apply、call、bind(经典面试题)

在Javascript中，this、apply、call、bind都是常见的关键字。它们在面试过程中也往往是必问的问题，因为它们对于Javascript的理解非常关键，而且使用得好能够使代码更加简洁高效。本文将会详细讲解它们的含义和用法。

this

this是Javascript中非常重要的一个关键字，它表示函数的当前执行环境。this的指向可能是动态的，取决于函数的运行上下文。具体来说，this指向的是函数调用的主体。在全局作用域中，this指向的是window对象；而在函数内部，this的指向则根据情况而定。在函数中使用this，通常有以下几种情况：

1. 直接调用函数，this指向的是全局对象window。

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

1. 函数作为对象的方法调用，this指向的是调用该函数的对象。

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

1. 使用apply、call、bind等函数调用，this指向传入的第一个参数。

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

apply和call

apply和call都是Javascript中的方法，它们的作用是改变函数中this的指向。两者的区别在于参数传递的方式不同。其中，call的传参方式是单个参数列表，而apply接受一个数组作为参数。

function foo(a, b) {
  console.log(a + b);
  console.log(this);
}

foo.apply(obj, [1, 2]); // 3，obj
foo.call(obj, 1, 2); // 3，obj

bind

bind方法用于永久改变函数的this指向。它会返回一个新的函数，原函数并没有执行。bind也接受参数列表，这些参数将会被绑定在新函数的参数中。

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

var newFunc = foo.bind(obj);
newFunc(); // obj

示例说明

示例一

下面这段代码展示了如何使用bind来永久改变函数的this指向。

var person = {
    name: 'Jack',
    age: 20,
    sayHello: function(){
        console.log('Hello, my name is ' + this.name + ', I am ' + this.age + ' years old.');
    }
};

var person2 = {
    name: 'Tom',
    age: 25
};

var sayHello = person.sayHello.bind(person2);
sayHello(); // Hello, my name is Tom, I am 25 years old.

可以看到，使用bind绑定person2作为sayHello函数的this值，最终执行结果中输出的name和age分别是person2的属性值。

示例二

下面这段代码展示了使用apply和call方法来改变this指向。

function add(a, b) {
    console.log(this.x + a + b);
}

var obj = {x: 5};

add.apply(obj, [3, 4]); // 12
add.call(obj, 3, 4); // 12

通过call和apply方法来调用add函数，可以将obj作为这个函数运行时的this值，从而通过this来访问obj的属性x。最终输出的结果应该是12。

总结：本文详细讲解了Javascript中的this、apply、call、bind这几个常用关键字的含义和用法。this用于表示函数调用的主体，而apply、call、bind用于改变函数中this的指向，并且也可以将一些参数绑定到函数中。在实际开发中，熟练掌握这些技巧可以让我们的代码更加简洁优雅。