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功能函数(2009-06-04更新)
Jun 04 Javascript
JavaScript获取图片的原始尺寸以宽度为例
May 04 Javascript
JavaScript实现按Ctrl键打开新页面
Sep 04 Javascript
jquery选择器需要注意的问题
Nov 26 Javascript
javascript中Array()数组函数详解
Aug 23 Javascript
jquery.Jcrop结合JAVA后台实现图片裁剪上传实例
Nov 05 Javascript
Angular自定义组件实现数据双向数据绑定的实例
Dec 11 Javascript
Vue三层嵌套路由的示例代码
May 05 Javascript
纯javascript前端实现base64图片下载(兼容IE10+)
Sep 14 Javascript
JavaScript使用小插件实现倒计时的方法讲解
Mar 11 Javascript
微信小程序云开发之数据库操作
May 18 Javascript
vue实现防抖的实例代码
Jan 11 Vue.js
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有序表查找之插值查找算法示例
2018/02/10 PHP
js下弹出窗口的变通
2007/04/18 Javascript
isArray()函数(JavaScript中对象类型判断的几种方法)
2009/11/26 Javascript
jQuery选择没有colspan属性的td的代码
2010/07/06 Javascript
JavaScript字符串对象的concat方法实例(用于连接两个或多个字符串)
2014/10/16 Javascript
浅谈JavaScript中的Math.atan()方法的使用
2015/06/14 Javascript
日常收藏的jquery技巧
2015/12/02 Javascript
jQuery的内容过滤选择器学习教程
2016/04/18 Javascript
Node.js如何响应Ajax的POST请求并且保存为JSON文件详解
2017/03/10 Javascript
微信小程序动态显示项目倒计时效果
2017/06/13 Javascript
Bootstrap 模态对话框只加载一次 remote 数据的完美解决办法
2017/07/09 Javascript
Vue框架中正确引入JS库的方法介绍
2017/07/30 Javascript
纯js实现页面返回顶部的动画(超简单)
2017/08/10 Javascript
ES6解构赋值的功能与用途实例分析
2017/10/31 Javascript
详解bootstrap导航栏.nav与.navbar区别
2017/11/23 Javascript
详解Webpack loader 之 file-loader
2018/11/07 Javascript
微信小程序批量上传图片到七牛(推荐)
2019/12/19 Javascript
Vue+tracking.js 实现前端人脸检测功能
2020/04/16 Javascript
[02:49]DOTA2完美大师赛首日观众采访
2017/11/23 DOTA
详解python3中socket套接字的编码问题解决
2017/07/01 Python
Python装饰器知识点补充
2018/05/28 Python
详解python读取image
2019/04/03 Python
Python两台电脑实现TCP通信的方法示例
2019/05/06 Python
Python 使用matplotlib模块模拟掷骰子
2019/08/08 Python
Python实现图片批量加入水印代码实例
2019/11/30 Python
python多线程实现代码(模拟银行服务操作流程)
2020/01/13 Python
python实现录音功能(可随时停止录音)
2020/10/26 Python
python学习之使用Matplotlib画实时的动态折线图的示例代码
2021/02/25 Python
中文专业毕业生自荐书范文
2014/01/04 职场文书
大学生职业生涯规划书的基本内容
2014/01/06 职场文书
自我管理的活动方案
2014/08/25 职场文书
2014年自愿离婚协议书
2014/10/10 职场文书
2014小学数学教师个人工作总结
2014/12/18 职场文书
放假通知
2015/04/14 职场文书
2015年宣传部个人工作总结
2015/05/14 职场文书
2016新教师培训心得体会范文
2016/01/08 职场文书