一文拆解JavaScript中this的五种绑定规则

摘要：this 是 JavaScript 最让人头疼的概念。本文从一段 setTimeout 的“惊喜”代码入手，拆解 this 的五种绑定规则——普通函数、对象方法、事件处理、call/apply/bind 手动绑定、箭头函数——帮你彻底告别 this 困惑。

一段让你怀疑人生的this代码

先来看这段代码：

var name = '梅西';
let obj = {
    name: '姆巴佩',
    say: function(){
        setTimeout(function() {
            console.log(this.name);
        }, 1000);
    }
}
obj.say(); // 输出：梅西

你本期待看到“姆巴佩”，结果却是“梅西”。

setTimeout 里的函数明明是写在 obj 里面的，为什么 this 指向了外面的 梅西？

这段代码覆盖了 this 的多个关键规则：普通函数、对象方法、setTimeout 异步执行、全局变量污染。理解了它，就理解了一大半的 this 规则。

我们从最基础的规则开始拆解。

规则一：默认绑定——普通函数调用

当一个函数作为普通函数（不是对象方法、不是构造函数、不是事件处理函数）被调用时，this 指向全局对象（浏览器中是 window，Node.js 中是 global）。

var name = '小许';
function say() {
    console.log(this.name);
}
const fn = obj.say;
fn(); // 输出：小许（this 指向 window）

这里有一个完整的示例：

let obj = {
    name: "大许",
    say: function() {
        console.log(this);
        console.log(`${this.name}`);
    }
}
const fn = obj.say; // 引用式赋值
fn(); // 这里函数是作为普通函数被调用，this 指向全局 window

obj.say 本来是对象的方法，但通过引用赋值给 fn 后，调用方式变成了“普通函数调用”，this 丢失了原来的指向，回到了默认绑定。

如何在 window 上找到 name？

var name = '梅西'; // var 会挂载到 window
// 或
window.name = '梅西';

let 和 const 声明的变量不会挂载到 window，即使是在全局作用域。common.js 的注释明确说明了这一点：

var 声明会在变量环境中，会直接作为全局对象 window 的属性。let 声明会在词法环境中，即使是全局变量也是与 window 对象隔离开的。

严格模式下的区别

可以在js文件第一行加上一句："use strict"; 来强制切换为严格模式

严格模式下，普通函数调用时，this 无法通过默认绑定绑到外层作用域的全局对象上，这时 this 的值会变成 undefined。

"use strict";
function say() {
    console.log(this); // undefined
}
say();

这其实是一种“纠错”设计——避免你在普通函数中误用全局对象。

规则二：隐式绑定——作为对象方法调用

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

let obj = {
    name: "姆巴佩",
    say: function() {
        console.log(this.name);
    }
}
obj.say(); // "姆巴佩"

这是最直观的场景：谁调用了函数，this 就指向谁。

高度总结：

this 是一个指针，指向函数的调用者。函数运行时指定（不是声明的时候），不是像变量那样在编译阶段指定。

规则三：事件处理函数绑定——this 指向触发元素

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

document.querySelector('.lnk').addEventListener('click', goBaidu);

function goBaidu(e) {
    console.log(this); // 指向 <a href="..." rel="external nofollow" > 元素
    e.preventDefault(); // 阻止跳转
}

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

关键点：

• 事件处理函数的 this 不是 window，也不是定义函数的对象——而是触发事件的 DOM 元素。
• 这就是为什么 addEventListener 里的回调函数不能用箭头函数，因为它会丢失 this（后面会讲）。

为什么e.preventDefault()很重要？

背景说明：

form 表单提交会默认提交，即使没有指定 action，也会在本页面提交，导致刷新页面。e.preventDefault() 阻止默认行为，页面不会刷新，可以后续在 JS 中处理数据提交，实现动态页面。

同样，<a href=""> 链接也会默认跳转，用 e.preventDefault() 阻止。

规则四：手动绑定——call、apply、bind

call、apply、bind 可以手动指定函数执行时的 this 指向。

let obj = { name: "大许" };
let obj2 = { name: "大祥" };

obj.say.call(obj2);   // this → obj2，立即执行
obj.say.apply(obj2);  // 同上，传参用数组
const newSay = obj.say.bind(obj2); // 返回新函数，不立即执行
newSay();             // 执行新函数，this → obj2

// 有参数的情况
obj.speak.call(obj2, 1, 2);      // 逐个传
obj.speak.apply(obj2, [1, 2]);   // 数组传
const fn2 = obj.speak.bind(obj2);
fn2(1, 2);

bind的典型场景：异步回调

关键场景：

bind 手动指定 this，返回一个全新的函数（不是立即执行的），使用场景是异步时的手动修改 this 指向。

回到开头的 setTimeout 问题，bind 可以解决：

setTimeout((function() {
    console.log(this.name); // this 被绑定到 obj
}).bind(obj), 1000);

因为 bind 返回新函数且不立即执行，正好满足 setTimeout 延迟执行的场景。

规则五：箭头函数——没有 this 的 this

箭头函数不创建自己的 this，它会从外层作用域中“继承” this。

let obj3 = {
    name: '姆巴佩',
    say: function(){
        setTimeout(() => {
            console.log(this.name); // "姆巴佩"
        }, 1000);
    }
}
obj3.say();

箭头函数里没有 this，所以它不会“丢失” this——它直接使用了外层 say 函数的 this（指向 obj3）。

箭头函数是简化函数，它根本不考虑 this，所以写在箭头函数中的 this 和写在箭头函数外的 this 是一样的。

这就是为什么 setTimeout 中用箭头函数能拿到正确的 this——它根本不创建自己的 this，直接从外层取。

一点总结

一句话心法：this 不是你在哪里写的，而是你在哪里怎么调用的。箭头函数是唯一的例外——它根本没有 this。

互动讨论

1. setTimeout 的第一个例子中，为什么 var name = '梅西' 能影响输出，而用 let name = '梅西' 就不行？
2. 事件处理函数中，为什么不能用箭头函数替代普通函数？  试想如果 addEventListener('click', () => {})，this 会指向什么？
3. call 和 apply 有什么区别？  什么场景下用 apply 更合适？
4. bind 和 call 最大的区别是什么？  为什么异步场景需要 bind？
5. 为什么 JavaScript 要设计 this 这个机制？  如果完全没有 this，代码会变成什么样？

一点心得：this 不是 bug，它是一种设计选择——让函数在不同的调用上下文中复用。理解了“谁调用，指向谁”这条铁律，再加上箭头函数这个例外，你就掌握了 this 的核心。

到此这篇关于一文拆解JavaScript中this的五种绑定规则的文章就介绍到这了,更多相关JavaScript this绑定规则内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

最新评论