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)的更多相关文章

  1. 前端之JavaScript基础

    前端之JavaScript基础 本节内容 JS概述 JS基础语法 JS循环控制 ECMA对象 BOM对象 DOM对象 1. JS概述 1.1. javascript历史 1992年Nombas开发出C ...

  2. 【javascript基础】2、函数

    前言 我在上一篇[javascript基础]基本概念中介绍了javascript的一些基本概念,多谢大家的阅读和意见,自己写的东西可以被大家阅读,真心高兴,刚开始发布的时候我一直盯着阅读人数,虽然知道 ...

  3. 【javascript基础】3、变量和作用域

    前言 这篇和大家说一下javascript中的变量和作用域,由于是将基础嘛,主要给大家捋一下知识,不想翻开书复习的道友可以看一下,打算刚开始学习javascript的同学可以扫一眼. PS:jQuer ...

  4. 第三篇:web之前端之JavaScript基础

    前端之JavaScript基础   前端之JavaScript基础 本节内容 JS概述 JS基础语法 JS循环控制 ECMA对象 BOM对象 DOM对象 1. JS概述 1.1. javascript ...

  5. 前端基础----JavaScript基础

    一.JavaScript概述 1,JavaScript的历史 1992年Nombas开发出C-minus-minus(C--)的嵌入式脚本语言(最初绑定在CEnvi软件中).后将其改名ScriptEa ...

  6. JavaScript基础语法资料

    JavaScript基础第01天 1 - 编程语言 1.1 编程 编程: 就是让计算机为解决某个问题而使用某种程序设计语言编写程序代码,并最终得到结果的过程. 计算机程序: 就是计算机所执行的一系列的 ...

  7. Javascript基础回顾 之(二) 作用域

    本来是要继续由浅入深表达式系列最后一篇的,但是最近团队突然就忙起来了,从来没有过的忙!不过喜欢表达式的朋友请放心,已经在写了:) 在工作当中发现大家对Javascript的一些基本原理普遍存在这里或者 ...

  8. javascript基础部分

    javascript基础部分 1  数据类型: 基础数据类型(通过typeof来检测):Number,string,undefined,null,boolean,function typeof只能检测 ...

  9. 一个简单的、面向对象的javascript基础框架

    如果以后公司再能让我独立做一套新的完整系统,那么我肯定会为这个系统再写一个前端框架,那么我到底该如何写这个框架呢? 在我以前的博客里我给大家展示了一个我自己写的框架,由于当时时间很紧张,做之前几乎没有 ...

随机推荐

  1. Redis 入门到分布式 (二)API的理解和使用

    个人博客网:https://wushaopei.github.io/    (你想要这里多有) 内容: 通用命令 单线程架构 数据结构和内部编码 一.常用的通用命令: keys       计算所有的 ...

  2. (Java实现) 子集和问题

    回溯算法也叫试探法,它是一种系统地搜索问题的解的方法.回溯算法的基本思想是:从一条路往前走,能进则进,不能进则退回来,换一条路再试.用回溯算法解决问题的一般步骤为: 1.定义一个解空间,它包含问题的解 ...

  3. Java实现 蓝桥杯VIP 算法训练求先序排列

    问题描述 给出一棵二叉树的中序与后序排列.求出它的先序排列.(约定树结点用不同的大写字母表示,长度<=8). 输入格式 两行,每行一个字符串,分别表示中序和后序排列 输出格式 一个字符串,表示所 ...

  4. 【asp.net core 系列】6 实战之 一个项目的完整结构

    0. 前言 在<asp.net core 系列>之前的几篇文章中,我们简单了解了路由.控制器以及视图的关系以及静态资源的引入,让我们对于asp.net core mvc项目有了基本的认识. ...

  5. LNMP zabbix 4.4

    硬件配置需求 环境 平台 CPU/内存 数据库 硬盘 监控主机数 小型 CentOS 2CPU/1GB MySQL.InnoDB 普通 100 中型 CentOS 2CPU/2GB MySQL.Inn ...

  6. 朋友,您可能是MCR的受害者

    2018 年五月之后,微软将后续发布的所有 docker image 都推送到了 MCR (Miscrosoft Container Registry),但在中国大陆,它的速度实在是令人发指,本文将介 ...

  7. Android官方新推的DI库 Hilt

    Android官方新推的DI库 Hilt Hilt是Google Android官方新推荐的依赖注入工具. 已加入到官方文档: Dependency injection with Hilt. 目前是a ...

  8. [转]记一次linux(被)入侵,服务器变矿机~

    0x00 背景 周一早上刚到办公室,就听到同事说有一台服务器登陆不上了,我也没放在心上,继续边吃早点,边看币价是不是又跌了.不一会运维的同事也到了,气喘吁吁的说:我们有台服务器被阿里云冻结了,理由:对 ...

  9. FWT,FST入门

    0.目录 目录 0.目录 1.什么是 FWT 2. FWT 怎么做 2.1. 或卷积 2.2.与卷积 2.3.异或卷积 2.4.例题 3. FST 3.1. FST 怎么做 3.2.例题 1.什么是 ...

  10. Seafile的配置

    如果部署在apache或nginx后面,就是访问默认80或443.反向代理会帮你转到8000和8082上. 我使用443,我在路由器上设定了转发,比如 对外网12323这个端口会转到内网地址443上 ...