09｜面向对象：通过词法作用域和调用点理解this绑定

石川

你好，我是石川。
今天，我们来讲讲 JavaScript 中的 this。其实讲 this 的资料有很多，其中不少已经把这个概念讲的很清楚了。但是为了课程的系统性，我今天也从这个单元咱们讲到的对象和面向对象的角度来说一说。
因为现在正好赶上国庆假期，咱们这节课的内容不是很长，所以你学起来也不会很辛苦。但是字少事大，this 的概念还是很重要的。所以如果你之前没有具体了解过，还是希望这节课能帮助你更好地理解 this。
从直观的印象来看，你可能觉得 this 指的是函数本身或它所在的范围，其实这样的理解都是不对。在 JavaScript 中，this 是在运行时而不是编写时绑定的。所以要正确地使用它，需要考虑到函数调用时的执行上下文。
默认绑定我们来看一个简单的例子，在下面的例子中，a 是在全局定义的，aLogger 的函数是在全局被调用的，所以返回的 this 就是全局上下文，所以 a 的值自然就是 2。
function aLogger() {
    console.log( this.a );
}
var a = 2;
aLogger(); // 2
这种默认的绑定只在非 strict mode 的情况下是可以的。所以如果在 strict mode 下，这种默认的的绑定是不可以的，则会返回 TypeError: this is undefined。

公开

同步至部落

取消

完成

0/2000

荧光笔

直线

曲线

笔记

复制

AI

深入了解
翻译
英语
中文简体
中文繁体
法语
德语
日语
韩语
俄语
西班牙语
阿拉伯语
解释
总结

本文介绍了JavaScript中this的绑定机制，通过词法作用域和调用点来理解this的绑定。作者从默认绑定、隐式绑定、显式绑定、硬性绑定和new绑定等方面详细讲解了this的使用方式和注意事项。此外，还介绍了箭头函数对this的绑定特点。文章通过具体的代码示例和比较分析，帮助读者更好地理解和掌握this的绑定规则。文章还提出了思考题，引发读者对于call和apply在处理绑定时的差异性进行思考。整体而言，本文深入浅出地解释了JavaScript中this的绑定机制，适合有一定JavaScript基础的读者阅读学习。

仅可试看部分内容，如需阅读全部内容，请付费购买文章所属专栏
《JavaScript 进阶实战课》，新⼈⾸单¥59

立即购买

登录后留言

全部留言(4)

最新
精选

缄默
关于“new 是强于 hard binding 的”结论这一块的例子，bind方法本身就是返回一个新函数，对logger这个函数并无影响。而new出来的obj2的this肯定只与new传参时的值相关。所以这个例子并不能推论出这一结论
作者回复: 虽然下面是bind的polyfill，但是我们可以看到new是优先于bind的 this instanceof fNOP && oThis ? this : oThis // ... and: fNOP.prototype = this.prototype; fBound.prototype = new fNOP(); 我理解这样的优先级是为了让new可以忽略this的 hard binding，同时预置一些或全部的参数。
2022-12-02归属地：海南
3
4
WGH丶
其他语言中也有this，python也有类似的self。JS的特殊之处在于支持多种编程范式，比如面向对象和函数式编程。本来this是在面向对象中使用就好，但是JS中没有类，有时候要靠函数创建对象，自然地，this从面向对象中被“移植”到了函数式编程中。像new，bind，apply，箭头函数这些，都像是一些补丁，以便更好地同时支持两种编程方式。正是这种适配，导致了JSer理解上的困惑。 java没有这个问题，其函数不能独立于对象使用。python虽然支持函数独立于对象使用，但是在对象外的函数，不再支持self，因此也没有这个困惑。
作者回复: 很好的对比
2022-12-24归属地：海南

2
拉莱耶的猫
隐式绑定那一节, aLogger跟代码里不一致
作者回复: 谢谢指出，这里做些修改，之后也会更新到文稿里。 function aLogger() { console.log( this.a ); } var obj = { a: 3, logger: aLogger }; var a = 2; obj.logger(); // 3
2022-10-09归属地：北京

1
神佑小鹿
简答总结下，js 确实麻烦，作为一个 Android 工程师，我觉得还是 java 和 kotlin 好～～～～ 1、全局作用域下，this 始终指向全局对象 window，无论是否是严格模式！ 2、普通函数内的 this 分为两种情况，严格模式下和非严格模式下。严格模式下：直接调用函数，this 指向 undefined，window.test() 调用函数 this 指向 window 非严格模式下：直接调用函数和 window.test() 调用函数对象，this 都指向 window。 3、对象内部方法的 this 指向调用这些方法的对象，也就是谁调用就指向谁。多层嵌套的对象，内部方法的 this 指向离被调用函数最近的对象。 4、箭头函数：this 指向于函数作用域所用的对象。箭头函数的重要特征：箭头函数中没有 this 和 arguments，都是从外层继承的；箭头函数会捕获自己定义所处的外层执行环境，并且继承这个 this 值，指向当前定义时所在的对象。箭头函数的 this 指向在被定义的时候就确定了，之后永远都不会改变。即使使用 call()、apply()、bind() 等方法改变 this 指向也不可以。 5、构造函数中的 this 是指向构造函数创建的实例。 6、原型链中的 this：在一个继承机制中，仍然是指向它原本属于的对象，而不是从原型链上找到它时，它所属于的对象。
2023-03-14归属地：广东



收起评论