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 相关文章推荐
js判断浏览器的比较全的代码
Feb 13 Javascript
javascript window.opener的用法分析
Apr 07 Javascript
JQuery 自定义CircleAnimation,Animate方法学习笔记
Jul 10 Javascript
基于jquery和svg实现超炫酷的动画特效
Dec 09 Javascript
jQuery中toggleClass()方法用法实例
Jan 05 Javascript
JavaScript通过function定义对象并给对象添加toString()方法实例分析
Mar 23 Javascript
浅谈Javascript中Object与Function对象
Sep 26 Javascript
vue2 router 动态传参,多个参数的实例
Nov 10 Javascript
React之PureComponent的使用作用
Jul 10 Javascript
微信小程序swiper组件实现抖音翻页切换视频功能的实例代码
Jun 24 Javascript
vue 单页应用和多页应用的优劣
Oct 22 Javascript
html5调用摄像头截图功能
Jan 18 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 超链接 抓取实现代码
2009/06/29 PHP
smarty模板引擎使用内建函数foreach循环取出所有数组值的方法
2015/01/22 PHP
php可应用于面包屑导航的递归寻找家谱树实现方法
2015/02/02 PHP
Laravel框架实现利用中间件进行操作日志记录功能
2018/06/06 PHP
解决php写入数据库乱码的问题
2019/09/17 PHP
来自chinaz的ajax获取评论代码
2008/05/03 Javascript
jQuery 使用手册(二)
2009/09/23 Javascript
使用javascript实现雪花飘落的效果
2015/01/13 Javascript
Jquery基础之事件操作详解
2016/06/14 Javascript
js通过指定下标或指定元素进行删除数组的实例
2017/01/12 Javascript
vue的token刷新处理的方法
2018/07/17 Javascript
Vue中mintui的field实现blur和focus事件的方法
2018/08/25 Javascript
ng-zorro-antd 入门初体验
2018/12/03 Javascript
Nodejs中获取当前函数被调用的行数及文件名详解
2018/12/12 NodeJs
Vue路由之JWT身份认证的实现方法
2019/08/26 Javascript
JS实现点餐自动选择框(案例分析)
2019/12/10 Javascript
vue中watch和computed的区别与使用方法
2020/08/23 Javascript
[02:02]DOTA2英雄基础教程 斯拉达
2013/12/11 DOTA
python实现员工管理系统
2018/01/11 Python
python3.6.3+opencv3.3.0实现动态人脸捕获
2018/05/25 Python
解决pytorch报错:AssertionError: Invalid device id的问题
2020/01/10 Python
Python-openpyxl表格读取写入的案例详解
2020/11/02 Python
python模块内置属性概念及实例
2021/02/18 Python
意大利香水和化妆品购物网站:Parfimo.it
2019/10/06 全球购物
什么是抽象
2015/12/13 面试题
自我评价的正确写法
2013/09/19 职场文书
车辆维修工自我评价怎么写
2013/09/20 职场文书
生物制药专业求职信
2014/03/11 职场文书
2014年十一国庆向国旗敬礼寄语
2014/04/11 职场文书
教师考核表个人总结
2015/02/12 职场文书
物业前台接待岗位职责
2015/04/03 职场文书
大学生实习证明
2015/06/16 职场文书
2019最新激励员工口号大全!
2019/06/28 职场文书
如何将JavaScript将数组转为树形结构
2021/06/02 Javascript
Python 如何将integer转化为罗马数(3999以内)
2021/06/05 Python
python中opencv实现图片文本倾斜校正
2021/06/11 Python