跟我学习javascript的全局变量

一、尽量少用全局对象

全局变量的问题在于，你的JavaScript应用程序和web页面上的所有代码都共享了这些全局变量，他们住在同一个全局命名空间，所以当程序的两个不同部分定义同名但不同作用的全局变量的时候，命名冲突在所难免。

web页面包含不是该页面开发者所写的代码也是比较常见的，例如：

  • 第三方的JavaScript库
  • 广告方的脚本代码
  • 第三方用户跟踪和分析脚本代码
  • 不同类型的小组件，标志和按钮

比方说，该第三方脚本定义了一个全局变量，叫做result；接着，在你的函数中也定义一个名为result的全局变量。其结果就是后面的变量覆盖前面的，第三方脚本就一下子嗝屁啦！

因为，你不小心，在代码的某一处修改了全局变量， 会导致依赖全局变量的其它模块出错。而且出错原因难调试，难找到。

再者就是，网页运行肯定用到window对象，浏览器引擎又要遍历一次window的属性，性能下降。

  • 全局变量是维系不同模块之间的纽带，模块之间只能通过全局变量来访问对方提供的功能
  • 能使用局部变量的时候，绝不要使用全局变量
var i,n,sum//globals
function averageScore(players){
 sum =0;
 for(i = 1, i = player.length; i<n; i++){
  sum += score(players[i]);
 }
 return sum/n;
}

保持这些变量为局部变量，仅将其作为需要使用它们的代码的一部分。

function averageScore(players){
var i,n,sum;
 sum =0;
 for(i = 1, i = player.length; i<n; i++){
  sum += score(players[i]);
 }
 return sum/n;
}

在browser中，this关键字会指向全局的window对象
JavaScript 的全局命名空间也被暴露为在程序全局作用域中可以访问的全局对象，该对象作为 this 关键字的初始值。在 Web 浏览器中，全局对象被绑定到全局的 window 变量。添加或修改全局变量会自动更新全局对象。

this.foo; //undefined
foo ="global foo"; //"global foo"
this.foo; //"global foo"

类似地，更新全局对象也会自动地更新全局命名空间：

var foo ="global foo";
this.foo; //"global foo"
this.foo ="changed";
foo; //"changed"

两种用来改变全局对象的方式，通过var关键字声明以及给全局对象设置属性(通过this关键字)

通过全局对象进行针对当前运行环境的特性检测(Feature Detection)，比如在ES5中提供了一个JSON对象用来操作JSON数据，那么可以通过if(this.JSON)来判断当前运行环境是否支持JSON

if(!this.JSON){
 this.JSON ={
  parse:...,
  stringify:...
 }
}

二、如何避免全局变量

方法一：只创建一个全局变量。

MYAPP.stooge = {
 "first-name": "Joe",
 "last-name": "Howard"
};

MYAPP.flight = {
 airline: "Oceanic",
 number: 815,
 departure: {
  IATA: "SYD",
  time: "2004-09-22 14:55",
  city: "Sydney"
 },
 arrival: {
  IATA: "LAX",
  time: "2004-09-23 10:42",
  city: "Los Angeles"
 }
};

方法二：使用模块模式

var serial_maker = function ( ) {

// Produce an object that produces unique strings. A
// unique string is made up of two parts: a prefix
// and a sequence number. The object comes with
// methods for setting the prefix and sequence
// number, and a gensym method that produces unique
// strings.

 var prefix = '';
 var seq = 0;
 return {
  set_prefix: function (p) {
   prefix = String(p);
  },
  set_seq: function (s) {
   seq = s;
  },
  gensym: function ( ) {
   var result = prefix + seq;
   seq += 1;
   return result;
  }
 };
}( );

var seqer = serial_maker( );
seqer.set_prefix = 'Q';
seqer.set_seq = 1000;
var unique = seqer.gensym( ); // unique is "Q1000"

所谓模块模式，就是创建一个函数，该函数包括，私有变量和一个特权对象，特权对象的内容是，利用闭包能访问到私有变量的函数，最后返回特权对象。

首先，方法二，不仅可以当作全局变量用，也可以用在局部声明全局变量。因为就算你在不知道某个地方修改了seqer，就会立即报错，因为这是个对象，不是字符串。

方法三：零全局变量

零全局变量实际上是为了适应一小段封闭代码而采取的一种局部变量处理方式，只适合在一些特殊场景中使用。最常见的就是一些不会被其他脚本访问到的完全独立的脚本。
使用零全局变量的方式需要采用立即执行函数，用法如下。

