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 相关文章推荐
两种WEB下的模态对话框 (asp.net或js的分别实现)
Dec 02 Javascript
网易JS面试题与Javascript词法作用域说明
Nov 09 Javascript
JQuery入门——用bind方法绑定事件处理函数应用介绍
Feb 05 Javascript
jquery的each方法使用示例分享
Mar 25 Javascript
简介JavaScript中getUTCMonth()方法的使用
Jun 10 Javascript
javascript实现自动输出文本(打字特效)
Aug 27 Javascript
纯JS代码实现一键分享功能
Apr 20 Javascript
jQuery 判断是否包含在数组中Array[]的方法
Aug 03 Javascript
JS批量替换内容中关键词为超链接
Feb 20 Javascript
基于layui数据表格以及传数据的方式
Aug 19 Javascript
jQuery使用ajax传递json对象到服务端及contentType的用法示例
Mar 12 jQuery
es6中new.target的作用和使用场景简单示例分析
Mar 14 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
PHP教程之PHP中shell脚本的使用方法分享
2012/02/23 PHP
解析posix与perl标准的正则表达式区别
2013/06/17 PHP
php微信开发之音乐回复功能
2018/06/14 PHP
thinkphp5 框架结合plupload实现图片批量上传功能示例
2020/04/04 PHP
JS类定义原型方法的两种实现的区别评论很多
2007/09/12 Javascript
验证javascript中Object和Function的关系的三段简单代码
2010/06/27 Javascript
在JavaScript中获取请求的URL参数[正则]
2010/12/25 Javascript
在多个页面使用同一个HTML片段《续》
2011/03/04 Javascript
深入理解JavaScript系列(14) 作用域链介绍(Scope Chain)
2012/04/12 Javascript
Textbox控件注册回车事件及触发按钮提交事件具体实现
2013/03/04 Javascript
AngularJS整合Springmvc、Spring、Mybatis搭建开发环境
2016/02/25 Javascript
jQuery实现表格与ckeckbox的全选与单选功能
2016/11/24 Javascript
jQuery实现字体颜色渐变效果的方法
2017/03/29 jQuery
使用JS编写的随机抽取号码的小程序
2017/08/11 Javascript
详解mpvue scroll-view自动回弹bug解决方案
2018/10/01 Javascript
通过扫小程序码实现网站登陆功能
2019/08/22 Javascript
js实现选项卡效果
2020/03/07 Javascript
[02:31]DOTA2帕克 英雄基础教程
2013/11/26 DOTA
Python ORM框架SQLAlchemy学习笔记之映射类使用实例和Session会话介绍
2014/06/10 Python
python中map、any、all函数用法分析
2015/04/21 Python
Python ValueError: invalid literal for int() with base 10 实用解决方法
2015/06/21 Python
python使用wmi模块获取windows下的系统信息 监控系统
2015/10/27 Python
python实现文本文件合并
2015/12/29 Python
Python调用SQLPlus来操作和解析Oracle数据库的方法
2016/04/09 Python
详解Python多线程Selenium跨浏览器测试
2017/04/01 Python
Python读取和处理文件后缀为.sqlite的数据文件(实例讲解)
2017/06/27 Python
Python标准库之itertools库的使用方法
2017/09/07 Python
python实现黑客字幕雨效果
2018/06/21 Python
Python 利用OpenCV给照片换底色的示例代码
2020/08/03 Python
CSS3实现圆角、阴影、透明效果并兼容各大浏览器
2014/08/08 HTML / CSS
html5视频播放_动力节点Java学院整理
2017/07/13 HTML / CSS
小学生演讲稿
2014/01/12 职场文书
2014年综合治理工作总结
2014/11/20 职场文书
公司业务员管理制度
2015/08/05 职场文书
vue3语法糖内的defineProps及defineEmits
2022/04/14 Vue.js
纯CSS实现一个简单步骤条的示例代码
2022/07/15 HTML / CSS