击上方蓝字关注“小郑搞码事”,每天都能学到知识,搞懂一个问题!
这里,我们要解决的一个问题是,如何用最简单的方法处理JavaScript堆栈溢出的问题,所以,我们得搞一段代码,能让它产生堆栈溢出。如下
这是一个数组,长度为100000。其中倒数第二位的值设成了'小郑搞码事'(为了下面代码演示直观一点),其它位都是按数字顺序输出。
这段代码很容易看懂,主要利用了一个递归的方法,里面用了一个数组的pop方法,输出数据中所有的值。我们运行一下之后,就产生了堆栈溢出,如下结果:
原因就是每次执行代码时,都会分配一定尺寸的栈空间,每次方法调用时都会在栈里 储存一定信息(如参数,局部变量,返回值等)。这些信息再少也会占用一定空间,累积下来,自然就超过线程的栈空间了。
保留这个递归,消除堆栈溢出,最简单的方法就是改成事件循环来处理,代码很简单:
将nextItem函数直接运行改成加一个定时器。当item不为null,则将函数nextItem推送到事件队列,并且函数退出,从而使调用堆栈清零,看一下输出结果:
没有问题。
总结一下:
JavaScript中解决堆栈溢出,最简单的方法是将堆栈调用改成事件循环来处理。当然还有一些其它的方法,如闭包,或者优化一下现有的代码等。
品|开源中国
近日,Mozilla 检测到 Firefox 出现了大量崩溃事件,这个问题主要发生在使用 Linux 系统的用户身上,尤其是使用基于旧版本 Debian 的 Linux 系统上。
经过调查,Mozilla 最后发现这个问题并非由 Firefox 本身引起,而是涉及到 Linux 内核和 Google 的 JavaScript 代码。
这些崩溃事件发生的十分突然,一开始 Mozilla 检测到数以千计使用一个名为 Huayra 的 Debian 发行版的用户受到影响,特别是 Huayra 5(基于 Debian 10)。后续的持续检测发现,这个问题影响了几乎所有基于旧版本 Debian 的发行版。
崩溃事件也并不是随机发生,而是能够 100% 复现。用户只要在 Google 上搜索图片 Firefox 就会出现崩溃,这个问题影响了所有版本的 Firefox 浏览器 —— 无论是最新版本还是非常老的版本,都会崩溃。
结合上面两个条件,Mozilla 的研究人员认定这个问题不是由 Firefox 这边引发的,问题应该是出在 Google 和旧版 Linux 那边,并开始分析这个问题发生的原因。
Mozilla 随后开始分析 Firefox 在崩溃时的行为,发现崩溃发生在堆栈探测期间。JIT 触及了为下一个 JavaScript 调用保存变量的区域,并不知为何导致了溢出。
第一个奇怪的地方在于,Mozilla 发现 Google 最近对其图像搜索页面进行了更改,该页面现在有一个 JS 函数,Google 在这个单独的函数中分配了 20000 个变量。进一步分析发现,这个函数可能是由 AI 生成的代码。
虽然发现了有这样的问题,不过理论上 Firefox 应该依然不会出现崩溃才对,因为 Linux 会自动扩展堆栈,Mozilla 团队也已经预留了足够的空间,随后他们通过查看受影响进程的内存确认了这一点。
在执行此操作之前,我们进行了堆栈检查并验证了我们分配的额外堆栈内存量不会溢出我们为自己设置的本机堆栈限制。因此,似乎存在我们自我施加的限制与操作系统限制之间的分歧。这在某种程度上取决于发行版,但很混乱:例如,它影响 Debian 10 但不影响 Debian 11。
随后 Mozilla 团队将检查重点放在了 Linux 内核上,结果发现 Linux 内核曾经有一个检查,可以防止对堆栈的访问离堆栈指针太远。特别是在 64KiB+256 字节以外的访问会产生崩溃,而不是扩展堆栈。这个问题在 Linux 4.20 中被修复了,所以使用较新的发行版的用户不受影响。
根据测试,Google 似乎已经在图片搜索中修复了这个问题,不过 Mozilla 仍然在着手研究解决方案,看看是否能为还在使用老系统的用户一劳永逸解决这个问题,以免未来发生同样的情况。
(1)基本类型:
5种基本数据类型Undefined、Null、Boolean、Number 和 String,变量是直接按值存放的,存放在栈内存中的简单数据段,可以直接访问。
(2)引用类型:
存放在堆内存中的对象,变量保存的是一个指针,这个指针指向另一个位置。当需要访问引用类型(如对象,数组等)的值时,首先从栈中获得该对象的地址指针,然后再从堆内存中取得所需的数据。
JavaScript存储对象都是存地址的,所以浅拷贝会导致 obj1 和obj2 指向同一块内存地址。改变了其中一方的内容,都是在原来的内存上做修改会导致拷贝对象和源对象都发生改变,而深拷贝是开辟一块新的内存地址,将原对象的各个属性逐个复制进去。对拷贝对象和源对象各自的操作互不影响。
例如:数组拷贝
//浅拷贝,双向改变,指向同一片内存空间 var arr1 = [1, 2, 3]; var arr2 = arr1; arr1[0] = 'change'; console.log('shallow copy: ' + arr1 + " ); //shallow copy: change,2,3 console.log('shallow copy: ' + arr2 + " ); //shallow copy: change,2,3
2.1、简单的引用复制###
function shallowClone(copyObj) { var obj = {}; for ( var i in copyObj) { obj[i] = copyObj[i]; } return obj; } var x = { a: 1, b: { f: { g: 1 } }, c: [ 1, 2, 3 ] }; var y = shallowClone(x); console.log(y.b.f === x.b.f); // true
2.2、Object.assign()
Object.assign() 方法可以把任意多个的源对象自身的可枚举属性拷贝给目标对象,然后返回目标对象。
var x = { a: 1, b: { f: { g: 1 } }, c: [ 1, 2, 3 ] }; var y = Object.assign({}, x); console.log(y.b.f === x.b.f); // true
3.1、Array的slice和concat方法
Array的slice和concat方法不修改原数组,只会返回一个浅复制了原数组中的元素的一个新数组。之所以把它放在深拷贝里,是因为它看起来像是深拷贝。而实际上它是浅拷贝。原数组的元素会按照下述规则拷贝:
如果向两个数组任一中添加了新元素,则另一个不会受到影响。例子如下:
var array = [1,2,3]; var array_shallow = array; var array_concat = array.concat(); var array_slice = array.slice(0); console.log(array === array_shallow); //true console.log(array === array_slice); //false,“看起来”像深拷贝 console.log(array === array_concat); //false,“看起来”像深拷贝
可以看出,concat和slice返回的不同的数组实例,这与直接的引用复制是不同的。而从另一个例子可以看出Array的concat和slice并不是真正的深复制,数组中的对象元素(Object,Array等)只是复制了引用。如下:
var array = [1, [1,2,3], {name:"array"}]; var array_concat = array.concat(); var array_slice = array.slice(0); array_concat[1][0] = 5; //改变array_concat中数组元素的值 console.log(array[1]); //[5,2,3] console.log(array_slice[1]); //[5,2,3] array_slice[2].name = "array_slice"; //改变array_slice中对象元素的值 console.log(array[2].name); //array_slice console.log(array_concat[2].name); //array_slice
3.2、JSON对象的parse和stringify
JSON对象是ES5中引入的新的类型(支持的浏览器为IE8+),JSON对象parse方法可以将JSON字符串反序列化成JS对象,stringify方法可以将JS对象序列化成JSON字符串,借助这两个方法,也可以实现对象的深拷贝。
//例1 var source = { name:"source", child:{ name:"child" } } var target = JSON.parse(JSON.stringify(source)); target.name = "target"; //改变target的name属性 console.log(source.name); //source console.log(target.name); //target target.child.name = "target child"; //改变target的child console.log(source.child.name); //child console.log(target.child.name); //target child //例2 var source = { name:function(){console.log(1);}, child:{ name:"child" } } var target = JSON.parse(JSON.stringify(source)); console.log(target.name); //undefined //例3 var source = { name:function(){console.log(1);}, child:new RegExp("e") } var target = JSON.parse(JSON.stringify(source)); console.log(target.name); //undefined console.log(target.child); //Object {}
这种方法使用较为简单,可以满足基本的深拷贝需求,而且能够处理JSON格式能表示的所有数据类型,但是对于正则表达式类型、函数类型等无法进行深拷贝(而且会直接丢失相应的值)。还有一点不好的地方是它会抛弃对象的constructor。也就是深拷贝之后,不管这个对象原来的构造函数是什么,在深拷贝之后都会变成Object。同时如果对象中存在循环引用的情况也无法正确处理。
4、jQuery.extend()方法源码实现
jQuery的源码 - src/core.js #L121源码及分析如下:
jQuery.extend = jQuery.fn.extend = function() { //给jQuery对象和jQuery原型对象都添加了extend扩展方法 var options, name, src, copy, copyIsArray, clone, target = arguments[0] || {}, i = 1, length = arguments.length, deep = false; //以上其中的变量:options是一个缓存变量,用来缓存arguments[i],name是用来接收将要被扩展对象的key,src改变之前target对象上每个key对应的value。 //copy传入对象上每个key对应的value,copyIsArray判定copy是否为一个数组,clone深拷贝中用来临时存对象或数组的src。 // 处理深拷贝的情况 if (typeof target === "boolean") { deep = target; target = arguments[1] || {}; //跳过布尔值和目标 i++; } // 控制当target不是object或者function的情况 if (typeof target !== "object" && !jQuery.isFunction(target)) { target = {}; } // 当参数列表长度等于i的时候,扩展jQuery对象自身。 if (length === i) { target = this; --i; } for (; i < length; i++) { if ((options = arguments[i]) != null) { // 扩展基础对象 for (name in options) { src = target[name]; copy = options[name]; // 防止永无止境的循环,这里举个例子, // 如 var a = {name : b}; // var b = {name : a} // var c = $.extend(a, b); // console.log(c); // 如果没有这个判断变成可以无限展开的对象 // 加上这句判断结果是 {name: undefined} if (target === copy) { continue; } if (deep && copy && (jQuery.isPlainObject(copy) || (copyIsArray = jQuery.isArray(copy)))) { if (copyIsArray) { copyIsArray = false; clone = src && jQuery.isArray(src) ? src: []; // 如果src存在且是数组的话就让clone副本等于src否则等于空数组。 } else { clone = src && jQuery.isPlainObject(src) ? src: {}; // 如果src存在且是对象的话就让clone副本等于src否则等于空数组。 } // 递归拷贝 target[name] = jQuery.extend(deep, clone, copy); } else if (copy !== undefined) { target[name] = copy; // 若原对象存在name属性,则直接覆盖掉;若不存在,则创建新的属性。 } } } } // 返回修改的对象 return target; };
jQuery的extend方法使用基本的递归思路实现了浅拷贝和深拷贝,但是这个方法也无法处理源对象内部循环引用,例如:
var a = {"name":"aaa"}; var b = {"name":"bbb"}; a.child = b; b.parent = a; $.extend(true,{},a);//直接报了栈溢出。Uncaught RangeError: Maximum call stack size exceeded
5、自己动手实现一个拷贝方法
*请认真填写需求信息,我们会在24小时内与您取得联系。