( function ( win ) {

 'use strict' ;
 var doc = win.document ;
 //在此定义其他的变量并书写代码
} )

三、意外的全局变量

由于JavaScript的两个特征，不自觉地创建出全局变量是出乎意料的容易。首先，你可以甚至不需要声明就可以使用变量；第二，JavaScript有隐含的全局概念，意味着你不声明的任何变量都会成为一个全局对象属性。参考下面的代码：

function sum(x, y) {
 // 不推荐写法: 隐式全局变量
 result = x + y;
 return result;
}

此段代码中的result没有声明。代码照样运作正常，但在调用函数后你最后的结果就多一个全局命名空间，这可以是一个问题的根源。

经验法则是始终使用var声明变量，正如改进版的sum()函数所演示的：

function sum(x, y) {
 var result = x + y;
 return result;
}

另一个创建隐式全局变量的反例就是使用任务链进行部分var声明。下面的片段中，a是本地变量但是b确实全局变量，这可能不是你希望发生的：

// 反例，勿使用
function foo() {
 var a = b = 0;
 // ...
}

此现象发生的原因在于这个从右到左的赋值，首先，是赋值表达式b = 0，此情况下b是未声明的。这个表达式的返回值是0，然后这个0就分配给了通过var定义的这个局部变量a。换句话说，就好比你输入了：

var a = (b = 0);
如果你已经准备好声明变量，使用链分配是比较好的做法，不会产生任何意料之外的全局变量，如：

function foo() {
 var a, b;
 // ... a = b = 0; // 两个均局部变量
}

然而，另外一个避免全局变量的原因是可移植性。如果你想你的代码在不同的环境下（主机下）运行，使用全局变量如履薄冰，因为你会无意中覆盖你最初环境下不存在的主机对象

总是记得通过var关键字来声明局部变量

使用lint工具来确保没有隐式声明的全局变量

以上就是对javascript的全局变量介绍，希望对大家的学习有所帮助。

赞 (0)

