汤姆大叔博客笔记【随时更新】

1、忘记var的副作用(Side Effects When Forgetting var)

隐式全局变量和明确定义的全局变量间有些小的差异,就是通过delete操作符让变量未定义的能力。

  • 通过var创建的全局变量(任何函数之外的程序中创建)是不能被删除的。
  • 无var创建的隐式全局变量(无视是否在函数中创建)是能被删除的。

这表明,在技术上,隐式全局变量并不是真正的全局变量,但它们是全局对象的属性。属性是可以通过delete操作符删除的,而变量是不能的:

// 定义三个全局变量
var global_var = 1;
global_novar = 2; // 反面教材
(function () {
   global_fromfunc = 3; // 反面教材
}());

// 试图删除
delete global_var; // false
delete global_novar; // true
delete global_fromfunc; // true

// 测试该删除
typeof global_var; // "number"
typeof global_novar; // "undefined"
typeof global_fromfunc; // "undefined"

2、预解析:var散布的问题(Hoisting: A Problem with Scattered vars)

// 反例
myname = "global"; // 全局变量
function func() {
    alert(myname); // "undefined"
    var myname = "local";
    alert(myname); // "local"
}
func();
//等价于下面这段代码
myname = "global"; // global variable
function func() {
   var myname; // 等同于 -> var myname = undefined;
   alert(myname); // "undefined"
   myname = "local";
   alert(myname); // "local"}
func();

for-in循环(for-in Loops)

for-in循环应该用在非数组对象的遍历上,使用for-in进行循环也被称为“枚举”。

从技术上将,你可以使用for-in循环数组(因为JavaScript中数组也是对象),但这是不推荐的。因为如果数组对象已被自定义的功能增强,就可能发生逻辑错误。另外,在for-in中,属性列表的顺序(序列)是不能保证的。所以最好数组使用正常的for循环,对象使用for-in循环。

有个很重要的hasOwnProperty()方法,当遍历对象属性的时候可以过滤掉从原型链上下来的属性。

for (var i in man) {
   if (man.hasOwnProperty(i)) { // 过滤原型属性或方法
      console.log(i, ":", man[i]);
   }
}

// 反面例子:
// for-in loop without checking hasOwnProperty()
for (var i in man) {
   console.log(i, ":", man[i]);
}

另外一种使用hasOwnProperty()的形式是取消Object.prototype上的方法。像是:

for (var i in man) {
   if (Object.prototype.hasOwnProperty.call(man, i)) { // 过滤
      console.log(i, ":", man[i]);
   }
}

其好处在于在man对象重新定义hasOwnProperty情况下避免命名冲突。也避免了长属性查找对象的所有方法,你可以使用局部变量“缓存”它。

var i, hasOwn = Object.prototype.hasOwnProperty;
for (i in man) {
    if (hasOwn.call(man, i)) { // 过滤
        console.log(i, ":", man[i]);
    }
}

严格来说,不使用hasOwnProperty()并不是一个错误。根据任务以及你对代码的自信程度,你可以跳过它以提高些许的循环速度。但是当你对当前对象内容(和其原型链)不确定的时候,添加hasOwnProperty()更加保险些。

格式化的变化(通不过JSLint)会直接忽略掉花括号,把if语句放到同一行上。其优点在于循环语句读起来就像一个完整的想法(每个元素都有一个自己的属性”X”,使用”X”干点什么):

// 警告: 通不过JSLint检测
var i, hasOwn = Object.prototype.hasOwnProperty;
for (i in man) if (hasOwn.call(man, i)) { // 过滤
    console.log(i, ":", man[i]);
}

(不)扩展内置原型((Not) Augmenting Built-in Prototypes)

扩增构造函数的prototype属性是个很强大的增加功能的方法,但有时候它太强大了。

增加内置的构造函数原型(如Object(), Array(), 或Function())挺诱人的,但是这严重降低了可维护性,因为它让你的代码变得难以预测。使用你代码的其他开发人员很可能更期望使用内置的 JavaScript方法来持续不断地工作,而不是你另加的方法。

另外,属性添加到原型中,可能会导致不使用hasOwnProperty属性时在循环中显示出来,这会造成混乱。

因此,不增加内置原型是最好的。你可以指定一个规则,仅当下面的条件均满足时例外:

  • 可以预期将来的ECMAScript版本或是JavaScript实现将一直将此功能当作内置方法来实现。例如,你可以添加ECMAScript 5中描述的方法,一直到各个浏览器都迎头赶上。这种情况下,你只是提前定义了有用的方法。
  • 如果您检查您的自定义属性或方法已不存在——也许已经在代码的其他地方实现或已经是你支持的浏览器JavaScript引擎部分。
  • 你清楚地文档记录并和团队交流了变化。

如果这三个条件得到满足,你可以给原型进行自定义的添加,形式如下:

if (typeof Object.protoype.myMethod !== "function") {
   Object.protoype.myMethod = function () {
      // 实现...
   };
}
 
时间: 2024-07-29 03:39:30

汤姆大叔博客笔记【随时更新】的相关文章

汤姆大叔 javascript 系列 第20课 最后的5到javascript题目

博客链接:http://www.cnblogs.com/TomXu/archive/2012/02/10/2342098.html 原题: 大叔注:这些题目也是来自出这5个题目的人,当然如果你能答对4个及以上并且想拿高工资的话,请联系我. 找出数字数组中最大的元素(使用Match.max函数) 转化一个数字数组为function数组(每个function都弹出相应的数字) 给object数组进行排序(排序条件是每个元素对象的属性个数) 利用JavaScript打印出Fibonacci数(不使用全

汤姆大叔的博客-menu

1.汤姆大叔的博客http://www.cnblogs.com/tomxu/archive/2011/12/15/2288411.html 关键字:技术,管理,英文,吃喝玩乐,健身,慎独 2.menu 如何编写高质量的js代码例如避免全局变量,使用单变量声明,在循环中预缓存length(长度),遵循代码阅读可维护的代码意味着:可读的,一致的,可预测的,看上去就像是同一个人写的,已记录命名函数表达式的秘密 书写可维护的代码,这关系到底线(营业收入)和开发人员的幸福解决bug=1.花时间理解这个问题

javascript - 浏览TOM大叔博客的学习笔记

part1 --------------------------------------------------------------------------------------------------------- 1. 前言 这两天看了一下TOM大叔的<深入理解js系列>中的基础部分,根据自己的实际情况,做了读书笔记,记录了部分容易绊脚的问题.写篇文章,供大家分享. 2. 关于HTMLCollection的"实时查询" var divs = document.ge

js便签笔记(12)——浏览TOM大叔博客的学习笔记 part2

1. 前言 昨天写了<js便签笔记(11)——浏览TOM大叔博客的学习笔记 part1>,简单记录了几个问题.part1的重点还是在于最后那个循环创建函数的问题,也就是多个子函数公用一个闭包数据的问题.如果觉得有兴趣,可以再重新翻出来看看. 今天继续把剩下的问题写完. 2. 作用域链 学js的人,即使初级入门的也都知道“原型链”,但是“作用域链”,可能好多人没有听说过.大部分人都知道或者听说过“闭包”,但是可能有好多人不知道闭包其实和作用域链有莫大的联系.如果理解闭包不从作用域链开始理解,那么

我读汤姆大叔的深入理解js(二)

继续汤姆大叔的js之旅. 揭秘命名函数表达式 函数表达式和函数声明 汤姆大叔在博客中引用ECMA规范:函数声明必须带有标识符,函数表达式可以省略.对于我来说这些概念的东西真是不所适从.还是大叔的实例带劲.上实例如下: function foo(){};//鬼都知道是声明 var bar = function foo(){};//鬼也知道是表达式 new function bar(){}; (function() { function bar(){};//这也是声明 })();这些大家看看应该都很

看了汤姆大叔的“你真懂JavaScript吗?”的一些感慨

看了汤姆大叔的“你真懂JavaScript吗?”,里面有5道题目,我都一一作了,然后在chrome的控制台里面运行了一遍,虽然只错了一道,但还是细细读了下答案,在此总结一下,看看是否对大家对这些JavaScript底层的原理都懂了. 题目一(所有全局变量都是window的属性.变量声明提前.变量赋值不会提前) if (!("a" in window)) { var a = 1; } alert(a); 因为在JavaScript在变量声明提前的特性,所以事实上上述代码相当于下面所示:

BIT祝威博客汇总(即时更新)

目测我已经写了好几十篇博文,再这样下去就不好找了.因此将此汇总帖置顶,并即时更新,以方便查找(Ctrl+F即可). 带有“”是我觉得可以见人的,推荐大家(也包括我)没事看看,温故知新. 关于硬件 <穿越计算机的迷雾>笔记 继电器是如何成为CPU的(1) 继电器是如何成为CPU的(2) 关于操作系统 <30天自制操作系统>笔记(01)——hello bitzhuwei’s OS! <30天自制操作系统>笔记(02)——导入C语言 <30天自制操作系统>笔记(0

深入理解JavaScript系列 --汤姆大叔

深入理解JavaScript系列文章,包括了原创,翻译,转载,整理等各类型文章,如果对你有用,请推荐支持一把,给大叔写作的动力. 深入理解JavaScript系列(1):编写高质量JavaScript代码的基本要点 深入理解JavaScript系列(2):揭秘命名函数表达式 深入理解JavaScript系列(3):全面解析Module模式 深入理解JavaScript系列(4):立即调用的函数表达式 深入理解JavaScript系列(5):强大的原型和原型链 深入理解JavaScript系列(6

汤姆大叔的6道js题目

汤姆大叔的6道javascript编程题题解 看汤姆大叔的博文,其中有篇(猛戳这里)的最后有6道编程题,于是我也试试,大家都可以先试试. 1.找出数字数组中最大的元素(使用Math.max函数) 1 2 3 var a = [1, 2, 3, 6, 5, 4]; var ans = Math.max.apply(null, a); console.log(ans);  // 6 这题很巧妙地用了apply,如果不是数组,是很多数字求最大值,我们知道可以这样: 1 2 var ans = Math