开发者社区> 程序猿小卡> 正文

javascript变量作用域一点总结

简介:
+关注继续查看

前言:javascript里变量作用域是个经常让人头痛抓狂的问题,下面通过10++个题目,对经常遇到又容易出错的情况进行了简单总结,代码样例很短很简单

题目一




var name = 'casper';
alert(name);  //毫无疑问地输出:casper

题目二




alert(name);  //报错:对象未定义,即使用一个压根就不存在的变量,所以出错

age = 24;  //这里木有错,但age不是为定义吗?翻下犀牛书,明白了
           //给一个未定义的变量赋值,会创建一个全局变量,相当于:var age = 24

题目三


alert(name);  //name下面才定义,这里肯定报错了吧?错!这里弹出:undefined
var name = 'casper';

解释:javascript代码在解析的时候,都会搜索下var声明的变量,并将其声明提前,实际的过程如下:

var name;  //光声明name变量,但未赋值,所以为此时为:undefined
alert(name); 
name = 'casper';

题目四




var name = 'casper';
function show(){
    alert(name);
    name = 'hello';  //全局变量name的值改为'hello'
}
show();  //输出:casper

题目五


var name = 'casper';
function show(){
    alert(name);  //输出:undefined,是不是有想死的心
    var name = 'hello';  //注意:与题目四相比,此处name前多了个var,
}
show();

解释:在函数show中,name是个局部变量,题目三的原理同样适用于此,即函数show内部实际为

(小知识点补充:当函数内部存在与外部全局变量同名的局部变量,优先使用局部变量,此处为name)



function show(){
    var name;
    alert(name);
    name = 'hello';
}

题目六


var list = [1,2,3];
function show(){
    if(typeof list === 'undefined'){
        list = [];
    }
    alert(list.length);
};
show();  //结果:3,是不是一目了然= =,稍等,请接着看第七题

题目七


var list = [1,2,3];
function show(){
    if(typeof list === 'undefined'){
        var list = [];  //请注意,与题目六相比,这里多了个var
    }
    alert(list.length);
};
show();  //结果:0,是不是突然有了想死的冲动

解释:javascript没有块级作用域(即由{}限定的作用域),函数中声明的所有变量,无论在哪里声明,在整个函数中都是有定义的,这点跟C++等灰常不同,赶紧扭转思想与时俱进

于是,再来看下show方法实际的内部解析逻辑

function show(){
    var list;  //list为局部变量,且此处尚未赋值
    if(typeof list === 'undefined'){
        list = [];
    }
    alert(list.length);
};

 

题目八


alert(typeof show);  //结果:function,请相信你的眼睛,你没有看错
function show(){}

解释:javascript代码解析的过程,类似 function show() 这种形式声明的函数,跟var声明的变量一样,都会被提到最前面,不同的是,函数声明跟定义同时完成,但var声明的变量的赋值在后面才会完成

 

题目九


alert(typeof show);  //结果:undefined,请再次擦亮你的眼睛,你的确没有看错
var show = function(){};

解释:采用函数定义式以及函数表达式定义函数,两者过程之间存在一些区别

函数定义式:function show(){}

函数表达式:var show = function(){}

采用函数定义式声明的方法,函数的定义会提前;而采用函数表达式声明的方法,函数的定义,跟采用var声明的局部变量一样,函数声明会提前,但函数定义位置不变,过程如下:

var show;
alert(typeof show);
show = function(){};

题目十




var data = {name:'casper'};
function data(){
    alert('casper');
}
data();  //TypeError: object is not a function

是不是有砸显示器的冲动。。。data此时其实为{name:'casper'},把一个object当函数调用,于是报错了

前面说过,函数声明(通过函数定义式)、var声明的变量会被提前,但是会有先后顺序之分,如下:

function data(){
    alert('casper');
}
var data;
data = {name:'casper'};
data();

略微修改下,结果就不同鸟:



var data = {name:'casper'};
var data = function (){  //通过函数表达式声明函数
    alert('casper');
}
data();  //结果:casper

结合上文不难猜想过程如下:



var data;
data = {name:'casper'};
data = function (){
    alert('casper');
}
data();  //结果:casper

 

小结:javascript作用域的问题着实令人头疼,作为基础中的基础,把它搞清楚还是很有必要的,上面列举 了不少容易出错的场景,但实际情况可能比这还复杂,闭包、this、不同段之间的脚本(即脚本分散写在多段<script>标签中)等这里就 不展开了。以上内容如有错漏 或 讲解不当之处,欢迎指出。

 

背景:昨晚被某兄弟某了一道关于变量作用域的问题,灰常自信地给出答案,然后。。。乖乖回去翻下犀牛书好生重温了一遍,以下仅做备忘,过几天再来看下自己还能不能正确看出答案。。。

 

 

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
从零开始学 Web 之 JavaScript(二)变量
大家好,这里是「 Daotin的梦呓 」从零开始学 Web 系列教程。此文首发于「 Daotin的梦呓 」公众号,欢迎大家订阅关注。在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识点,期间也会分享一些好玩的项目。
1221 0
使用关键字创建具有局部作用域的JavaScript变量
使用关键字创建具有局部作用域的JavaScript变量
30 0
python3中global 和 nonlocal 的作用域
python引用变量的顺序: 当前作用域局部变量->外层作用域变量->当前模块中的全局变量->python内置变量 。
1027 0
Spring 框架基础(02):Bean的生命周期,作用域,装配总结
本文源码:GitHub·点这里 || GitEE·点这里 一、装配方式 Bean的概念:Spring框架管理的应用程序中,由Spring容器负责创建,装配,设置属性,进而管理整个生命周期的对象,称为Bean对象。
3392 0
JavaScript 中对变量和函数声明提前的示例
如题所示,看下面的示例(可以使用Chrome浏览器,然后F12/或者右键,审查元素.调出开发者工具,进入控制台console输入)(使用技巧: 控制台输入时Shift+Enter可以中途代码换行)var name = "xiaoming"; (function(){ var name = name || "小张"; console.
600 0
【iOS7的一些总结】13、UIScrollView的概念和基本使用方法
1、UIScrollView的基本概念 在iOS应用中,使用UIView类来显示一个视图。UIView只是最基本的视图类,单单靠UIView来方便地完成复杂应用开发是不可能的,因此需要多种更加强大的派生类来丰富UIKit的类库。
787 0
Python3中关于下划线变量和命名的总结
变量 #!-*-coding:utf-8-*- #__author__ = 'ecaoyng' # # 变量 #_xxx,单下划线开头的变量,标明是一个受保护(protected)的变量,原则上不允许直接访问,但外部类还是可以访问到这个变量。
941 0
Java基础-02总结关键字,标识符,注释,常量进制,变量数据类型
你需要的是什么,直接评论留言。 获取更多资源加微信公众号“Java帮帮” (是公众号,不是微信好友哦) 还有“Java帮帮”今日头条号,技术文章与新闻,每日更新,欢迎阅读 学习交流请加Java帮帮交流QQ群553841695 分享是一种美德,分享更快乐! 1:关键字(掌握) (1)被Java语言赋予特定含义的单词(2)特点:全部小写。(3)注意事项:
1378 0
+关注
程序猿小卡
专注前端技术与架构
111
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
JS零基础入门教程(上册)
立即下载
性能优化方法论
立即下载
手把手学习日志服务SLS,云启实验室实战指南
立即下载