Javascript 作用域(入门篇)
作用域是什么?
几乎编程语言都需要实现的功能是“变量存储数据”,不然这门编程语言在当今就真的没多大优势了。
变量存储数据的正常流程是:先创建一个变量,然后把值存入该变量中。
但这些变量存活在哪里?
怎么读取这些变量的值?
如何修改变量的值?
在哪可以读取,哪里又不能读取?
每门编程语言都有一套这样的规则,而这个规则就是“作用域”。
需要一套设计良好的规则来存储变量,并且之后可以方便地找到这些变量。这套规则被称为作用域。
js 的作用域规则并不像其他语言(比如 c、java 等)那么严谨,甚至很多时候还会让新手一头雾水。
本文要讲作用域有以下几个:
- 全局作用域(window / global)
- 函数作用域(function)
- 块状作用域({})
- 动态作用域(this 粗略讲解)
本文主要探讨日常工作中需要了解的几个点,所以并不会深入讲解 词法作用域 之类比较深的内容。
变量与常量
在了解作用域之前,需要先了解 js 的变量和常量是如何声明和使用。
js 的变量声明有 2 种:var 和 let。
使用 var 或者 let 声明变量的语法都是一样的,只是这两个关键字不同而已。
var a = 123
let b = 456
var 声明的变量,变量名可以相同,后面的声明会覆盖前面的声明。点击查看 var 用法
let 用法会更严谨,是 es6 提出来的。使用 let 声明的变量,不能重复声明。点击查看 let 用法
js 的常量声明暂时只有 1 种:const
。
const pi = 3.14
使用 const
声明常量,一经定义就不能再改,这里的“改”是指不能改变内存地址。
所以如果声明一个对象常量,对象内的属性是可以改的,因为这样不属于修改内存地址。 点击查看 const 用法
全局作用域
在 window 下声明的变量属于全局作用域。
比如
var a = 123
与之相对的是 局部作用域
,比如 函数作用域
、块状作用域
等,下面会讲到。
注意
需要注意一点,在 js
中,如果不使用 var
和 let
声明的,严格来说不能叫变量。只能叫 window / global
下的一个属性。
a = 123
上面这种写法,和 var a = 123
的效果看上去差不多,但不使用 var 或 let 声明的变量实际上是挂载在 window / global 上的一个属性,而属性是可以用 delete 删除的,而变量(使用 var 和 let 声明)是不能用 delete 删除。
函数作用域
在函数内部声明的变量,属于函数作用域。在函数外是无法访问的。
function test() {
var a = 123
b = 456
console.log(a)
console.log(b)
}
test() // 输出 123,然后输出456
console.log(b) // 输出 456
console.log(a) // 报红 a is not defined
上面的例子中,虽然 b
是在 test
这个函数里面首次出现,但由于 b
没使用 var / let / const
这些关键字定义,所以 b
其实是挂载到 window / global
上的。
所以在函数外能访问 b
,却不能访问 a
。
块状作用域
在 {}
使用 let
定义的变量 和 const
定义的常量,属于块级作用域。
if (true) {
var a = 123
let b = 456
const c = 789
}
console.log(a) // 输出 123
console.log(b) // 报红 b is not defined
console.log(c) // 报红 c is not defined
使用 var
在这种情况定义的变量是属于全局作用域的。
使用 let
和 const
。
动态作用域
动态作用域主要是指 this
。
动态作用域不关心函数和作用域是如何声明以及在何处声明的,它只关心从何处调用(箭头函数除外)。
window.a = 3
function test () {
console.log(this.a)
}
test.bind({ a: 2 })() // 2
test() // 3
function foo() {
console.log(a) // 3(不是2!)
}
function bar(){
var a = 3
foo()
}
var a = 2
bar()
因为当 foo()
无法找到 a
的变量引用时,会顺着调用栈在调用 foo()
的地方查找 a
,而不是在嵌套的此法作用域链上查找。
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanfbcii
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
怎样阻止微信小程序自动打开
PHP中文网 06-13 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01