理解JavaScript中的this、apply、call与bind

"这篇文章主要讲解JavaScript中的this关键字以及与之相关的apply、call和bind方法，这些都是JavaScript编程中常见的面试题目。在ES5中，this的指向原则是它总是指向最后调用它的对象，理解这一原则至关重要。通过示例，文章解释了在不同上下文中this的指向，包括全局环境和对象内部的函数调用。同时，文章还探讨了如何使用apply、call和bind来改变函数执行时的this上下文，这对于理解和控制函数的行为至关重要。" 在JavaScript中，`this`关键字是一个关键的概念，它在不同情况下有不同的指向。在ES5中，`this`的指向遵循一条基本原则：它总是指向最后调用它的那个对象。例如，如果一个函数在全局环境下被调用，`this`将指向全局对象（在浏览器中通常是`window`）。在严格模式下，全局环境中的`this`则会是`undefined`。 来看一个例子： ```javascript var name = "windowsName"; function a() { var name = "Cherry"; console.log(this.name); // "windowsName" console.log("inner:" + this); // "inner: Window" } a(); console.log("outer:" + this); // "outer: Window" ``` 在这个例子中，`this`在函数`a`内部指向全局对象`window`，因为它是全局调用的。当在严格模式下运行，全局对象不是`window`而是`undefined`，所以尝试访问`this.name`会抛出错误。 如果函数是在一个对象的属性上调用，`this`将指向该对象： ```javascript var name = "windowsName"; var a = { name: "Cherry", fn: function() { console.log(this.name); // "Cherry" } }; a.fn(); ``` 在这个例子中，`fn`作为`a`的一个方法被调用，因此`this`在`fn`内部指向`a`对象，打印出`"Cherry"`。 然而，我们可以通过`apply`、`call`和`bind`这三个函数来改变`this`的指向。`apply`和`call`允许我们在调用函数时立即指定`this`的值，它们的区别在于传递参数的方式：`apply`接受一个数组或类数组对象作为参数，而`call`接受单独的参数。例如： ```javascript var b = {name: "Bob"}; a.fn.apply(b); // "Cherry" (this未改变，因为对象a的属性不会被改变) a.fn.call(b); // "Cherry" (同上) ``` `bind`方法则创建一个新的函数，新函数的`this`值被绑定到指定的对象，即使在后续的调用中也不会改变： ```javascript var boundFn = a.fn.bind(b); boundFn(); // "Bob" (this现在指向b) ``` 掌握`this`的指向规则以及如何使用`apply`、`call`和`bind`是JavaScript开发中的基本技能，尤其对于处理回调函数、事件处理和面向对象编程时尤为重要。理解这些概念将有助于避免常见的陷阱，并提高代码的可读性和可维护性。