CONTENT(目录)

   前言

     Variable declearation:three rules you can break

         1.Don't set var statement in a block

         2.Don't set var statement in a loop 

         3.Set a variable corresponding var stamement

   JvaaScript's Variable scope

        Pitfall 1:variable is function-scoped.

        Pitfall  2:they can be capture in closurse.

  

    前言

    最近看的书,怎么说呢?就不多也不少。本想等技术成熟些,再来写博客,和大家一起分享,一起进步,互相交朋友。

   但是,突然发现,最初看的知识,如果不一直在脑袋中回忆,好像云里雾里,有些知其然不知其所以然的味道。想起要再回顾一下,就又要从一大堆的材料中找到这些知识,效率十分低下,

心想这么做也不是长久之计。但又不是高手,只好将这篇放入随笔记录,起码也算是个安身立命之所。

  本人目前还是在校生,算是渣渣,一心想学好技术,这里便是我的起点了,写的不好的请大神们轻拍。

   说到变量,我们会想到变量名的命名规则,变量的类型,变量的声明,变量作用域等.变量的命名规则有匈牙利命名法和大小驼峰法。变量的类型有六种,其中五种原始类型:

分别是undefined,null,Number,String,Boolean.其他的全是object(对象).这些只要有点编程知识的,基本都懂我们就不多加讨论。有兴趣的可以私聊我或者自行百度。

点击可看大图。

 

  

     变量的声明和作用域是我们重点要说明的,毕竟和我们学的C/C++,java等还是有些不一样的。

   Variable declearation:three rules you can break

    Don't set var statement in a block

     不要将var语句放在块区域中。我们平时所学的Java和c/c++是支持块作用域的,在变量所声明和定义的块区域外,我们无法使用这个变量。

但是在JS中,却不是这样,我们来看下面的代码:

 functions  fn(x,y){
if(x>y){
var temp = x;
x = y;
y = temp;
}
}

   记住,在JS中,用 var 声明的变量,存在一个变量提升的问题(hoisted)。就是讲变量的声明提升到函数体的第一行,而赋值语句还是呆在原来的地方。实际效果如下:

function fn(x,y){
var temp;
if(x>y){
temp = x;
x = y;
y = temp;
} }

  还有一点需要注意的是你不得不小心使用每个伪块作用域(pseudo-block-local)的变量一次,如果你再次声明这个变量,它会保存当前的值。如下:

function fn(x,y){

  if(x<0){
var temp;
console.log(temp);//undefind
temp = 3;
....
}
if(y<0){
var temp;// declared again
console.log(temp);//
...
}
} fn(-1,-1);

    Don't set a var statement in a loop

不要在循环体内声明变量,原理和不要在块区域里声明变量一样。如下:

functions fn(){

    var temp;//do this    好像说这么做速度会快些。
for(var i=0;i<100;i++){
var temp; //don't do this
....
}
}

  

  另外再扯一个问题。使用var 声明变量,有时候会产生一些奇怪的现在。比如:

for(var i=0; i<10;i++){
setTimeout(function(){
console.log(i);
},100*i);
} //输出的结果是 10个10 具体是怎么回事我也似懂非懂,会持续关注这个问题

  

  解决的方案是使用立即调用函数表达式(IIFE)来获取for循环每次循环时i的值。(看解决的方法,好像是出现了闭包(closure)的问题,但是我实在看不出来!)

for(var i=0;i<100;i++){
(function (i){
setTimeout(function(){
console.log(i);
}.100*i);
})(i);
}

  IIFE是immediately-invoked Function expression的简写。想了解详情点击这里或者这里

ES6提供了let关键字来声明变量,let变量只在其代码块中生效,也就是块级作用域。注意一个要点,在代码块内,只要是在let声明前使用变量都是不可用的。这种现象在ES6        称为“暂时性死区(temporal dead zone)”,简称为TDZ

    set a variable corresponding a  var statement

  声明一个变量我们就用一条var语句。

  先看代码段(1),在函数体顶端我们用一条var语句声明了三个变量并赋值。再看代码段(2),如果我们不小心漏了一个逗号(comma),在不经意间你就创建了两个全局变量b和c。

(注:给没用var statement 声明的变量名赋值,会产生全局变量。)  产生这样的原因是:a=1 没有标点符号,javascript内部有个机制,会帮你自动加上分号(semicolon)。

   有兴趣的同学想了解什么情况下会自动加分号,可自行百度,也可看文章底部链接。

   再来看代码段(3),文章作者是推荐这样的写法。原因有3点:

  • 没有标点符号的问题,如果你不小心遗漏了分号,自动加分号的机制会帮你加上.
  • 更容易去添加或者删除某条语句,不会有代码段(2)产生的问题.
  • 缩进很自然。
//(1)
var a=1,
b=2,
c=3; //(2)
var a=1
b=2, //全局变量产生
c=3; //(3)
var a=1;
var b=2;
var c=3;

  JvaaScript's Variable scope

   javascript的变量的作用域。在JS中的变量作用域是真的奇葩。本文主要讲两点:

   陷阱1: 变量的作用域是函数作用域

var  myvar = "global";
function fn(){
/* var myvar */ (1)
console.log(myvar);//undefined
if(true){
/* myvar = "local"; */ (2)
var myvar = "local";
}
console.log(myvar); //local
}
>fn();
undefined
local
>myvar
gloabl

  与前文的不要将var语句放在块作用域的原理一样,存在变量的提升.实际效果是注释(1)(2)的样子。所以最佳实践是只在函数体开始的地方使用var。

  陷阱2:闭包

