跳到主要内容

js context 上下文

管

管理员

https://segmentfault.com/q/1010000003815144

2019年07月21日 3,002 次阅读
本页目录

有时候是这样的,译者在翻译书的的时候不知道拿什么来对应相应的英文,就根据自己的感觉,好像大概是这个意思来强加给广大读者,让很多人不知所以然。

@原磨豆浆 的大意是对的,上下文的原意是 context, 作用域的原意是scope, 这两个不是一个东西。

每一个函数的调用(function invocation) 都有对应的scope 和context.

scope 指的是 函数被调用的时候, 各个变量的作用区域
context 指的是 current scope and its enclosing scope. 就是当前scope 和包裹它外面的scope. 如果一个变量在当前scope没找到,那么它会自底向上继续找enclosing scope 直到找到为止。很像javascript 的prototype那样的找法。经常在javascript中,函数被调用的时候, 查看this 指向哪个object, 那么那个object 就是当前的 "上下文"。
图片描述
还有就是要知道JavaScript中 函数被调用有四种方式:

  • The Method Invocation Pattern
  • The Function Invocation Pattern
  • The Constructor Invocation Pattern
  • The Apply Invocation Pattern

为什么要区分这些,因为每一种中的this指向的对象是不同的。

以最后一个为例解释一下context

// 一个函数, 自己执行的时候没意义,因为它不知道 this 是谁
function foo() { this.saySomething('good') };

obj1 = { saySomething: function(x) { console.log('im from obj1' + x); } }

obj2 = { saySomething: function(x) { console.log('im from obj2' + x); } }

foo.call(obj1); // 把this 绑定给 obj1, context 就是 obj1
foo.call(obj2);// 把this 绑定给 obj2, context 就是  obj2

后面还有一些语言上的小坑比如 函数里面的函数(closure) 里 默认的 this指向的是global, 而不是当前的object。 所以你经常会看到 var that = this 或者 var self = this的 小技巧 这就是保存context, 以便后面可以引用。

Related

相关文章

同分类文章 →
2025年06月10日 前端

gemini-2.5-pro-0605 按图生成html效果测试

Gemini 最新推出的 2.5 版本真的有点东西。之前用过不少 AI 辅助写代码的工具,但这次它的“图生 HTML”功能确实让我眼前一亮——上传一张设计图,它不仅能快速识别布局和元素,还能生成结构清晰、样

2025年03月14日 前端

css flex-1和overflow-hidden结合使用详解:弹性布局与内容溢出控制

在 Flexbox 布局中,flex: 1 和 overflow: hidden 是两个常用的属性,它们组合使用可以有效地控制子元素的尺寸和内容显示。flex: 1 的作用:当子元素设置 flex: 1 时,它会根据 Flex 容器的主轴方向,自动伸缩以填充剩余的可用

2025年03月13日 前端

Vue 3中实现处理后的v-model双向绑定

在Vue 3中,当你需要对v-model传入的值进行处理后再展示或使用时,可以使用计算属性的getter和setter来实现这种处理过程的双向绑定。 实现步骤 接收父组件传递的v-model值 创建计算属性,在getter中处理展示值,在setter中处

WeChat

扫码加我微信

微信二维码