JavaScript中this关键字的指向规则与实战解析

核心原则：运行时绑定

this的指向并非在编写代码时确定，而是在函数执行时动态决定的。要判断this指向谁，必须追溯函数调用时所在的上下文环境。

普通函数与对象方法中的this

当函数作为独立全局函数调用时，this通常指向全局对象（浏览器环境中为window）。而当函数作为对象的方法调用时，this则指向该对象。

第1步：验证全局函数中的this指向

目的：确认在全局作用域下，函数内的this指向全局对象。

var name = "全局";
function getName() {
    var name = "局部";
    return this.name; // 这里的this指向window
}

console.log(getName()); // 输出: "全局"

分析：虽然函数内定义了局部变量name，但this.name访问的是全局对象的属性。因为getName()是直接调用，未挂载在任何对象上，所以this默认为window。

第2步：验证对象方法中的this指向

目的：展示当函数作为对象属性调用时，this指向该方法所属的对象。

var name = "全局";
var twobin = {
    name: "局部",
    getName: function() {
        return this.name;
    }
};

console.log(twobin.getName()); // 输出: "局部"

分析：此时函数getName是通过twobin对象调用的（twobin.getName()），因此this指向twobin对象，this.name即twobin.name。

闭包情境下的this陷阱

闭包是指有权访问另一个函数作用域中变量的函数。在JavaScript中，嵌套的匿名函数（回调）往往会丢失外层函数的this指向，重新回到全局对象。

第3步：识别闭包中this的丢失问题

var name = "全局";
var twobin = {
    name: "局部",
    getName: function() {
        return function() {
            return this.name; // 此时的this指向window
        };
    }
};

console.log(twobin.getName()()); // 输出: "全局"

分析：内部匿名函数是被直接调用的（()），而非作为对象方法调用，因此其this指向全局window，导致无法访问twobin的属性。

第4步：使用that变量修复this指向

目的：通过保存外层函数的this引用，在闭包中正确访问目标对象。

var name = "全局";
var twobin = {
    name: "局部",
    getName: function() {
        var that = this; // 保存当前this，即指向twobin
        return function() {
            return that.name; // 使用保存的that访问
        };
    }
};

console.log(twobin.getName()()); // 输出: "局部"

分析：var that = this在执行时捕获了twobin的引用。尽管内部函数有自己的this，但它通过自由变量that成功访问了正确的对象属性。

强制改变this指向：call与apply

call和apply是Function原型提供的方法，用于显式指定函数执行时的this值。

第5步：对比默认调用与call调用

var name = "全局";
var twobin = {
    name: "局部"
};

function getName() {
    console.log(this.name);
}

// 默认调用，this指向window
getName(); // 输出: "全局"

// 使用call，强制this指向twobin
getName.call(twobin); // 输出: "局部"

分析：getName.call(twobin)强行将函数内部的this绑定到twobin对象上，从而改变了执行上下文。

总结

掌握this的关键在于“看谁调用”： 1. 默认规则：函数独立调用时，this指向全局对象；作为对象方法调用时，指向该对象。 2. 箭头函数除外：箭头函数没有自己的this，它继承自定义时所在的作用域（本文未涉及，需注意区分）。 3. 辅助手段：利用var that = this保存上下文，或使用call/apply/bind强制绑定。
以上就是JavaScript中this关键字指向规则的详细内容，更多关于JavaScript基础教程的资料请关注本站其它相关文章！