什么时候用原型，什么时候用闭包

原型：

function Viechel() {
    this.speed = 100;
}

Viechel.prototype.speedUp = function() {
    this.speed += 10;
}

var car = new Viechel();

闭包：

function viechel() {
    var speed = 100;
    return {
        getSpeed: () => speed,
        speedUp: function() {
            speed += 10;
        }
    }
}

var car = viechel();

前段时间在看关于这两块的知识，发现这两种技术的作用很相似。
（也可能是我写的例子不好……）
但是我不清楚什么场景该用前者什么时候该用后者……

javascript

阅读 13.9k

6 个回答

黒之染

✓ 已被采纳

闭包比原型常用，常用的原因上面他们都提到了，然而闭包本来不是用来构建对象的，构建对象本来是原型的工作，但是闭包却也可以用来构建对象，你的例子就是它们构建对象的情况。

要知道用哪个构建对象比较好，在这里只要对比一下他们的效率就行了，因为用它们构造的对象，用法是一样的，构造的过程也差不远。

js每次实例化对象时，都会把构造函数执行一遍，你的例子中，构造函数是Viechel，很明显原型中的构造函数比闭包中的构造函数代码量要少很多，因为闭包把对象的方法都写在构造函数中，所以实际上，单单比较实例化的速度的话，原型是甩闭包N条街的，尤其是你的对象有大量方法的时候特别突出。
这是两者实例化速度对比的测试：http://jsperf.com/clos-vs-proto
但是讲到调用对象的方法，则是闭包的要快，因为原型的对象的方法是存在对象的原型链中，寻址速度略慢。这是两者调用对象方法的速度对比的测试：http://jsperf.com/prototype-vs-closure-single-object

对比下来，应该你也能得出结论：

如果你要构建的对象实例化的数量少（我觉得一个页面不要多于3次吧），但是需要经常调用对象的方法，就用闭包吧。比如自己写的函数库，h5音乐播放控制，banner切换控制。还挺多的，实际上因为这样，很多人很推崇闭包。
如果要大量实例化的，不管方法调用得多不多，都要用原型。比如jquery的Dom操作部分，一个图表的每个数据点，。

已注销

1.9k1

发布于
2015-11-30

更新于
2015-11-30

闭包的用途。事实上，通过使用闭包，我们可以做很多事情。比如模拟面向对象的代码风格；更优雅，更简洁的表达出代码；在某些方面提升代码的执行效率。

1 匿名自执行函数

我们知道所有的变量，如果不加上var关键字，则默认的会添加到全局对象的属性上去，这样的临时变量加入全局对象有很多坏处，
比如：别的函数可能误用这些变量；造成全局对象过于庞大，影响访问速度(因为变量的取值是需要从原型链上遍历的)。
除了每次使用变量都是用var关键字外，我们在实际情况下经常遇到这样一种情况，即有的函数只需要执行一次，其内部变量无需维护，
比如UI的初始化，那么我们可以使用闭包：

var datamodel = {    
    table : [],    
    tree : {}    
};    
     
(function(dm){    
    for(var i = 0; i < dm.table.rows; i++){    
       var row = dm.table.rows[i];    
       for(var j = 0; j < row.cells; i++){    
           drawCell(i, j);    
       }    
    }    
       
    //build dm.tree      
})(datamodel);

我们创建了一个匿名的函数，并立即执行它，由于外部无法引用它内部的变量，
因此在执行完后很快就会被释放，关键是这种机制不会污染全局对象。

2缓存

再来看一个例子，设想我们有一个处理过程很耗时的函数对象，每次调用都会花费很长时间，
那么我们就需要将计算出来的值存储起来，当调用这个函数的时候，首先在缓存中查找，如果找不到，则进行计算，
然后更新缓存并返回值，如果找到了，直接返回查找到的值即可。闭包正是可以做到这一点，因为它不会释放外部的引用，
从而函数内部的值可以得以保留。

var CachedSearchBox = (function(){    
    var cache = {},    
       count = [];    
    return {    
       attachSearchBox : function(dsid){    
           if(dsid in cache){//如果结果在缓存中    
              return cache[dsid];//直接返回缓存中的对象    
           }    
           var fsb = new uikit.webctrl.SearchBox(dsid);//新建    
           cache[dsid] = fsb;//更新缓存    
           if(count.length > 100){//保正缓存的大小<=100    
              delete cache[count.shift()];    
           }    
           return fsb;          
       },    
     
       clearSearchBox : function(dsid){    
           if(dsid in cache){    
              cache[dsid].clearSelection();      
           }    
       }    
    };    
})();

