解读JavaScript之this

最新推荐文章于 2025-12-15 15:15:21 发布

原创最新推荐文章于 2025-12-15 15:15:21 发布 · 266 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #this

hack-js 专栏收录该内容

4 篇文章

订阅专栏

本文深入探讨JavaScript中this对象的绑定规则，包括默认绑定、隐式绑定、显式绑定及new绑定，并通过具体示例说明不同情况下的行为差异。

　在《JavaScript高级程序设计》中提到，“this对象是在运行时基于函数的执行环境绑定的。” ，首先我们需要明白执行环境这个概念，在《你不知道的JavaScript》中指出：“call-site:the location in code where a function is called(not where it’s declared).” ，也就是说执行环境是函数被调用时的位置。
　按照我的理解，当函数被调用时，js引擎需要知道这个函数是在哪里被调用的，这时候函数如果声明在某个对象里，js引擎就只需要监听这个对象就可以了。如果不在某个对象里，则关联到全局对象上。所以函数执行环境就是函数所处的对象。
　解决完call-site，还有this binding 。这给我感觉就有点像OS的PCB（进程控制块），this就像这个控制块里面的信息，记录了函数的执行环境地址。每个函数在被调用的时候会有一个this指针，指向执行环境。
理论知识差不多，是时候来点实践。

例子1
function foo( ){
//”use strict”
console.log( this.a );
}
var a = 2;
foo( ) ; //2
foo函数的执行环境是全局对象。
不过这在严格模式下会报错，因为在严格模式下禁止this指向全局对象。
——————————————————————-
例子2
function foo( ){
console.log( this.a);
}
var obj2 = {
a : 42,
foo : foo
}
var obj1 = {
a : 2 ,
obj2 : obj2
};
obj1.obj2.foo( ) ; // 42
这个例子被调用的foo的执行环境是obj2对象
—————————————————————
例子3
function foo ( ){
console.log( this.a );
}
var obj = {
a : 2
};
foo.call( obj ); //2
call , apply和bind函数都可以硬性改变this的指向，而且对改变之后的this指针再次绑定另一个执行环境是没效果的（称之为hard binding）
—————————————————————–
例子4
function foo( a ){
this.a = a ;
}
var bar = new foo( 2 );
console.log( bar.a ); //2
这个例子是通过new关键字来生成一个对象，而且这种也类似上面的硬性绑定。
这3个例子取自《你不知道的JavaScript》，例1被作者称为Default Binding , 例2 被称为 Implict Binding , 例3 被称为Explicit Binding , 例4 被称为 new Binding。

这里还有两个要注意的点

js里调用事件回调函数中this的上下文是全局的，所以通常我们都会

self = this
btn.addEventListener ( ‘click’ ,function (e) {
alert( self.Name)
})

在ES6中，箭头函数的this是绑定在函数声明的时候而非调用的时候。

 第一次写博文，排版和组织词汇难免有些不足，这博文主要是我自己的平时学习的总结，如有错误望留言指正，觉得写得还可以的，请读者多多留言，一起交流学习。