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基础框架
如果以后公司再能让我独立做一套新的完整系统,那么我肯定会为这个系统再写一个前端框架,那么我到底该如何写这个框架呢? 在我以前的博客里我给大家展示了一个我自己写的框架,由于当时时间很紧张,做之前几乎没有 ...
随机推荐
- api.versioning 版本控制 自动识别最高版本
Microsoft.AspNetCore.Mvc.Versioning //引入程序集 .net core 下面api的版本控制作用不需要多说,可以查阅https://www.cnblogs.com/ ...
- 使用turtle库绘制奥运五环
import turtle as t t.setup(600,600,50,50) t.pensize(3) t.pencolor("red") t.penup() t.pendo ...
- (Java实现) 组合的输出
问题 B: [递归入门]组合的输出 时间限制: 1 Sec 内存限制: 128 MB 题目描述 排列与组合是常用的数学方法,其中组合就是从n个元素中抽出r个元素(不分顺序且r < = n),我们 ...
- Java实现 蓝桥杯 算法提高 三角形
算法提高 12-1三角形 时间限制:1.0s 内存限制:256.0MB 提交此题 问题描述 为二维空间中的点设计一个结构体,在此基础上为三角形设计一个结构体.分别设计独立的函数计算三角形的周长.面积. ...
- Java实现 蓝桥杯VIP 算法提高 快速幂
算法提高 快速幂 时间限制:1.0s 内存限制:256.0MB 问题描述 给定A, B, P,求(A^B) mod P. 输入格式 输入共一行. 第一行有三个数,N, M, P. 输出格式 输出共一行 ...
- Java实现蓝桥杯历届试题区间移位
问题描述 数轴上有n个闭区间D1,-,Dn.其中区间Di用一对整数[ai, bi]来描述,满足ai < bi.已知这些区间的长度之和至少有10000.所以,通过适当的移动这些区间,你总可以使得他 ...
- Java实现字符串匹配
1 问题描述 给定一个n个字符组成的串(称为文本),一个m(m <= n)的串(称为模式),从文本中寻找匹配模式的子串. 2 解决方案 2.1 蛮力法 package com.liuzhen.c ...
- 纯正中文版本pi-star系统下载
基于3.4.17修改(稳定,发热量少) 不支持RPI 4 a/b+ 完美支持树莓派0,1,2,3 默认刷好卡,启动已经设置好所有参数(选好TFT屏幕,调制解调器类型GPIO,打开了DMR服务器(460 ...
- [OpenGL](翻译+补充)投影矩阵的推导
1.简介 基本是翻译和补充 http://www.songho.ca/opengl/gl_projectionmatrix.html 计算机显示器是一个2D的平面,一个3D的场景要被OpenGL渲染必 ...
- ubuntu下Vivado launch SDK后,SDK无菜单栏解决办法
最近在调Xilinx的ZYNQ 7015,按照教程从Vivado中Launch SDK后遇到了个问题,SDK的菜单栏消失了,真的没了,我的环境是ubuntu 16.4.百度好久都没有人遇到该问题,经过 ...