vue中引用js-凯发k8官方网

点击上方“蓝字”关注本公众号

写在前面

在所有的编程语言中，我们声明一个变量时，需要系统为我们分配一块内存。当我们不再需要这个变量时，需要将内存进行回收(这个过程称之为垃圾回收)。在c语言中，有malloc和free来协助我们进行内存管理。在js中，开发者不需要手动进行内存管理，js引擎会为我们自动做这些事情。但是，这并不意味着我们在使用js进行编码时，不需要关心内存问题。

js中的内存分配与变量

内存声明周期如下：

分配你所需要的内存

使用分配到的内存(读、写)

不需要时将其释放

在js中，这三步都是对开发者无感的，不需要我们过多的关心。

我们需要注意的是，当我们声明一个变量、得到一块内存时，需要正确区分一个变量到底是一个基本类型还是引用类型。

基本类型：string，number，boolean，null，undefined，symbol

引用类型：object，array，function

对于基本类型变量来说，系统会为其分配一块内存，这块内存中保存的，就是变量的内容。

对于引用类型变量来说，其存储的只是一个地址而已，这个地址指向的内存块才是是变量的真正内容。引用变量的赋值，也只是把地址进行传递(复制)。举个例子：

// a 和 b 指向同一块内存var a = [1,2,3];var b = a;a.push(4);console.log(b); // [1,2,3,4]

还有一点需要注意，js中的函数传参，其实是按值传递(按引用传递)。举个例子：

// 函数f的入参，其实是把 a 的值复制了一份。注意 a 是一个引用类型变量，其保存的是一个指向内存块的一个地址。function f(obj) { obj.b = 1;}var a = { a : 1};f(a);console.log(a); // { a: 1, b: 1}

在平时的开发中，完全理解js中变量的存储方式是十分重要的。对于我自己来说，尽量避免把引用类型变量到处传递，可能一不小心在某个地方修改了变量，另一个地方逻辑没有判断好，很容易出bug，特别是在项目复杂度较高，且多人开发时。这也是我比较喜欢使用纯函数的原因。

另外，根据我之前的面试经验，有不少的小伙伴认为下面的代码会报错，这也是对js中变量存储方式掌握不熟导致的。

// const 声明一个不可改变的变量。// a 存储的只是数组的内存地址而已，a.push 并不会改变 a 的值。const a = [];a.push('1'); console.log(a); // ['1']

js中的垃圾回收

垃圾回收算法主要依赖于引用的概念。在内存管理的环境中，一个对象如果有访问另一个对象的权限(隐式或者显式)，叫做一个对象引用另一个对象。例如，一个javascript对象具有对它原型的引用(隐式引用)和对它属性的引用(显式引用)。

在这里，“对象”的概念不仅特指 javascript 对象，还包括函数作用域(或者全局词法作用域)。当变量不再需要时，js引擎会把变量占用的内存进行回收。但是怎么界定【变量不再需要】呢？主要有两种方法。

引用计数法

把“对象是否不再需要”简化定义为“对象有没有其他对象引用到它”。如果没有引用指向该对象(零引用)，对象将被垃圾回收机制回收。mdn上的例子：

var o = { a: { b:2 }}; // 两个对象被创建，一个作为另一个的属性被引用，另一个被分配给变量o// 很显然，没有一个可以被垃圾收集var o2 = o; // o2变量是第二个对“这个对象”的引用o = 1; // 现在，“这个对象”只有一个o2变量的引用了，“这个对象”的原始引用o已经没有var oa = o2.a; // 引用“这个对象”的a属性 // 现在，“这个对象”有两个引用了，一个是o2，一个是oao2 = "yo"; // 虽然最初的对象现在已经是零引用了，可以被垃圾回收了 // 但是它的属性a的对象还在被oa引用，所以还不能回收oa = null; // a属性的那个对象现在也是零引用了 // 它可以被垃圾回收了

这种方法有一个局限性，那就是无法处理循环引用。在下面的例子中，两个对象被创建，并互相引用，形成了一个循环。它们被调用之后会离开函数作用域，所以它们已经没有用了，可以被回收了。然而，引用计数算法考虑到它们互相都有至少一次引用，所以它们不会被回收。

// 这种情况下，o和o2都无法被回收function f(){ var o = {}; var o2 = {}; o.a = o2; // o 引用 o2 o2.a = o; // o2 引用 o return "azerty";}f();

标记-清除 算法

这个算法假定设置一个叫做根(root)的对象(在javascript里，根是全局对象)。垃圾回收器将定期从根开始，找所有从根开始引用的对象，然后找这些对象引用的对象……从根开始，垃圾回收器将找到所有可以获得的对象和收集所有不能获得的对象。

关于js中的垃圾回收算法，网上已经有很多的文章讲解，这里不再进行赘述。

js中的内存泄露

尽管js为我们自动处理内存的分配、回收问题，但是在某些特定的场景下，js的垃圾回收算法并不能帮我们去除已经不再使用的内存。这种【由于疏忽或错误造成程序未能释放已经不再使用的内存】的现象，被称作内存泄露。

内存占用越来越高，轻则影响系统性能，重则导致进程崩溃。

可能产生内存泄露的场景有不少，包括全局变量，dom事件，定时器等等。

下面是一段存在内存泄露的示例代码：

class page1 extends react.component { events= [] componentdidmount() { window.addeventlistener('scroll', this.handlescroll.bind(this)); } render() { return