跟我学习javascript的全局变量_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的全局变量介绍,希望对大家的学习有所帮助。

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索javascript
全局变量
,以便于您获取更多的相关知识。

时间: 2024-09-24 21:54:51

跟我学习javascript的全局变量_javascript技巧的相关文章

轻松学习Javascript闭包函数_javascript技巧

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

跟我学习javascript的闭包_javascript技巧

JavaScript 闭包究竟是什么? 用JavaScript一年多了,闭包总是让人二丈和尚摸不着头脑.陆陆续续接触了一些闭包的知识,也犯过几次因为不理解闭包导致的错误,一年多了资料也看了一些,但还是不是非常明白,最近偶然看了一下 jQuery基础教程 的附录,发现附录A对JavaScript的闭包的介绍简单易懂,于是借花献佛总结一下. 1.定义 闭包:是指有权访问另外一个函数作用域中的变量的函数.创建闭包的常见方式就是在一个函数内部创建另外一个函数. 直接上例子 function a(){ v

学习JavaScript设计模式(封装)_javascript技巧

在JavaScript 中,并没有对抽象类和接口的支持.JavaScript 本身也是一门弱类型语言.在封装类型方面,JavaScript 没有能力,也没有必要做得更多.对于JavaScript 的设计模式实现来说,不区分类型是一种失色,也可以说是一种解脱. 从设计模式的角度出发,封装在更重要的层面体现为封装变化. 通过封装变化的方式,把系统中稳定不变的部分和容易变化的部分隔离开来,在系统的演变过程中,我们只需要替换那些容易变化的部分,如果这些部分是已经封装好的,替换起来也相对容易.这可以最大程

学习JavaScript设计模式(接口)_javascript技巧

1.接口概述 1).什么是接口? 接口是提供了一种用以说明一个对象应该具有哪些方法的手段.尽管它可以表明这些方法的语义,但它并不规定这些方法应该如何实现. 2). 接口之利 促进代码的重用. 接口可以告诉程序员一个类实现了哪些方法,从而帮助其使用这个类. 有助于稳定不同类之前的通信方式. 测试和调式因此也能变得更轻松. 在javascript这种弱类型语言中,类型不匹配错误很难跟踪.使用接口可以让这种错误的查找变午更容易一点,因为此时如果一个对象不像所要求的类型,或者没有实现必要的方法,那么你会

学习JavaScript设计模式(继承)_javascript技巧

1.继承 在javascript中继承是一个非常复杂的话题,比其他任何面向对象语言的中的继承都复杂得多.在大多数其他面向对象语言中,继承一个类只需要使用一个关键字即可.与它们不同,在javascript中要想达到传承公用成员的目的,需要采取一系列措施.更有甚者,javascript属于使用原型式继承的少数语言之一.利益于这种语言的灵活性,你既可使用标准的基于类的继承,也可使用更微妙一些的原型式继承. 2.为什么需要继承? 一般来说,在设计类的时候,我们希望能减少重复性的代码,并且尽量弱化对象间的

跟我学习javascript的循环_javascript技巧

1.优先使用数组而不是Object类型来表示有顺序的集合 ECMAScript标准并没有规定对JavaScript的Object类型中的属性的存储顺序. 但是在使用for..in循环对Object中的属性进行遍历的时候,确实是需要依赖于某种顺序的.正因为ECMAScript没有对这个顺序进行明确地规范,所以每个JavaScript执行引擎都能够根据自身的特点进行实现,那么在不同的执行环境中就不能保证for..in循环的行为一致性了. 比如,以下代码在调用report方法时的结果就是不确定的: f

学习JavaScript设计模式(单例模式)_javascript技巧

单例模式的定义:保证一个类仅有一个实例,并提供一个访问它的全局访问点. 单例模式是一种常用的模式,有一些对象我们往往只需要一个,比如线程池.全局缓存.浏览器的window对象.在js开发中,单例模式的用途同样非常广泛.试想一下,当我们单击登录按钮的时候,页面中会出现一个登录框,而这个浮窗是唯一的,无论单击多少次登录按钮,这个浮窗只会被创建一次.因此这个登录浮窗就适合用单例模式. 1.单例模式的使用场景 在使用一种模式之前,我们最好要知道,这种模式的使用场景.用了这么久的单例模式,竟全然不知!用它

JavaScript学习笔记之创建对象_javascript技巧

JavaScript 有Date.Array.String等这样的内置对象,功能强大使用简单,人见人爱,但在处理一些复杂的逻辑的时候,内置对象就很无力了,往往需要开发者自定义对象. 从JavaScript定义上讲对象是无序属性的集合,其属性可以包含基本值.对象或函数.也就是说对象是一组没有特定顺序的属性,每个属性会映射到一个值上,是一组键值对,值可以是数据或对象. 对象是JavaScript的基本数据类型.在JavaScript中除了字符串.数字.true.false.null和undefine

JavaScript 函数调用规则_javascript技巧

JavaScript函数调用规则一 (1)全局函数调用: function makeArray( arg1, arg2 ){ return [this , arg1 , arg2 ]; } 这是一个最常用的定义函数方式.相信学习JavaScript的人对它的调用并不陌生. 调用代码如下: makeArray('one', 'two'); // => [ window, 'one', 'two' ] 这种方式可以说是全局的函数调用. 为什么说是全局的函数? 因为它是全局对象window 的一个方法