javascript中的this

最新推荐文章于 2025-09-09 16:55:30 发布

转载最新推荐文章于 2025-09-09 16:55:30 发布 · 64 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/Dida-1209/p/10586672.html

文章标签：

#javascript #ViewUI

本文详细解析了JavaScript中this关键字的绑定规则，包括new调用、call/apply/bind调用、上下文对象调用及默认绑定，并介绍了箭头函数的this绑定特性。

this 既不指向函数自身也不指向函数的词法作用域，this 实际上是在函数被调用时发生的绑定，它指向什么完全取决于函数在哪里被调用。

1. 由new 调用？绑定到新创建的对象。
2. 由call 或者apply（或者bind）调用？绑定到指定的对象。
3. 由上下文对象调用？绑定到那个上下文对象。
4. 默认：在严格模式下绑定到undefined，否则绑定到全局对象。

一定要注意，有些调用可能在无意中使用默认绑定规则。如果想“更安全”地忽略this 绑
定，你可以使用一个DMZ 对象，比如$ = Object.create(null)，以保护全局对象。

ES6 中的箭头函数并不会使用四条标准的绑定规则，而是根据外层（函数或者全局）作用域(当前的词法作用域)来决定
this，具体来说，箭头函数会继承外层函数调用的this 绑定（无论this 绑定到什么）。这其实和ES6 之前代码中的self = this 机制一样。

常见的隐式调用丢失this的例子：

function foo() {
console.log( this.a );
}
function doFoo(fn) {
// fn 其实引用的是foo
fn(); // <-- 调用位置！
}
var obj = {
a: 2,
foo: foo
};
var a = "oops, global"; // a 是全局对象的属性
doFoo( obj.foo ); // "oops, global"

参数传递就是一种隐式赋值，因此我们传入函数时也会被隐式赋值。

JavaScript 环境中内置的setTimeout() 函数实现和下面的伪代码类似：
回调函数丢失this 绑定(除非硬绑定了this，否则回调函数丢失this是常见的)

function setTimeout(fn,delay) {
// 等待delay 毫秒
fn(); // <-- 调用位置！
}

function foo() {
console.log( this.a );
}
var a = 2;
var o = { a: 3, foo: foo };
var p = { a: 4 };
o.foo(); // 3
(p.foo = o.foo)();

赋值表达式p.foo = o.foo 的返回值是目标函数的引用，因此调用位置是foo() 而不是

p.foo() 或者o.foo()。根据我们之前说过的，这里会应用默认绑定。

转载于:https://www.cnblogs.com/Dida-1209/p/10586672.html