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 相关文章推荐
jQuery 入门讲解1
Apr 15 Javascript
javascript 获取select下拉列表值的代码
Sep 07 Javascript
IE与firefox下Dhtml的一些区别小结
Dec 02 Javascript
JS/jQuery实现默认显示部分文字点击按钮显示全部内容
May 13 Javascript
js动态改变select选择变更option的index值示例
Jul 10 Javascript
实现placeholder效果的方案汇总
Jun 11 Javascript
使用 JavaScript 进行函数式编程 (一) 翻译
Oct 02 Javascript
微信小程序 开发经验整理
Feb 15 Javascript
从零开始学习Node.js系列教程三:图片上传和显示方法示例
Apr 13 Javascript
javascript 开发之网页兼容各种浏览器
Sep 28 Javascript
详解基于 Nuxt 的 Vue.js 服务端渲染实践
Oct 24 Javascript
判断JavaScript中的两个变量是否相等的操作符
Dec 21 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/09/30 PHP
PHP错误Parse error: syntax error, unexpected end of file in test.php on line 12解决方法
2014/06/23 PHP
PHP图片处理之使用imagecopy函数添加图片水印实例
2014/11/19 PHP
laravel框架中路由设置,路由参数和路由命名实例分析
2019/11/23 PHP
Js保留小数点的4种效果实现代码分享
2014/04/12 Javascript
使用jquery菜单插件HoverTree仿京东无限级菜单
2014/12/18 Javascript
javascript实现youku的视频代码自适应宽度
2015/05/25 Javascript
jquery操作select元素和option的实例代码
2016/02/03 Javascript
JavaScript笔记之数据属性和存储器属性
2016/03/31 Javascript
js判断某个字符出现的次数的简单实例
2016/06/03 Javascript
WEB开发之注册页面验证码倒计时代码的实现
2016/12/15 Javascript
jQuery实现淡入淡出的模态框
2017/02/09 Javascript
JavaScript设置名字输入不合法的实现方法
2017/05/23 Javascript
JS图片轮播与索引变色功能实例详解
2017/07/06 Javascript
Vue-cli创建项目从单页面到多页面的方法
2017/09/20 Javascript
jQuery实现动态显示select下拉列表数据的方法
2018/02/05 jQuery
详解Vue源码之数据的代理访问
2018/12/11 Javascript
js继承的这6种方式!(上)
2019/04/23 Javascript
编写更好的JavaScript条件式和匹配条件的技巧(小结)
2019/06/27 Javascript
Vue使用NProgress进度条的方法
2019/09/21 Javascript
[01:50]2014DOTA2西雅图邀请赛 专访欢乐周宝龙
2014/07/08 DOTA
python 控制Asterisk AMI接口外呼电话的例子
2019/08/08 Python
python有序查找算法 二分法实例解析
2020/02/18 Python
10行Python代码实现Web自动化管控的示例代码
2020/08/14 Python
丹麦优惠购物网站:PLUSSHOP
2019/03/24 全球购物
应届生求职简历的自我评价怎么写
2013/10/23 职场文书
企业总经理岗位职责
2014/02/13 职场文书
《特殊的葬礼》教学反思
2014/04/27 职场文书
乔布斯斯坦福大学演讲稿
2014/05/23 职场文书
员工安全责任书范本
2014/07/24 职场文书
525心理健康活动总结
2015/05/08 职场文书
2015年度酒店客房部工作总结
2015/05/25 职场文书
CSS3实现模糊背景的三种效果示例
2021/03/30 HTML / CSS
总结Python使用过程中的bug
2021/06/18 Python
Java各种比较对象的方式的对比总结
2021/06/20 Java/Android
「魔法少女伊莉雅」美游粘土人开订
2022/03/21 日漫