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的Array数组对象详解
Feb 22 Javascript
JS 根据子网掩码,网关计算出所有IP地址范围示例
Apr 23 Javascript
微信小程序 input输入框控件详解及实例(多种示例)
Dec 14 Javascript
ng2学习笔记之bootstrap中的component使用教程
Mar 09 Javascript
解决Vue开发中对话框被遮罩层挡住的问题
Nov 26 Javascript
如何使用Jquery动态生成二级选项列表
Feb 06 jQuery
何时/使用 Vue3 render 函数的教程详解
Jul 25 Javascript
解决Vue使用bus总线时,第一次路由跳转时数据没成功传递问题
Jul 28 Javascript
解决vue打包报错Unexpected token: punc的问题
Oct 24 Javascript
JavaScript用document.write()输出换行的示例代码
Nov 26 Javascript
vue基于Echarts的拖拽数据可视化功能实现
Dec 04 Vue.js
原生JS运动实现轮播图
Jan 02 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
解析WordPress中函数钩子hook的作用及基本用法
2015/12/22 PHP
PHP5.2中PDO的简单使用方法
2016/03/25 PHP
Js 本页面传值实现代码
2009/05/17 Javascript
基于jQuery的图片剪切插件
2011/08/03 Javascript
百度地图自定义控件分享
2015/03/04 Javascript
javascript中call apply 的应用场景
2015/04/16 Javascript
谷歌Chrome浏览器扩展程序开发小记
2016/01/06 Javascript
百度地图给map添加右键菜单(判断是否为marker)
2016/03/04 Javascript
js实现可控制左右方向的无缝滚动效果
2016/05/29 Javascript
jQueryUI 拖放排序遇到滚动条时有可能无法执行排序的小bug及解决方案
2016/12/19 Javascript
JS实现密码框的显示密码和隐藏密码功能示例
2016/12/26 Javascript
微信小程序使用slider设置数据值及switch开关组件功能【附源码下载】
2017/12/09 Javascript
node实现登录图片验证码的示例代码
2018/04/20 Javascript
React中如何引入Angular组件详解
2018/08/09 Javascript
Koa 使用小技巧(小结)
2018/10/22 Javascript
Vue.js自定义指令学习使用详解
2019/10/19 Javascript
Javascript 类型转换、封闭函数及常见内置对象操作示例
2019/11/15 Javascript
Vue路由管理器Vue-router的使用方法详解
2020/02/05 Javascript
ESLint 是如何检查 .vue 文件的
2020/11/30 Vue.js
基于Python实现一个简单的银行转账操作
2016/03/06 Python
Python批处理删除和重命名文件夹的实例
2018/07/11 Python
python 实现创建文件夹和创建日志文件的方法
2019/07/07 Python
TFRecord格式存储数据与队列读取实例
2020/01/21 Python
python如何实现单链表的反转
2020/02/10 Python
Python实现栈的方法详解【基于数组和单链表两种方法】
2020/02/22 Python
python实现控制台输出彩色字体
2020/04/05 Python
纯CSS改变webkit内核浏览器的滚动条样式
2014/04/17 HTML / CSS
canvas粒子动画背景的实现示例
2018/09/03 HTML / CSS
世界上最大的家庭自动化公司:Smarthome
2017/12/20 全球购物
小区物业门卫岗位职责
2014/04/10 职场文书
清明节演讲稿
2014/05/27 职场文书
2014年扫黄打非工作总结
2014/12/03 职场文书
大三学生英语考试作弊检讨书
2015/01/01 职场文书
写给媳妇的检讨书
2015/05/06 职场文书
社区干部培训心得体会
2016/01/06 职场文书
如何在Python中创建二叉树
2021/03/30 Python