本文給大家記錄的是個人在使用$.extend 的時候遇到的一個小問題，以及原因分析和解決方案，十分的實用，有需要的小伙伴可以參考下。
最近一直在搞移動端，也由於自己對jQuery比較熟悉，再加上Zepto提供了跟jQuery一樣的API，所以就選擇了Zepto作為開發框架。
由於是移動端開發，所以也應用了一些ES5新增的API，比如forEach，下面就是我寫的代碼的一些示例：
?
1
2
3list.forEach(function(v) {
return !!v;
})
我天真的以為forEach就跟jQuery的each一樣，只要我的返回值為false，它就會中斷循環，於是，類似這樣的遍歷代碼寫了不少(真的是懶得為每個遍歷去聲明變量啊)
寫了一段時間之後我突然發現，forEach的回調函數並不能中斷循環，於是，我便在Array.prototype上面掛了個函數，然後replaceAll，完美。
?
1
2
3
4
5
6
7
8
9
10Array.prototype.foreach = function(fn) {
var i = 0, len = this.length;
for (; i < len; ++i) {
if (fn(this[i], i) === false) {
break;
}
}
};
直到有一天，我想做點優化，考慮到客戶端需要保存的json過大(沒騙你，最大可以去到20M)，stringify的時候太過耗時，會阻塞UI，所以我就用Worker在後台開個線程，專門用來stringify這個json，類似於這樣子：
復制代碼 代碼如下:
addEventListener("message", function(e) {
var data = e.data;
data = JSON.stringify(data);
postMessage(data);
}, false);
posMesage：
復制代碼 代碼如下:
worker.postMessage(data)
但是控制台卻輸出了以下的錯誤信息：
復制代碼 代碼如下:
Uncaught DataCloneError: Failed to execute 'postMessage' on 'Worker': An object could not be cloned.
坑爹，這天殺的為什麼連個json都復制不了，於是乎，我開始尋找原因，讓我發現了我的json裡面有這個東西：
天啊，這是什麼鬼，這個foreach為什麼跑進來了，我看了一下編輯器裡面的$.extend(true, {}, obj)正在那裡瑟瑟發抖，我不禁懷疑，不會是你丫的在作怪吧。於是乎，我查看了一下$.extend的源碼：
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23function extend(target, source, deep) {
for (key in source)
if (deep && (isPlainObject(source[key]) || isArray(source[key]))) {
if (isPlainObject(source[key]) && !isPlainObject(target[key]))
target[key] = {}
if (isArray(source[key]) && !isArray(target[key]))
target[key] = []
extend(target[key], source[key], deep)
}
else if (source[key] !== undefined) target[key] = source[key]
}
// Copy all but undefined properties from one or more
// objects to the `target` object.
$.extend = function(target){
var deep, args = slice.call(arguments, 1)
if (typeof target == 'boolean') {
deep = target
target = args.shift()
}
args.forEach(function(arg){ extend(target, arg, deep) })
return target
}
我的天啊，還真是這貨在作怪啊，遍歷數組用for...in..也就算了，但是 else if (source[key] !== undefined) target[key] = source[key] 這裡的條件能不能嚴肅點啊，加個hasOwnProperty檢查一下不會浪費多少時間吧。淚流滿面
被Zepto坑了之後，我立馬去找jQuery投訴，希望它能安慰我一下，沒想到：
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63jQuery.extend = jQuery.fn.extend = function() {
var options, name, src, copy, copyIsArray, clone,
target = arguments[0] || {},
i = 1,
length = arguments.length,
deep = false;
// Handle a deep copy situation
if ( typeof target === "boolean" ) {
deep = target;
target = arguments[1] || {};
// skip the boolean and the target
i = 2;
}
// Handle case when target is a string or something (possible in deep copy)
if ( typeof target !== "object" && !jQuery.isFunction(target) ) {
target = {};
}
// extend jQuery itself if only one argument is passed
if ( length === i ) {
target = this;
--i;
}
for ( ; i < length; i++ ) {
// Only deal with non-null/undefined values
if ( (options = arguments[ i ]) != null ) {
// Extend the base object
for ( name in options ) {
src = target[ name ];
copy = options[ name ];
// Prevent never-ending loop
if ( target === copy ) {
continue;
}
// Recurse if we're merging plain objects or arrays
if ( deep && copy && ( jQuery.isPlainObject(copy) || (copyIsArray = jQuery.isArray(copy)) ) ) {
if ( copyIsArray ) {
copyIsArray = false;
clone = src && jQuery.isArray(src) ? src : [];
} else {
clone = src && jQuery.isPlainObject(src) ? src : {};
}
// Never move original objects, clone them
target[ name ] = jQuery.extend( deep, clone, copy );
// Don't bring in undefined values
} else if ( copy !== undefined ) {
target[ name ] = copy;
}
}
}
}
// Return the modified object
return target;
};
這貨也是 else if ( copy !== undefined ) {target[ name ] = copy;} 就交代了，我的親娘啊。
最後迫不得已，只得自己寫了一個。
總結：當你要使用$.extend的時候，不要輕易在Array.prototype和Object.prototype掛上你自定義的屬性和方法，不然，你以後可能要去找bug了。
以上所述就是本文的全部內容了，希望大家能夠喜歡。
