javascript实战技能提要

封装模式

通常，我们会尽量减少使用全局变量，除非必要。由于js变量作用范围是函数作用域而非块作用域。因此我们可以通过立即执行匿名函数（即:(function(){})()）只对外暴露组件的方法名，避免变量冲突和污染全局。

(function() {
    var formatNumber = function(num) {
        return num.toFixed(2);
    };

    window.toFixedTwo = formatNumber;

})();

console.log(formatNumber)     // => undefined

console.log(toFixedTwo(10));    // => 10.00

对象类型检测

当检测一个对象的类型，强烈推荐用 Object.prototype.toString 方法；因为这是唯一一个可依赖的方式。typeof 的一些返回值在标准文档中并未定义，因此不同的引擎实现可能不同。除非为了检测一个变量是否已经定义，我们应尽量避免使用 typeof 操作符。

console.log(typeof "yunmo");  //string

console.log(typeof 1);  //number

console.log(typeof undefined);  //undefined

console.log(typeof null);  //object

console.log(typeof {});  //object

console.log(typeof []);  //object

console.log(typeof true);  //boolean

console.log(typeof function() {});  //function


console.log(Object.prototype.toString.call("yunmo"));  //[object String]

console.log(Object.prototype.toString.call(1));  //[object Number]

console.log(Object.prototype.toString.call(undefined));  //[object Undefined]

console.log(Object.prototype.toString.call(null));  //[object Null]

console.log(Object.prototype.toString.call({}));  //[object Object]

console.log(Object.prototype.toString.call([]));  //[object Array]

console.log(Object.prototype.toString.call(true));  //[object Boolean]

console.log(Object.prototype.toString.call(function() {}));  //[object Function]

对于js中的toString()方法，当调用类型是Array, RegExp, Date, Number，这个方法是被重写过的。

({name:'yunmo',age:18,place:'China'}).toString();  //"[object Object]"

['yun','mo'].toString();  //"yun,mo"

1..toString();  //"1" ;  (1).toString();

此外，instanceof 操作符用来比较两个操作数的构造函数。只有在比较自定义的对象时才有意义。如果用来比较内置类型，将会和 typeof 操作符一样用处不大。instanceof 操作符应该仅仅用来比较来自同一个 JavaScript 上下文的自定义对象。正如 typeof 操作符一样，任何其它的用法都应该是避免的。

对象遍历与Object.keys()

The Object.keys() method returns an array of a given object's own enumerable properties, in the same order as that provided by a for...in loop (the difference being that a for-in loop enumerates properties in the prototype chain as well).

译：Object.keys()方法返回给定对象自有的可枚举属性，返回的属性名顺序和使用for...in循环相同（区别在于for...in枚举的包括该对象原型链上的属性）

Object.keys()和使用for...in + hasOwnProperty达到同样效果。在进行属性遍历的时候，总是推荐这两种方式，避免原型链查找这种耗时过程，优化性能。hasOwnProperty 是 JavaScript 中唯一一个处理属性但是不查找原型链的函数

var array = [1,2,3];

console.log(Object.keys(array));    //["0", "1", "2"]

console.log(Object.getOwnPropertyNames(array));    //["0", "1", "2", "length"]

var object = {name:'yunmo',age:18,place:'China'};

console.log(Object.keys(object));    //["name", "age", "place"]

console.log(Object.getOwnPropertyNames(object));    //["name", "age", "place"]

for(var i in object) {
    if(object.hasOwnProperty(i)) {
        console.log(i, ' '+ object[i]);
    }
}

兼容性：IE9及以上

对象创建

JavaScript可以通过字面量来构造对象，比如通过[]构造一个数组，{}构造一个对象，/regexp/构造一个正则表达式，我们应当尽力使用字面量来构造对象，因为字面量是引擎直接解释执行的，而如果使用构造函数的话，需要调用一个内部构造器，所以字面量略微要快一点点。

综合实例

 var taskHandler = (function () {

     //code goes here.....

     return {
         prepare: function () {
             console.log('prepare');
         },

         analyse: function () {
            console.log('analyse');
         },

         work: function () {
            console.log('work');
          },

         finishingTouch: function () {
            console.log('finishingTouch');
         },

         init: function () {
             this.prepare();
             this.analyse();
             this.work();
             this.finishingTouch();
             window.work = this.work;
         }
     }
  })();

 taskHandler.init();
 work();

javascript实战技能提要

推荐阅读更多精彩内容