functions fn(){
var myvar = "abc";
return function(){
return myvar;
};
}
var f=fn();
>f()
abc

  这个算是最简单的闭包了吧。在函数里还有内层函数,通过返回内层函数将函数的值抛出来。其实要是闭包的结构太复杂,我也看不懂是否是闭包。还需努力。

  需要注意两个点:

  • 不经意间分享共同的环境
  • 创建一个新的环境

  总结:在没有开始写以前,感觉很简单。因为基本的思路已经有了,但是发现真正做起来,还是有难度的。虽然内容不多,可能还有缺陷,可足足花了3天时间。

(还有课!!!)

  要考虑排版,内容的思路清晰,还有第一次使用博客园的窘境。喜欢英文的同学可以看这篇,内容基本一样吧,在这篇文章里的第4点references(引用),

  有你们关心的变量作用域,自动加分号机制,还有"strict mode"(严格模式),ES5应该都是“sloppy mode”;传送门

Something About Variable的更多相关文章

  1. 引人瞩目的 CSS 变量(CSS Variable)

    这是一个令人激动的革新. CSS 变量,顾名思义,也就是由网页的作者或用户定义的实体,用来指定文档中的特定变量. 更准确的说法,应该称之为 CSS 自定义属性 ,不过下文为了好理解都称之为 CSS 变 ...

  2. TOMCAT-报错The BASEDIR environment variable is not defined correctly

    <span style="font-size:18px;">The BASEDIR environment variable is not defined correc ...

  3. vs中“Stack around the variable was corrupted”的解决方案

    把 project->配置属性->c/c++->代码生成->基本运行时检查 为 默认值 就不会报本异常.具体原因正在研究中... 如果改为其他就有exception. exce ...

  4. OPEN CASCADE Multiple Variable Function

    OPEN CASCADE Multiple Variable Function eryar@163.com Abstract. Multiple variable function with grad ...

  5. mysql: unknown variable 'character-set-client=utf8'

    在同事安装的MySQL服务器上(居然安装的是My-SQL 5.1.73的老旧版本),登录MySQL时遇到下面"mysql: unknown variable 'character-set-c ...

  6. Swift 提示:Initialization of variable was never used consider replacing with assignment to _ or removing it

    Swift 提示:Initialization of variable was never used consider replacing with assignment to _ or removi ...

  7. 【偶像大师 白金星光】的【Variable Tone】技术大公开!偶像从哪里看都那么可爱,VA小组谈制作方针

    http://game.watch.impress.co.jp/docs/news/1016369.html         自从街机版的运营依赖,今年迎来了[偶像大师]系列的11周年.在CEDEC ...

  8. vs2012 error c4996: This function or variable may be unsafe

    编译lua源码时,使用vs2012,遇到如下错误. 1>------ 已启动生成: 项目: 20130925, 配置: Debug Win32 ------ 1>  stdafx.cpp ...

  9. 配置OpenCV产生flann\logger.h(66): error C4996: 'fopen': This function or variable may be unsafe问题[zz]

    使用vs2012/2013配置opencv编译出现问题: 1>------ 已启动生成: 项目: Win32ForOpenCV245, 配置: Debug Win32 ------ 1> ...

  10. C++关于Condition Variable

    #include <condition_variable> #include <mutex> #include <future> #include <iost ...

随机推荐

  1. DOM&BOM笔记

    day01正课:1. DOM概述2. ***DOM树3. *查找 1. DOM概述: DHTML:动态网页技术的统称 DHTML=HTML+CSS+JS 鄙视题: HTML XHTML DHTML X ...

  2. net Core 使用MyCat分布式数据库,实现读写分离

    net Core 使用MyCat分布式数据库,实现读写分离 目录索引 [无私分享:ASP.NET CORE 项目实战]目录索引 简介 MyCat2.0版本很快就发布了,关于MyCat的动态和一些问题, ...

  3. es6整理

    1.const和let let类似于var,不同的是let只在所在的代码段有效 for循环的计数器,就很合适使用let命令. let和var的区别: //变量i是var声明的,在全局范围内都有效.所以 ...

  4. js-ajax实现获取xmlHttp对象

    //获取xmlHttp对象 function createXMLHttp() { var xmlhttp; //对于大多数浏览器适用 if (window.XMLHttpRequest) { xmlh ...

  5. Egret 事件机制

    主要流程: private createGameScene():void { var JimGreen = new Boy(); var HanMeimei = new Girl(); JimGree ...

  6. Jzzhu and Chocolate

    CF#257 div2 C:http://codeforces.com/contest/450/problem/C 题意:n*m的方格,每次可以横着或者纵向的切一刀,问切k之后,最小的最大是多少. 题 ...

  7. EMS-keil C51常用错误

    1. LAB100.C(12): error C216: subscript on non-array or too many dimensions 原程序如下: #include <reg51 ...

  8. -_-#【userAgent】极速模式与非极速模式存在差异

    UC浏览器 Android 极速模式 UC浏览器 Android 非极速模式

  9. 慕课网《Android智能机器人“小慕”的实现》项目上手操作与代码解读【2】

    前几天有点忙,一直没写第三方API是怎么调用的,今天我先介绍一下如何调用图灵机器人第三方API. 一.图灵机器人API的调用 首先登录图灵机器人官网首页http://www.tuling123.com ...

  10. R学习日记——分解时间序列(非季节性数据)

    分解时间序列,就是将一个时间序列拆分成不同的构成元件.一般序列(非季节性序列)包含一个趋势部分和一个不规则部分(也就是随机部分),而如果是一个季节性序列,除以上两个外,还有季节性部分.   在此,我们 ...