JavaScript 作用域实例分析


Posted in Javascript onOctober 02, 2019

本文实例讲述了JavaScript 作用域。分享给大家供大家参考,具体如下:

JavaScript  作用域

1. JavaScript 以函数作为作用域

JavaScript: 以函数做为作用域

function func(){
  if(1==1){
    var name = 'xsk'
  }
  console.log(name);
}
func()

2. 函数作用域在函数未被调用之前,已经创建

JavaScript:函数作用域提前创建

function func(){
  if(1==1){
    var name = 'xsk'
  }
  console.log(name);
}

3. 函数的作用域在作用域链,并且也是在被调用之前创建

JavaScript:作用域链提前创建

示例一:

xo = "xsk";
function func(){
  var xo = "miy"
  function inner(){
    var xo = "nn"
    console.log(xo)
  }
  inner()
}
func()
// 输出 nn

示例二:

xo = "xsk";
function func(){
  var xo = "miy"
  function inner(){
    console.log(xo)
  }
  return inner;
}
var ret = func()
// 输出miy
// ret 相当于 inner()函数

示例三:

xo = "xsk";
function func(){
  var xo = "miy"
  function inner(){
    console.log(xo)
  }
  var xo = "tony"
  return inner;
}
var ret = func()
ret()
// 输出tony

:作用域嵌套作用域被称为作用域链。

:查找变量会优先在本地作用域找,没有在跳到下一级。

4. 函数内局部变量提前声明

JavaScript:函数局部变量提前声明

示例一:

function func(){
  console.log(xxoo);
}
func();
// 报错

示例二:

function func(){
  console.log(xxoo);
  var xxoo = 'xsk'
}
func();
// 输出 undefined
// 函数执行顺序,谁在前面谁执行

(1)、JavaScript 当创建一个函数时,会自动生动生成作用域链。

(2)、生成作用域的同时会找到所有的局部变量提前声明。(var 变量名)

(3)、为赋值的局部变量默认为undefined。

更多关于JavaScript相关内容可查看本站专题:《JavaScript常用函数技巧汇总》、《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
javascript中RegExp保留小数点后几位数的方法分享
Aug 13 Javascript
Javascript玩转继承(二)
May 08 Javascript
Javascript中的作用域和上下文深入理解
Jul 03 Javascript
jQuery+html5+css3实现圆角无刷新表单带输入验证功能代码
Aug 21 Javascript
基于JS实现导航条之调用网页助手小精灵的方法
Jun 17 Javascript
微信小程序实现缓存根据不同的id来进行设置和读取缓存
Jun 12 Javascript
利用纯js + transition动画实现移动端web轮播图详解
Sep 10 Javascript
Vue EventBus自定义组件事件传递
Jun 25 Javascript
利用原生JS实现data方法示例代码
May 28 Javascript
使用JS location实现搜索框历史记录功能
Dec 23 Javascript
echarts实现晶体球面投影的实例教程
Oct 10 Javascript
javascript全局自定义鼠标右键菜单
Dec 08 Javascript
JavaScript Dom 绑定事件操作实例详解
Oct 02 #Javascript
JavaScript 面向对象基础简单示例
Oct 02 #Javascript
Nautil 中使用双向数据绑定的实现
Oct 02 #Javascript
详解element-ui级联菜单(城市三级联动菜单)和回显问题
Oct 02 #Javascript
基于iview-admin实现动态路由的示例代码
Oct 02 #Javascript
你不可不知的Vue.js列表渲染详解
Oct 01 #Javascript
基于VUE的v-charts的曲线显示功能
Oct 01 #Javascript
You might like
博士208HAF收音机实习报告
2021/03/02 无线电
php下Memcached入门实例解析
2015/01/05 PHP
Yii2中cookie用法示例分析
2016/07/18 PHP
JavaScript 函数式编程的原理
2009/10/16 Javascript
Web Inspector:关于在 Sublime Text 中调试Js的介绍
2013/04/18 Javascript
JavaScript 垃圾回收机制分析
2013/10/10 Javascript
js的正则test,match,exec详细解析
2014/01/29 Javascript
文本域中换行符的替换示例
2014/03/04 Javascript
JavaScript函数作用域链分析
2015/02/13 Javascript
javascript实现可全选、反选及删除表格的方法
2015/05/15 Javascript
简述JavaScript中正则表达式的使用方法
2015/06/15 Javascript
jQuery mobile转换url地址及获取url中目录部分的方法
2015/12/04 Javascript
用NODE.JS中的流编写工具是要注意的事项
2016/03/01 Javascript
vue获取当前点击的元素并传值的实例
2018/03/09 Javascript
微信小程序实现天气预报功能
2018/07/18 Javascript
Vue绑定内联样式问题
2018/10/17 Javascript
JQuery Ajax执行跨域请求数据的解决方案
2018/12/10 jQuery
Vue路由之JWT身份认证的实现方法
2019/08/26 Javascript
Element的el-tree控件后台数据结构的生成以及方法的抽取
2020/03/05 Javascript
微信小程序用canvas画图并分享
2020/03/09 Javascript
[00:47]TI7不朽珍藏III——沙王不朽展示
2017/07/15 DOTA
老生常谈Python序列化和反序列化
2017/06/28 Python
Python用61行代码实现图片像素化的示例代码
2018/12/10 Python
Numpy对数组的操作:创建、变形(升降维等)、计算、取值、复制、分割、合并
2019/08/28 Python
pycharm运行程序时看不到任何结果显示的解决
2020/02/21 Python
python使用hdfs3模块对hdfs进行操作详解
2020/06/06 Python
Python中的特殊方法以及应用详解
2020/09/20 Python
Django如何实现防止XSS攻击
2020/10/13 Python
一个非常简单好用的Python图形界面库(PysimpleGUI)
2020/12/28 Python
CSS3图片旋转特效(360/60/-360度)
2013/10/10 HTML / CSS
Melissa香港官网:MDreams
2016/07/01 全球购物
运动员口号
2014/06/09 职场文书
党员干部观看《周恩来四个昼夜》思想汇报
2014/09/10 职场文书
小学五一劳动节活动总结
2015/02/09 职场文书
大学学生会竞选稿
2015/11/19 职场文书
初一语文教学反思
2016/03/03 职场文书