CachedSearchBox.attachSearchBox("input1");
这样，当我们第二次调用CachedSearchBox.attachSerachBox(“input1”)的时候，
我们就可以从缓存中取道该对象，而不用再去创建一个新的searchbox对象。

3 实现封装

可以先来看一个关于封装的例子，在person之外的地方无法访问其内部的变量，而通过提供闭包的形式来访问：

var person = function(){    
    //变量作用域为函数内部，外部无法访问    
    var name = "default";       
       
    return {    
       getName : function(){    
           return name;    
       },    
       setName : function(newName){    
           name = newName;    
       }    
    }    
}();    
 
print(person.name);//直接访问，结果为undefined    
print(person.getName());    
person.setName("abruzzi");    
print(person.getName());

得到结果如下：

undefined
default
abruzzi

4 闭包的另一个重要用途是实现面向对象中的对象，传统的对象语言都提供类的模板机制，
这样不同的对象(类的实例)拥有独立的成员及状态，互不干涉。虽然JavaScript中没有类这样的机制，但是通过使用闭包，
我们可以模拟出这样的机制。还是以上边的例子来讲：

function Person(){    
    var name = "default";       
       
    return {    
       getName : function(){    
           return name;    
       },    
       setName : function(newName){    
           name = newName;    
       }    
    }    
};    
     
     
var john = Person();    
print(john.getName());    
john.setName("john");    
print(john.getName());    
     
var jack = Person();    
print(jack.getName());    
jack.setName("jack");    
print(jack.getName());

运行结果如下：

default
john
default
jack
由此代码可知，john和jack都可以称为是Person这个类的实例，因为这两个实例对name这个成员的访问是独立的，互不影响的。

江小杰

791

发布于
2015-11-30

闭包常用于柯里化，实现私有变量和方法什么的，还有就是保存上下文中的变量，比如在异步操作时，this 变量并不指向定义函数的外层，而是当前正在执行的上下文，这时候通常会在外层定义一个var self = this。然后在异步函数中使用 self 代替 this。说得有点绕，希望你能理解。

原型相当于对对象的一种描述，设计模式中就有一种原型模式，可以用来实现基于原型的面向对象，好处是对象开销小，大部分方法都是由原型描述，不需要给每个对象额外空间记录方法。

麦芽糖

1.4k82745

发布于
2015-12-01

从楼主的例子来看效果是达到了，但是speed+1的实现太多，太多。所以不能从例子中看两者的区别。

原型和闭包是两个东西。and，网络上对这两个概念的解释很多，但很费解，还是建议找书本来理解（js高级编程）。
新手面试被问到概率几乎90%。

首先纠正用词。原型->原型链。因为js（es5）语言本身没有类的概念（但class是保留字哦，ES6标准化了http://es6.ruanyifeng.com/#docs/class）,利用原型链可以构造类的概念，但是代码还是有点难懂，需要理解很多知识。
然而类用来做啥子？想到的就是 1模拟java那些类的特性嘛，比如chinese 继承 people；2设计模式用到特别多，至于设计模式百度吧（有相关的书籍。前端领域用到设计模式还是比较少的，除非深入到很高层的架构）
然而类会引入些知识点，比如典型的“读写不一致”（很容易被人忽略，ng上也有这个问题）。

说道闭包，楼主的例子是ok的，典型案例。构造私有变量。
在类上用闭包可以构造私有变量。比如上面的this.speed, Viechel 的实例是可以访问speed的，也就是publish。类还有private 的概念，可以用闭包来实现，具体怎么实现忘了。

然而，从前端的发展来看，真正用类概念来编程的很少，毕竟学习成本和维护成本的存在。但是react看到了累的影子哦。
同时前端的美丽是能用简单的东西做很多东西，那谁还用复杂的类呢，能简单来就简单来。

说道这，类和闭包就是两个东西，关注的点不同，没什么好比较。一个是类，一个是闭包。两者还可以配合用。