相关推荐

  • javascript中局部变量和全局变量的区别详解

    javascript有两种变量:局部变量和全局变量.当然,我们这篇文章是帮助大家真正的区别这两种变量. 首先,局部变量是指只能在本变量声明的函数内部调用.全局变量时整个代码中都可以调用的变量.当然,单单从字面上理解肯定是不清楚的,下面我详细的介绍下: 大家都知道,变量是需要用var关键字声明的.但是javascript中也可以隐式的使用变量,就是不用声明,直接使用.而且,千万注意,javascript把隐式声明的变量总是当成全局变量来使用的. 例如: 复制代码 代码如下: function my

  • 基于JavaScript 声明全局变量的三种方式详解

    JS中声明全局变量主要分为显式声明或者隐式声明下面分别介绍. 声明方式一: 使用var(关键字)+变量名(标识符)的方式在function外部声明,即为全局变量,否则在function声明的是局部变量.该方式即为显式声明详细如下: <script> var test = 5;//全局变量 function a(){ var a = 3;//局部变量 alert(a); } function b(){ alert(test); } //a();//调用a方法,那么方法里面的内容才会执行 //b(

  • 探讨JavaScript中声明全局变量三种方式的异同

    探讨JavaScript中声明全局变量三种方式的异同

    变量及变量声明是一门语言最基本的概念,初学者都会很快掌握.JavaScript中声明变量也是如此,很简单var(关键字)+变量名(标识符). 方式1 var test;var test = 5;需注意的是该句不能包含在function内,否则是局部变量.这是第一种方式声明全局变量. 方式2 test = 5;没有使用var,直接给标识符test赋值,这样会隐式的声明了全局变量test.即使该语句是在一个function内,当该function被执行后test变成了全局变量. 方式3 window

  • JavaScript中全局变量、函数内变量以及常量表达式的效率测试

    JavaScript中全局变量、函数内变量以及常量表达式的效率测试

    var r, s = "this is a very very looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong string", x = /^\s+|\s+$/g; document.writeln("字符串测试 "); (function(){ document.write("全局->全局:"); var t = new Date(); for(

  • javascript(jquery)利用函数修改全局变量的代码

    我是将当前页用一个全局变量存储.同时在"最后一页"链接里单击方法调用一个函数自动去修改页数为最后一页,然后再调用载入评论的方法. 可是我发现点击"最后一页"第一次的时候系统没反应,再点击一次就抓去最后一页的资料了! 要说全局变量没改,应该是改了,就仿佛改了页数而载入评论的方法失效了一样. 代码如下: 复制代码 代码如下: var page = 1; //初始化页数为第一页 var str = ""; $(document).ready(funct

  • javascript中运用闭包和自执行函数解决大量的全局变量问题

    但是从全局看来,这样会导致出现一些让我们难以掌控的情况的出现:变量同名.多个函数共用一个全局变量后的值的变换--等等.所以,有时候,对于一些简单的全局变量,我们可以通过另一种方式来处理--用自执行函数+闭包的方法来解: 比如:我们要在网页加载时给出一个提示,在网页关闭时给出另一个提示 下面的代码,实现了以上功能 复制代码 代码如下: var msg1 = "欢迎光临!"; // 定义一个全局变量 var msg2 = "再见!" //定了另一个全局变量 window

  • javascript全局变量封装模块实现代码

    下面的代码是我的测试代码,注释很重要: 复制代码 代码如下: /*global window,jQuery,validate_email,masterUI,$,rest*/ /** Enable ECMAScript "strict" operation for this function. See more: * http://ejohn.org/blog/ecmascript-5-strict-mode-json-and-more/ * http://stackoverflow.c

  • javascript 用局部变量来代替全局变量第1/2页

    javascript 用局部变量来代替全局变量第1/2页

    为什么要这么做?有什么根据么?不这么做,对性能到底能带来多大的损失?本文就来探讨这些问题的答案,从根本上了解变量的读写性能都和哪些因素有关. 著作权声明        本文译自 Nicholas C. Zakas 于2009年2月10日在个人网站上发表的<JavaScript Variable Performance>.原文是唯一的正式版,本文是经过原作者(Nicholas C. Zakas)授权的简体中文翻译版(Simplified Chinese Translation).译者(明达)在翻

  • Javascript全局变量var与不var的区别深入解析

    相信你对全局变量一定不陌生,在函数作用域里用a=1这种形式定义的变量会是一个全局变量,在全局作用域里,用下面3种形式都可以创建对全局可见的命名: 复制代码 代码如下: <script>var a = 1;b = 2;window.c = 3;</script> 对于b=2这种方式, 它其实和c是一样的,在执行这个赋值语句的时候,会沿着作用域链寻找名字叫做b的变量,一直找到作用域链的顶端还没有找到,于是给window添加一个属性b然后赋值. var与不var有两个区别: 1 var的

  • 跟我学习javascript的全局变量

    一.尽量少用全局对象 全局变量的问题在于,你的JavaScript应用程序和web页面上的所有代码都共享了这些全局变量,他们住在同一个全局命名空间,所以当程序的两个不同部分定义同名但不同作用的全局变量的时候,命名冲突在所难免. web页面包含不是该页面开发者所写的代码也是比较常见的,例如: 第三方的JavaScript库 广告方的脚本代码 第三方用户跟踪和分析脚本代码 不同类型的小组件,标志和按钮 比方说,该第三方脚本定义了一个全局变量,叫做result:接着,在你的函数中也定义一个名为resu

  • 跟我学习javascript的作用域与作用域链

    跟我学习javascript的作用域与作用域链

    作用域是JavaScript最重要的概念之一,想要学好JavaScript就需要理解JavaScript作用域和作用域链的工作原理.今天这篇文章对JavaScript作用域和作用域链作简单的介绍,希望能帮助大家更好的学习JavaScript. 一.JavaScript作用域 任何程序设计语言都有作用域的概念,简单的说,作用域就是变量与函数的可访问范围,即作用域控制着变量与函数的可见性和生命周期.在JavaScript中,变量的作用域有全局作用域和局部作用域两种. 1. 全局作用域(Global

  • 20条学习javascript的编程规范的建议

    1.使用js文件管理代码 所有代码尽量放在js文件中,然后再html文件中使用script引入,引入时注意放在body标签后面,并且不使用type或者language. 2.书写缩进 使用4个空白格缩进,注意不要使用tab键进行缩进. 3.断句 注意行长,每行不超过80个字符,超过时要进行适当断句,断句应该再操作符后面进行,最理想的是在逗号(,)后面进行断句,断句后下一行使用8格缩进. 4.注解 一般使用单行注释,块注释一般用于文档. 5.变量声明 所有变量使用之前先声明,未声明的变量会自动作为

  • 轻松学习Javascript闭包函数

    闭包函数是什么?在开始学习的闭包的时候,大家很能都比较难理解.就从他的官方解释来说,都是比较概念化的. 不过我们也还是从闭包的含义出发. 闭包是指函数有自由独立的变量.换句话说,定义在闭包中的函数可以"记忆"它创建时候的环境. 官方解释说完后,我们先来看一个简单计数的例子. var c = 0; function count(){ c++; } count();// 1 count();// 2 这个例子是利用了全局变量来实现,但是这里有个问题是,c这个变量也容易被其他方式所调用,这时

  • 学习javascript的闭包,原型,和匿名函数之旅

    本文通过示例给大家介绍javascript的闭包,原型,和匿名函数,具体详情请看下文. 一 .>关于闭包 理解闭包 需要的知识 1.变量的作用域 例1: var n =99; //建立函数外的全局变量 function readA(){ alert(n); //读取全局变量 } readA(); //执行此函数 例2: function readB(){ var c = 9; function readC(){ console.log(c); //ok c可见 } return readC; }

  • 写给想学习Javascript的朋友一点学习经验小结

    当然只是个人的经验,有什么不对的也请高手见谅和指正. 关于到培训学校学习的忠告:别说现在没有这样的学校,就是有专门的学校也不要去,因为不会有好的老师的.不要浪费你自己(很可能是你父母)的钱和时间.趁早死了这个念头. 关于培训学校的这个我想我要比一般的朋友更有发言权,因为我本人干英语培训将近2年,我很清楚培训市场的情况,你很难碰到一个好的老师.英语可能还好些,毕竟英语说得好的老师还比较多,长期跟老外泡在一起,确实对口语能力的提高很显著,但是代价是很昂贵的.而你现在要学的是Javascript,呵呵

  • 学习JavaScript设计模式之单例模式

    一.定义 保证一个类仅有一个实例,并提供一个访问它的全局访问点. 当单击登陆按钮,页面中出现一个登陆浮窗,这个登陆浮窗是唯一的,无论单击多少次登陆按钮,这个浮窗都只会被创建一次,那么这个登陆浮窗就适合用单例模式来创建. 二.实现原理 要实现单例并不复杂,使用一个变量来标志当前是否已经为某个类创建过对象,如果是,则在下一次获取该类的实例时,直接返回之前创建的对象. 三.假单例 全局变量不是单例模式,但在JavaScript开发中,我们经常会把全局变量当成单例来使用. var a = {}; 降低全

  • 学习JavaScript中的闭包closure应该注意什么

    目录 闭包简述 1.闭包使得内部函数可以访问外部函数的属性(变量或方法) 2.闭包的广阔应用场景 3.用闭包模拟私有方法 4.从性能角度考虑,非必要不使用闭包 闭包简述 Mozilla 上这样解释闭包:一个函数和对其周围状态(lexical environment,词法环境) 的引用捆绑在一起(或者说函数被引用包围),这样的组合就是闭包(closure). 也就是说,闭包让你可以在一个内层函数中访问到其外层函数的作用域.在 JavaScript 中, 每当创建一个函数, 闭包就会在函数创建的同时

  • 学习JavaScript设计模式之中介者模式

    一.定义 面向对象设计鼓励将行为分布到各个对象中,把对象划分成更小的粒度,有助于增强对象的可复用性.但由于这些细粒度对象之间的联系激增,又可能反过来降低它们的可复用性. 中介者模式的作用就是解除对象与对象之间的紧耦合关系. 二.示例:购买商品 假设我们正在开发一个购买手机的页面,购买流程中,可以选择手机颜色以及输入购买数量,同时页面中可以对应展示输入内容.还有一个按钮动态显示下一步操作(该颜色库存量充足,显示下一步:否则显示库存不足). <div> <span>请选择颜色</

  • 学习JavaScript设计模式之观察者模式

    一.定义 观察者模式(发布-订阅模式):其定义对象间一种一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都将得到通知. 在JavaScript中,一般使用事件模型来替代传统的观察者模式. 好处: (1)可广泛应用于异步编程中,是一种替代传递回调函数的方案. (2)可取代对象之间硬编码的通知机制,一个对象不用再显示地调用另外一个对象的某个接口.两对象轻松解耦. 二.DOM事件–观察者模式典例 需要监控用户点击document.body的动作,但是我们没有办法预知用户将在什么时间点击

随机推荐