封装模式
通常,我们会尽量减少使用全局变量,除非必要。由于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();