【Vue.js 入门笔记】闭包和对象引用

1.闭包

闭包是能够访问其他函数内部变量的函数。在Javascript中访问一个变量时，解释器会先搜索当前函数作用域中的变量，如果存在则返回，如果不存在则继续搜索父级作用域（最上层为全局环境）中的变量，直到整了作用域链中都无法找到变量时，则会返回undefined。
Javascript中的闭包，正是依赖于这种作用域链的机制。因为只有子函数作用域能访问父作用域中的变量。所以闭包也像是"定义在函数内部的函数"。
如下所示，这是一个使用了JavaScript闭包的实例。

js 复制代码

function ShapeFactory(type){
    var type = type || 'rect';
    var counter = 0

    return {
        createShape: function(size,color){
            counter++
            console.log('%s %s %s', type , size || 20, color || 'red')
        },
        getCounter: function(){
            return counter
        }
    }
}

// 圆形工厂
var circleFactory = ShapeFactory('circle');
console.log(circleFactory.getCounter());
circleFactory.createShape(10,'blue');
console.log(circleFactory.getCounter());

// 矩形工厂
var rectFactory = ShapeFactory();
rectFactory.createShape();
console.log(rectFactory.getCounter());

这个示例中存在两个闭包。即函数createShape 和 getCounter 。他们的函数作用域都含有对外部变量的引用。其中，变量type是作为形参传入shaprFactory中，并为createShape所调用的。而变量counter则是在ShapeFactory中声明后被getCounter调用的。

可以看到，闭包在这里发挥了两个作用：

第一，在createShape中对变量type的调用构建了一个装饰器，允许用户把shapeFactory装饰为任意一个图形工厂，例如circleFactory、rectFactory。
第二，在ShapeFactory函数执行完成之后，因为作用域中的变量counter被getCounter调用且getCounter作为函数返回体的一部分，所以变量counter没有被javascript当做垃圾回收掉。

2. 对象引用

js 复制代码

// 实例一
var origin = {
	greeting : "welcome"
}

var copy = origin
orgin.farewell = 'byebye'

console.log(copy.greeting,copy.farewell) // welcome byebye


//实例二
var origin = {
	greeting  "welcome"
}
var copy = origch
origin = {
	farewell :'byebye' 
}

console.log(copy.greeting,copy.farewell) // welcome undefined

在JavaScript中定义的对象，解释器会为其分配一个地址。当把这个对象赋值给其他对象时，他们会指向同一个地址。

实例一中，将origin赋值给copy时，copy对象将引用origin对象的地址。因此当origin被修改时，copy也将随时发生变化。

示例二中，在复制origin后，为origin分配一个新的地址，此时copy仍然指向正确的地址。因为，在修改origin时，copy不会发生变化。

在项目开发中，有时需要获取对象的投影，以使在修改本体和投影任意一个时，两者都会同步更新。这是对象引用使用的地方，在Vue的数据与视图绑定中运用颇多。

有是，需要只复制对象的值，而不想让他们引用同一个地址，用专业的话来说就是深拷贝对象，此时的处理方式应该如下：

复制代码

var origin = {
    greeting:'hello world'
}
var copy = JSON.parse(JSON.stringify(origin));
origin.farewell = 'good bye';
console.log(copy.greeting,copy.farewell)

输出结果：hello world undefined