前端学习日记（一）javascript基础：变量的作用域

rollback 发布于2019-08-23 16:45 / 1267人阅读

摘要：张三李四李四李四链式作用域函数包含在函数中，这是函数所有局部变量对函数可见，但是相反是不行的。局部变量必须使用声明，否则声明的是全局变量。父级函数变量对所有子函数可见，子函数会一级一级向上寻找变量。

引言

一直从事服务端开发。由于近年来前端迅速发展，所以想入坑前端行列，虽然一直有接触并开发前端相关的项目，但是想要做前端的工作决定系统的学习一下前端，就先从变量开始吧！

变量的作用域

在js中变量的作用域只有两种，全局变量、局部变量

全局变量
在函数内，全局变量可以直接访问

// 全局变量
var name = "张三"

function showName() {
  console.log(name);
}

showName(); // 张三

局部变量
自然局部变量不可以在函数外部访问

// 局部变量
function showName2() {
  var name2 = "李四"
}

console.log(name2) // error: Uncaught ReferenceError: name2 is not defined

声明局部变量必须使用 var，否则声明的则是全局变量

// 局部变量
function showName3() {
  name3 = "王五"
}

showName3();

console.log(name3) // 王五

如果局部变量与全部变量名称一样会怎么样呢？
js 不会像服务端语言那样名称一样会产生冲突。通过下面的例子看到，函数会先找局部变量，也就是说局部变量的优先级要比全局变量的优先级要高。

var name = "张三"

function showName() {
  var name = "李四"
  console.log(name) // 李四
}

showName();

console.log(name) // 王五

刚才说过局部变量必须使用var声明，否则声明的是全局变量。如果已存在相同名称的全局变量会怎么样呢？
在函数执行后，会改变全局变量的值。

var name = "张三"

function showName() {
  name = "李四"
  console.log(name) // 李四
}

showName();

console.log(name) // 李四

链式作用域
showName2 函数包含在 showName 函数中，这是 showName 函数所有局部变量对 showName2 函数可见，但是相反是不行的。
通过情景三，可以看出来子函数回向父级一级一级寻找变量，所有父级的变量对子级都是可见的，这就是js的 “链式作用域”

// 情景一
function showName() {
  var name = "张三"
  function showName2() {
    var name = "李四"
    return name
  }
  return showName2()
}

var result = showName()
console.log(result) // 李四

// 情景二
function showName() {
  var name = "张三";
  function showName2() {
    return name;
  }
  return showName2()
}

var result = showName()
console.log(result) // 张三

// 情景三
function showName() {
  var name = "张三";
  function showName2() {
    function showName3() {
      return name;
    }
    return showName3()
  }
  return showName2();
}

var result = showName()
console.log(result) // 张三

结

js 作用域分全局变量与局部变量。

局部变量必须使用 var 声明，否则声明的是全局变量。

函数可以直接访问全局变量，外部不可使用局部变量。

全局变量与局部变量名称可以重复，局部变量优先级更高。

父级函数变量对所有子函数可见，子函数会一级一级向上寻找变量。

云服务器 idc机房托管 php变量作用域 javascript作用域链 javascript基础学习 javascript基础学习博客

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/103238.html

我的前端面试日记（一）

摘要：组件化编码的一切都是基于组件的。属性返回目标节点的前一个兄弟节点。如果目标节点前面没有同属于一个父节点的节点，将返回属性是一个只读属性。而当变量离开环境时，则将其标记为离开环境。第一次写面试经历，虽然之前有过一些电话面试经历，但相对而言感觉此次的经历对自己收获还是比较大，这里留下面经当作日记吧！（面试时间：2018-6-12 下午2:10；时长：50min；公司：*） 1、说说Rea...

warkiz 2019-08-29 15:42 评论0 收藏0
我的前端面试日记（一）

摘要：组件化编码的一切都是基于组件的。属性返回目标节点的前一个兄弟节点。如果目标节点前面没有同属于一个父节点的节点，将返回属性是一个只读属性。而当变量离开环境时，则将其标记为离开环境。第一次写面试经历，虽然之前有过一些电话面试经历，但相对而言感觉此次的经历对自己收获还是比较大，这里留下面经当作日记吧！（面试时间：2018-6-12 下午2:10；时长：50min；公司：*） 1、说说Rea...

zhunjiee 2019-08-22 18:00 评论0 收藏0
前端学习日记（二）javascript基础：闭包是什么？

摘要：闭包在解释闭包，指的是词法表示包括不被计算的变量的函数，也就是说，函数可以使用函数之外定义的变量。再把这个函数赋值给多个变量执行时，会依次创建多个闭包引入的变量副本，并且相互不会污染。闭包在 ECMAScript 解释闭包，指的是词法表示包括不被计算的变量的函数，也就是说，函数可以使用函数之外定义的变量。地址： https://www.w3cschool.cn/ecma... 下面...

flybywind 2019-08-23 16:47 评论0 收藏0
前端面试日记（二）

摘要：面试时间晚上时长小时分钟公司，一面一简单的介绍下自己介绍的真的很简单。。。。。。二平时都是怎么学习前端的学习前端的话，我主要是以书籍为主然后是网站视频博客文档等学习理论，之后再通过代码实践。。。大概是在6月11号在Boss直聘投的简历，6月12号中午收到电话约的面试时间，刚开始说是13号晚上7点；后面可能时间有变，中午来了个电话说改到9-10点；怎么说算是第一次面试自己目标公司之一吧...

huayeluoliuhen 2019-08-02 16:02 评论0 收藏0