我读汤姆大叔的深入理解js(一)
前言
闲来看看javascript,在圆子里发现了汤姆大叔的文章,先是整体瞄了几眼,感觉不错,然后细细研读。记录下自己的学习历程和个人理解。更重要的是作为笔记
高质量JS代码
在看汤姆大叔的这一系列文章之前,写过js代码,但是没有多少理解(虽然现在也只是一个皮毛)。
最小全局变量规则
- js的作用域是通过函数来进行控制。函数内部申明的变量是函数内部使用,函数外不可用。而全局变量是函数外部或函数内部未申明直接使用的。
- 每个js环境都有一个全局对象即window,当你在任意函数外使用this都是指向他。更重要的是开发者创建的全部变量只是该对象的一个属性
全局变量的问题
- 首当其冲的就是冲突,你的js程序和web页面上所有的代码都共享了这些全局变量,在同一全局命名空间不同部分相同全局变量名不同作用,产生冲突然后会让部分代码不能正常执行。
- js隐含全局变量(个人认为这个最容易产生),js的两个特征造就了这一麻烦(个人观点);一是不需申明就可以使用变量,二是隐含全局概念,意味着你不申明的任何变量都会成为全局对象属性。隐式全局变量实例
- function mei(t,s){res=t+s;return res;},这个地方的res就是隐式全局变量。
- function mei(){var a=b=0; },此处a是本地变量,b则是全局变量。
减少全局变量的策略
- 命名空间模式,
- 函数立即自动执行,
- 始终使用var来声明变量(这是最重要的)。
忘记var副作用
- 采用var定义的全局变量是不能被删除,
- 隐式全局变量是window的属性从而也就是可以被删除。
单var形式
- 在函数首部采用单var定义变量,可以给一个整体的变量区域,方便查找
- 防止变量在没用被声明之前使用,而带来不确定的bug(我觉得这个是最重要的)
- 少代码
- 减少隐式全局变量的产生(个人认为)
预解析:var散布的问题
js在中,可以在函数中任何地方声明多个var变量,但是这跟你在函数的首部声明是一样的,这样就是hosting(悬置/置顶解析/预解析)。下面的这个例子可以很好的解释这一作用
myName = "global";//这是全局变量
function func(){
alert(myName);//undefined
var myName = "local";
alert(myName);//local
}
第一个alert之处没有打印global而是打印的undefined,标志局部变量已经定义,而只是没有赋值(能打印undefined就表明局部变量已经覆盖全局变量)。
for与for-in
for中主要强调在循环之前把长度先计算,避免在每次循环的时候进行长度的计算;还有就是页面dom的操作一般都是取得元素数组,如果在for中再进行实时计算,会花费大量的时间。
for中还有就是i++,i--采用i=i+1,i=i-1进行替换,还用采用向下。
for-in中主要讲解了hasOwnProperty对原型链的属性的过滤。
(不)扩展内置原型
增加内置构造函数原型,挺诱人,但可能降低代码的维护性,更有可能让你的代码带来不可预测性;另外可能让你的代码在不使用hasOwnPorperty进行筛选,可能让原型属性暴露出来。
以下我是一些技巧和规范的问题
- 多采用switch
- 避免隐式转换,提倡采用===进行比较,===会先检查比较的两边的数据类型是否是一样,不一样就返回false。减少很多不必要的bug。以下一个实例:var zero=0;if(zero===false){"不执行"};if(zero==false){"执行"}。这种执行的情况产生了隐式转换,可能产生不必要或者是潜在的bug。
- 避免eval();它接受任意的字符串当做js代码来执行。同样的setTimeout(),setInterval(),Function()构造函数传递字符串,要避免。(太随便的都是会有你想不到的)
写在最后
我写东西的初衷是记录我的学习历程,更重要的是作为笔记(强调);所以中间有错或者理解不对的地方,请大家指正。
我读汤姆大叔的深入理解js(一)的更多相关文章
- 我读汤姆大叔的深入理解js(二)
继续汤姆大叔的js之旅. 揭秘命名函数表达式 函数表达式和函数声明 汤姆大叔在博客中引用ECMA规范:函数声明必须带有标识符,函数表达式可以省略.对于我来说这些概念的东西真是不所适从.还是大叔的实例带 ...
- 读汤姆大叔《深入理解javascript系列》笔记一编写高质量代码
感觉大叔的博文真的是很不错 我打算严格要求自己 按照大叔说的,这样我就会更有规范,更有思想的去工作 去写代码(一入代码深似海) 1,尽可能的少用全局变量(污染全局空间,也会和别人的代码 发生冲突造 ...
- 汤姆大叔的6道js题目
汤姆大叔的6道javascript编程题题解 看汤姆大叔的博文,其中有篇(猛戳这里)的最后有6道编程题,于是我也试试,大家都可以先试试. 1.找出数字数组中最大的元素(使用Math.max函数) 1 ...
- 读汤姆大叔《JavaScript变量对象》笔记
一段简单的JavaScript代码思考 先看一段简单的代码,打印结果是??为什么why?? 从上述打印结果不难看出,在打印基本变量num.函数表达式fn.函数声明fun时,就已经知道变量num.函数表 ...
- 根本没有“JSON“对象这回事(读汤姆大叔博文记录)
1.字面量 (1)他们是固定的值,不是变量,让你从“字面上”理解脚本. (2)字符串字面量是由双引号("")或单引号('')包围起来的零个或多个字符串组成的. (3)对象字面量是由 ...
- 学习汤姆大叔《深入理解JavaScript系列》有感(1) —— 立即调用的函数表达式
一. 下面代码用于理解函数的声明和调用. function makeCounter() { // 只能在makeCounter内部访问i var i = 0; return function () { ...
- [转载]深入理解JavaScript系列 --汤姆大叔
深入理解JavaScript系列文章,包括了原创,翻译,转载,整理等各类型文章,如果对你有用,请推荐支持一把,给大叔写作的动力. 深入理解JavaScript系列(1):编写高质量JavaScript ...
- 汤姆大叔 javascript 系列 第20课 最后的5到javascript题目
博客链接:http://www.cnblogs.com/TomXu/archive/2012/02/10/2342098.html 原题: 大叔注:这些题目也是来自出这5个题目的人,当然如果你能答对4 ...
- 你必须知道ASP.NET知识------关于动态注册httpmodule(对不起汤姆大叔)
一.关于动态注册的问题 很多人看过汤姆大叔的MVC之前的那点事儿系列(6):动态注册HttpModule ,其实汤姆大叔没有发现httpmodule动态注册的根本机制在哪里. 亦即:怎么动态注册?为什 ...
随机推荐
- LeetCode "Wiggle Subsequence" !
Another interesting DP. Lesson learnt: how you define state is crucial.. 1. if DP[i] is defined as, ...
- [zz]Maya C++ API Programming Tips
Maya C++ API Programming Tips source : http://wanochoi.com/?page_id=1588 How to handle the multiple ...
- weave 建立跨节点docker网络
weave的工作原理上与利用openvswitch建立vxlan基本一样,都是通过用三层的协议封装二层的报文来进行扩展,weave使用的是udp.weave封装了docker,在操作上为我们隐藏了很多 ...
- CreateIoCompletionPort() 函数
/* ********************* * CreateIoCompletionPort() 函数有两个功能: * 1.创建一个完成端口: * 2.将一个设备与一个存在的完成端口进行绑定,在 ...
- 别人整理的DP大全(转)
动态规划 动态规划 容易: , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , ...
- 高质量C++/C编程指南(林锐)
推荐-高质量C++/C编程指南(林锐) 版本/状态 作者 参与者 起止日期 备注 V 0.9 草稿文件 林锐 2001-7-1至 2001-7-18 林锐起草 V 1.0 正式文件 林锐 20 ...
- messagePaneHost
Microsoft.Dynamics.Framework.UI.WinForms.Controls.MessageBarType messageBarType; super(); imageList ...
- .NET牛人应该知道些什么
任何一个使用.NET的人 1.描述线程与进程的区别? 线程(Thread)与进程(Process)二者都定义了某种边界,不同的是进程定义的是应用程序与应用程序之间的边界,不同的进程之间不能共享代 码和 ...
- 【小错误】Device eth2 has different MAC address than expected, ignoring.
今天在搭建rac配置IP的时候报错显示如下: Device eth2 has different MAC address than expected, ignoring.[FAILED] 百度了下,问 ...
- WEBPACK简介
Webpack 是一个强力的模块打包器. 所谓 包 (bundle) 就是一个 JavaScript 文件,它把一堆 资源 (assets) 合并在一起,以便它们可以在同一个文件请求中发回给客户端. ...