JavaScript基础尽量少使用全局变量(001)
Pattern意思是模式,好的编码习惯经过多次实践的应用就会形成模式,而反模式(Anti-Pattern)则是不好的编码习惯。了解 JavaScript模式之前,先来看看Anti-pattern的例子。Javascript使用函数(function)来管理变量的作用域 (scope)。定义在函数体内部的变量是局部变量,而其它定义在函数体外的变量是全局变量。全局变量在Javascript中通常是不应该使用的。如:
myglobal = "hello"; // antipattern,因为这是个全局变量
console.log(myglobal); // "hello"
console.log(window.myglobal); // "hello"
console.log(window["myglobal"]); // "hello"
console.log(this.myglobal); // "hello"
全局变量的问题有很多。因为全局变量是被页面中所有Javascript代码所共享的,因此很容易导致变量冲突。比如当你使用一些第三方的 Javascript插件,如Jquery,YUI,ExtJS,或你同事写的一小段JS代码;如果这些代码里有一些全局变量与你程序中的全局变量在命名上冲突了,就会导致一些意想不到的情况出现。
但是Javascript是非常灵活的语言,有时候你会在不经意间让你的变量”变成“全局的:
function sum(x, y) {
// antipattern: implied global
result = x + y;
return result;
}
上面的代码里,result在sum函数中第一次出现,但由于声名时没有使用var,所以它是一个implied global,隐式地声名为了一个全局变量。所以每次声名变量,我们应该都使用var关键字,这样做一来可以了解变量是在哪里定义的,二来也保证它不会被隐式声名为全局变量:
function sum(x, y) {
var result = x + y;
return result;
}
另外,我们还应该避免使用连续的声名,在下面的例子里,a是局部变量,而b则是全局的(这和一般人的认知可能会不相同)。
// antipattern, do not use
function foo() {
var a = b = 0; //等同于var a = (b = 0);使得b“变成”了全局变量
// ...
}
所以我们应该这样做:
function foo() {
var a, b;
// ...
a = b = 0; // both local
}
最后,隐式全局变量(不用var声名出来的)和显式全局变量(用var声名出来的)在Javascript中还是有区别的。隐式全局变量其实是全局对象 (Global Object,Javascript中自带的一个对象)的属性,是可以手动删除的,而显式的则不可以删除。看下面的例子:
// define three globals
var global_var = 1; //显式全局
global_novar = 2; // antipattern,隐式全局 (function () {
global_fromfunc = 3; // antipattern,隐式全局
}()); // attempt to delete
delete global_var; // false
delete global_novar; // true
delete global_fromfunc; // true // test the deletion
typeof global_var; // "number"
typeof global_novar; // "undefined"
typeof global_fromfunc; // "undefined"
顺便说一下如何在Javascript里访问全局对象(Global Object):
var global = (function () {
return this;
}());
JavaScript基础尽量少使用全局变量(001)的更多相关文章
- 前端之JavaScript基础
前端之JavaScript基础 本节内容 JS概述 JS基础语法 JS循环控制 ECMA对象 BOM对象 DOM对象 1. JS概述 1.1. javascript历史 1992年Nombas开发出C ...
- 【javascript基础】2、函数
前言 我在上一篇[javascript基础]基本概念中介绍了javascript的一些基本概念,多谢大家的阅读和意见,自己写的东西可以被大家阅读,真心高兴,刚开始发布的时候我一直盯着阅读人数,虽然知道 ...
- 【javascript基础】3、变量和作用域
前言 这篇和大家说一下javascript中的变量和作用域,由于是将基础嘛,主要给大家捋一下知识,不想翻开书复习的道友可以看一下,打算刚开始学习javascript的同学可以扫一眼. PS:jQuer ...
- 第三篇:web之前端之JavaScript基础
前端之JavaScript基础 前端之JavaScript基础 本节内容 JS概述 JS基础语法 JS循环控制 ECMA对象 BOM对象 DOM对象 1. JS概述 1.1. javascript ...
- 前端基础----JavaScript基础
一.JavaScript概述 1,JavaScript的历史 1992年Nombas开发出C-minus-minus(C--)的嵌入式脚本语言(最初绑定在CEnvi软件中).后将其改名ScriptEa ...
- JavaScript基础语法资料
JavaScript基础第01天 1 - 编程语言 1.1 编程 编程: 就是让计算机为解决某个问题而使用某种程序设计语言编写程序代码,并最终得到结果的过程. 计算机程序: 就是计算机所执行的一系列的 ...
- Javascript基础回顾 之(二) 作用域
本来是要继续由浅入深表达式系列最后一篇的,但是最近团队突然就忙起来了,从来没有过的忙!不过喜欢表达式的朋友请放心,已经在写了:) 在工作当中发现大家对Javascript的一些基本原理普遍存在这里或者 ...
- javascript基础部分
javascript基础部分 1 数据类型: 基础数据类型(通过typeof来检测):Number,string,undefined,null,boolean,function typeof只能检测 ...
- 一个简单的、面向对象的javascript基础框架
如果以后公司再能让我独立做一套新的完整系统,那么我肯定会为这个系统再写一个前端框架,那么我到底该如何写这个框架呢? 在我以前的博客里我给大家展示了一个我自己写的框架,由于当时时间很紧张,做之前几乎没有 ...
随机推荐
- Java实现 LeetCode 802 找到最终的安全状态 (DFS)
802. 找到最终的安全状态 在有向图中, 我们从某个节点和每个转向处开始, 沿着图的有向边走. 如果我们到达的节点是终点 (即它没有连出的有向边), 我们停止. 现在, 如果我们最后能走到终点,那么 ...
- Java实现 LeetCode 507 完美数
507. 完美数 对于一个 正整数,如果它和除了它自身以外的所有正因子之和相等,我们称它为"完美数". 给定一个 整数 n, 如果他是完美数,返回 True,否则返回 False ...
- Java实现蓝桥杯方格计数
标题:方格计数 如图p1.png所示,在二维平面上有无数个1x1的小方格. 我们以某个小方格的一个顶点为圆心画一个半径为 50000 的圆. 你能计算出这个圆里有多少个完整的小方格吗? 注意:需要提交 ...
- Java实现 LeetCode 106 从中序与后序遍历序列构造二叉树
106. 从中序与后序遍历序列构造二叉树 根据一棵树的中序遍历与后序遍历构造二叉树. 注意: 你可以假设树中没有重复的元素. 例如,给出 中序遍历 inorder = [9,3,15,20,7] 后序 ...
- Java实现 LeetCode 2 两数相加
两数相加 给出两个 非空 的链表用来表示两个非负的整数.其中,它们各自的位数是按照 逆序 的方式存储的,并且它们的每个节点只能存储 一位 数字. 如果,我们将这两个数相加起来,则会返回一个新的链表来表 ...
- Java 是如何实现跨平台的?
Java 是如何实现跨平台的? 注意:跨平台的是 Java 程序,而不是 JVM.JVM 是用 C/C++ 开发的,是编译后的机器码,不能跨平台,不同平台下需要安装不同版本的 JVM 答:我们编写的 ...
- java实现报数游戏
报数游戏 有n个孩子站成一圈,从第一个孩子开始顺时针方向报数,报到3的人出列,下一个人继续从1报数,直到最后剩下一个孩子为止.问剩下第几个孩子.下面的程序以10个孩子为例,模拟了这个过程,请完善之(提 ...
- Java实现第八届蓝桥杯正则问题
正则问题 考虑一种简单的正则表达式: 只由 x ( ) | 组成的正则表达式. 小明想求出这个正则表达式能接受的最长字符串的长度. 例如 ((xx|xxx)x|(x|xx))xx 能接受的最长字符串是 ...
- (一)c++之细解 const 与 static
const成员变量与const成员函数与const对象 static成员变量与static成员函数与static全局变量 const成员变量 1. const用于类中成员变量时,将类成员变为只读属性( ...
- yum安装配置MySQL数据库
1.配置yum源 # 先安装wget yum install wget -y 2.下载mysql源安装包 wget http://dev.mysql.com/get/mysql57-commu ...