美文网首页
杂货小铺之作用域 🍟

杂货小铺之作用域 🍟

作者: 羊驼驼驼驼 | 来源:发表于2020-07-02 23:12 被阅读0次
js.jpeg

叮~,今天杂货小铺正式开业🎊,货架会不定期上新(好用的工具、日常小总结等等...)哦~

📌 敲好用的NRM源切换
  • 安装
Windows: npm install -g nrm
Mac: sudo npm install -g nrm 
  • 使用(命令)
  nrm ls (查看当前可用的源-带*的表示当前所用的源)
nrm.png
nrm test <源名称>(测试哪个源的速度比较快)
nrm.png
nrm use <源名称> (切换源)
nrm.png
nrm current (查看当前源)
nrm add <源名称> <源对应的地址> (定制源)
nrm del <源名称> (删除源 )
📌 唠唠作用域

常见的作用域主要分为:
🏖 全局作用域 => global/window
🏖 函数作用域 => function
🏖 块状作用域 => {}
🏖 动态作用域 => this

  • 全局作用域

📖 变量在函数或代码块{}外定义,既为全局作用域。不过,在函数或代码块{}内定义的变量也是拥有全局作用域的(不推荐)。

 var a = 'hello'
 function foo() {
  // 函数内可调用a变量
  console.log(a)
 }
 // 在函数外定义的变量a拥有全局作用域,可以在任意地方被读取或修改
 // 如果变量在函数内没有声明(没有使用var关键字),该变量依然是全局变量
// 此处可调用a变量
console.log('函数外' + a)
function foo() {
  a = 'hello'
  // 此处可调用a变量
  console.log('函数内' + a)
}
// a当前在函数内,但是拥有全局作用域,将作为global/window的属性存在

🔎 \color{Orange}{Warning}:
在函数内部或代码块中没有定义的变量实际是作为global/window的属性存在,而不是全局变量。换句话说没有使用var定义的变量虽然拥有全局作用域,但是它是可以被delete的,而全局变量不可以。

  • 函数作用域

📖 在函数内部定义的变量,就是局部作用域。对外是封闭的,从外层的作用域无法直接访问函数内部的作用域。

function foo() {
  var test = 'inner'
}
console.log(test) // 报错 ReferenceError: test is not defined

如果想要读取函数内的变量,必须借助return或者闭包

// return
function foo(val) {
  var test = 'inner'
  return test + val
}
console.log(foo('fun')) // innerfun

// 闭包
function foo(val) {
  var test = 'inner'
  var res = test + val
  function innser() {
    return res
  }
  return innser()
}
console.log(foo('fun')) // innerfun

// return 是函数对外交流的出口,而return可以返回的是函数
// 根据作用域的规则,函数内部的子函数可以获取函数作用域内的变量的

如果在函数innser再嵌套函数呢?这就会涉及到另一个概念:作用域链

scope.png

🔎 \color{Orange}{Warning}:
综合上图我们可以看到任何一个作用域链都是一个堆栈,首先先把全局作用域压入栈底,在按照函数的嵌套关系一次压入堆栈,在执行的时候按照这个作用域链寻找变量。

  • 块状作用域

📖 在ES6之前没有自己的块状作用域的概念,在ES6中改变了这个现象,块状作用域得到普及。

if(true) {
  let a = 1;
  console.log(a)
}
// 在这个代码中,if后{}就是"块",这个里面的变量就存在于这个块级作用域
// 按照规则,{}之外是无法访问这个变量的
  • 动态作用域

📖 this的指向

window.a = 3;
function test() {
  console.log(this.a)
}
test.bind({
  a: 5
})() // 5
test() // 3
// bind修改作用域的范围指向,而this指向的是当前的作用域对象

那现在来思考一个问题,作用域是在代码编写的时候决定的,还是在代码执行的时候才决定的?看一下🌰

var test = 'hello'
function foo() {
  // 函数内可调用test变量
  console.log(test)
}

🌻小葵花mama课堂开课啦🌻
在上述代码中test是全局作用域,函数内部用var定义的变量就是函数作用域,用专业术语来讲一哈就是:词法作用域。通俗的讲就是变量的作用域是在定义时决定而不是执行时决定,也就是说词法作用域取决于源码,通过静态分析就能确定,因此词法作用域也叫做静态作用域。相反,只能在执行阶段才能决定变量的作用域,就叫做动态作用域

function foo() {
  console.log(a) // 3
}
function bar() {
  var a = 3
  foo()
}
var a = 2
bar()

🎊 叮~
当foo()不能为a解析出一个变量引用时,它不会沿着嵌套的(语法)作用域链向上走一层,而是沿着调用栈向上走,以找到foo()是从何处被调用的。因为foo()是从bar()中调用的,它就会在bar()的作用域中检查变量。

相关文章

  • 杂货小铺之作用域 🍟

    叮~,今天杂货小铺正式开业?,货架会不定期上新(好用的工具、日常小总结等等...)哦~ ? 敲好用的NRM源切换 ...

  • 杂货铺赋

    友之微商小铺,无商贾之俗,却满怀温情,难得难得,以小文记这一朵奇异之花 杂货铺赋 杂货一...

  • 执行上下文、作用域链、this、闭包

    javascript 执行的是词法作用域,即静态作用域。与之相对的是动态作用域。 静态作用域:函数的作用域在函数定...

  • js基础6(作用域、js解析顺序)

    1、作用域 作用域用于就是变量访问性问题 全局作用域在script其实标签到结束标签都是在全局作用域里,在函数体之...

  • JavaScript深入系列的学习(一)

    JavaScript深入之从原型到原型链JavaScript深入之词法作用域和动态作用域JavaScript深入之...

  • js面试题

    1、let、var、const区别 1、作用域不同,var是函数作用域,而let是块作用域2、 let不能在定义之...

  • js作用域

    1 - 作用域 1.1 作用域概述 全局作用域 局部作用域(函数作用域) 1.2 全局作用域 1.3 局部作用域 ...

  • 作用域,作用域链

    1 - 作用域 1.1 作用域概述 全局作用域 局部作用域(函数作用域) 1.2 全局作用域 1.3 局部作用域 ...

  • 变量作用域

    变量作用域:静态作用域、动态作用域JS变量作用域:JS使用静态作用域JS没有块级作用域(全局作用域、函数作用域等)...

  • 一网打尽 JavaScript 的作用域

    JavaScript 的作用域包括:模块作用域,函数作用域,块作用域,词法作用域和全局作用域。 全局作用域 在任何...

网友评论

      本文标题:杂货小铺之作用域 🍟

      本文链接:https://www.haomeiwen.com/subject/rwqqqktx.html