JavaScript-Tips

[imsobear]

1. 扩展内置对象的原型时：

一般情况，尽量不要打猴子补丁，如有需要，最好按照下面的格式：

//Object可以是Array String Object Function等
if(typeof Object.prototype.method !== "undefined") {
  Object.prototype.method = function() {
    //方法代码
  }
}

2. 当以new操作符调用构造函数时，发生了：

• 创建一个空对象并且this变量引用了该对象，同时还继承了该函数的原型。
• 属性和方法被加入到this引用的对象中。
• 新创建的对象由this所引用，并且最后隐式的返回this(如果没有显示的返回其他对象)。

当调用构造函数时未使用new操作符，会导致this指向错误（全局对象），在ES5的严格模式下，this不会指向全局对象。

3. 判断对象类型：

function isArray(obj) {
  return Object.prototype.toString.call(obj) ==== "[object Array]";
}

function isString(obj) {
  return Object.prototype.toString.call(obj) ==== "[object String]"; 
}
//其他对象同理
function classOf (obj) {
    if (obj === null) return 'Null';
    if (obj === undefined) return 'Undefined';
    return Object.prototype.toString.call(obj).slice(8, -1);
}

4. 小tips:

• 将数字转换为字符串：n + "" // 也可以用 String(n) Number.toString()
• 将字符传转换为数字： str - 0 // 也可以用 Number(str)，前面的都比较严格，无法转换“123abc”这种的，这时候可以用 parseInt() 或 parseFloat()
• null 在布尔环境中转换为 false，在数字环境转换为0，在字符串环境中转换为"null"。
• undefined: 未声明的变量；已声明但未赋值的变量；不存在的对象属性。用于布尔环境时转换为 false，用于数字环境时转换为 NaN，用于字符串环境时，转换为 "undefined"。

5. Object.create():

ES5 定义了Obejct.create()这个方法，它创建一个新对象，其中第一个参数是这个对象的原型。
可以通过传入 null 参数来创建一个没有原型的对性，如 var obj = Object.create(null); , obj 没有继承任何东西，也不包括任何基础方法。

在ES3中封装这个方法：

function inherit (p) {
    if (Object.create) {
        return Object.create(p);
    }
    var type = typeof p;
    if (type !== 'object' && type !== 'function') {
        return false;
    }
    var f = function () {};
    f.prototype = p;
    return new f();
}

var obj = inherit(obj1);

6. mixin obj1 and obj2:

经常要用到一个方法就是把obj2(用户自定义的配置) 与 obj1(默认配置) 进行合并，并在属性名同名的情况下将 obj1 的属性覆盖，看代码：

function mixin(obj1, obj2) {
    for (o in obj2) {
        obj1[o] = obj2[o];
    }
    return obj1;
}

var a = {a: 1, b: 2},
     b = {a: 1, b: 4, c: 5};

console.log(mixin(a, b));

7. 定义 ES5 中的 map 方法：

var map = Array.prototype.map
          ? function (a, f) { return a.map(f); }
          : function (a, f) {
                var resualts = [];
                for (var i = 0, l = a.length; i < l; i++) {
                    if (i in a) {
                        resualts[i] = f.call(null, a[i], i, a);
                    }
                }
                return resualts;
          };

[imsobear]

ES5 对数组的扩展

ES5 定义了判断某个值是否为数组的方法：Array.isArray(value)

ES5 为数组定义了5个迭代方法：
every: 对数组的每一项运行给定函数，如果每一项都返回true，则最终返回true；
filter: ...返回该函数返回true的项组成的数组；
forEach: ...没有返回值；
map: ...返回每次函数调用的结果组成的数组；
some: ...如果该函数对任一项返回true，则返回true。

var numbers = [1, 2, 4, 5];

// false
numbers.every(function (item, index, array) {
  return item < 6;
});

[imsobear]

1. var $ = document.querySelector?

var $ = document.querySelectorAll.bind(document);

// 或者

function $ (selector) {
  return  document.querySelectorAll(selector);
}

参考Making a short alias for document.querySelectorAll

3. 其他：

• How to create a GUID / UUID in Javascript?
• How do I scroll a row of a table into view (element.scrollintoView) using jQuery?