JavaScript学习笔记之应用技巧(转载)

1. 闭包（closure）
   闭包指的是函数内的局部变量，当函数返回时此变量依然可用。
   当你在函数内部定义另外一个函数时，你就创建了一个闭包，一个著名的例子：
   

   view source

   print?

   1	function add(i) {

   2	return function() {

   3	return ++i;

   4

   };

   5

   }

   6	add(2).toString(); // "function () { return ++i; }"

   7	add(2)(); // 3

   add(2)是一个函数，它可能获取外部函数的局部变量i。
   参考文章
   
   
   
2. 私有变量
   我们经常使用命名规范来标示一个变量是否为私有变量（最常用来标示）：
   view source

   print?

   1	var person = {

   2	_name: '',

   3	getName: function() {

   4	return this._name || 'not defined';

   5

   }

   6

   };

   7	person.getName(); // "not defined"

   下划线前缀用来作为私有变量的约定，但是其他开发人员仍然可以调用此私有变量：
   view source

   print?

   1	person._name; // ""

   那么，如何在JavaScript中创建一个真正的私有变量呢？
   主要技巧是使用匿名函数（anonymous function）和闭包（closure）。
   view source

   print?

   01	var person = {};

   02	(function() {

   03	var _name = '';

   04	person.getName = function() {

   05	return _name || 'not defined';

   06

   }

   07

   })();

   08

   09	person.getName(); // "not defined"

   10	typeof(person._name); // "undefined"

   
   
   
3. JavaScript没有块级上下文（Scope）
   JavaScript中块级代码没有上下文，实际上只有函数有自己的上下文。
   view source

   print?

   1	for(var i = 0; i < 2; i ++) {

   2

   3

   }

   4

   i;  // 2

   如果想创建一个上下文，可以使用自执行的匿名函数：
   view source

   print?

   1	(function (){

   2	for(var i = 0; i < 2; i ++) {

   3

   4

   }

   5

   })();

   6	typeof(i) === 'undefined';  // true

   
   
   
4. 怪异的NaN
   NaN用来表示一个值不是数字。
   NaN在JavaScript中行为很怪异，是因为那NaN和任何值都不相等（包括它自己）。
   view source

   print?

   1	NaN === NaN; // false

   因为下面的代码可能会让一些人抓狂：
   view source

   print?

   1	parseInt('hello', 10); // NaN

   2	parseInt('hello', 10) == NaN; // false

   3	parseInt('hello', 10) === NaN; // false

   那么如何来检查一个值是否NaN?
   可以使用window.isNaN来判断：
   view source

   print?

   1	isNaN(parseInt('hello', 10)); // true

   
   
   
5. 真值和假值
   JavaScript中所有值都能隐式地转化为Boolean类型。
   在条件判断中，下面这些值会自动转化为false：
   null, undefined, NaN, 0, ‘’, false
   因此，不需要做如下复杂的判断:
   view source

   print?

   1	if(obj === undefined || obj === null) {

   2

   }

   而只需要这样做就行了：
   view source

   print?

   1	if(!obj) {

   2

   3

   }

   
   
   
6. 修改arguments
   比如，添加一个值到arguments中：
   view source

   print?

   1	function add() {

   2	arguments.push('new value');

   3

   }

   4	add(); // error - arguments.push is not a function

   这样会出错，因为arguments不是一个真正的数组，没有push方法。
   解决办法：
   view source

   print?

   1	function add() {

   2	Array.prototype.push.call(arguments, 'new value');

   3	return arguments;

   4

   }

   5	add()[0]; // "new value"

   
   
   
7. Boolean 和 new Boolean
   我们可以把Boolean看做是一个函数，用来产生Boolean类型的值（Literal）：
   view source

   print?

   1	Boolean(false) === false; // true

   2	Boolean('') === false; // true

   所以，Boolean(0)和!!0是等价的。
   我们也可以把Boolean看做是一个构造函数，通过new来创建一个Boolean类型的对象：
   view source

   print?

   1	new Boolean(false) === false; // false

   2	new Boolean(false) == false; // true

   3	typeof(new Boolean(false)); // "object"

   4	typeof(Boolean(false)); // "boolean"

   
   
   
8. 快速字符串连接
   我们经常使用+将较短的字符串连接为一个长字符串，这在大部分的情况下是没问题的。
   但是如果有大量的字符串需要连接，这种做法将会遇到性能问题，尤其是在IE下。
   
   view source

   print?

   1	var startTime = new Date();

   2	var str = '';

   3	for (var i = 0; i < 50000; i++) {

   4

   str += i;

   5

   }

   6	alert(new Date() - startTime);  // Firefox - 18ms, IE7 - 2060ms

   view source

   print?

   1	var startTime = new Date();

   2	var arr = [];

   3	for (var i = 0; i < 100000; i++) {

   4	arr.push(i);

   5

   }

   6	var str = arr.join("");

   7	alert(new Date() - startTime); // Firefox - 38ms, IE7 - 280ms

   
   可以看到Firefox似乎对+操作符进行了优化，而IE则表现的傻乎乎的。