构造函数内的方法与构造函数prototype属性上方法的对比
本文的目的是让大家理解，什么情况下把函数的方法写在构造函数上，什么情况下把方法写在函数的prototype对象上，以及这样做的好处。
为了阅读方便,我们约定一下:把方法写在构造函数内的情况我们简称为函数内方法,把方法写在prototype属性上的情况我们简称为prototype上的方法
首先我们先了解一下这篇文章的重点:
- 函数内的方法：使用函数内的方法，我们可以访问函数内部的私有变量，如果我们通过构造函数new出来的对象，需要我们操作构造函数内部的私有变量的话。
我们这个时候就要考虑使用函数内部的方法。 - prototype上的方法: 当我们需要通过一个构造函数创建大量的对象，并且这些对象还都有许多的方法的时候，这个时候，我们就要考虑在构造函数的prototype上添加这些方法。
这种情况下，我们代码的内存占用就比较小。 - 在实际应用中，这两种方法往往是结合使用的，所以我们要首先了解我们需要的是什么，然后在去选择如何使用。
我们看下边的代码来理解一下上边的讲的要点：
//构造函数
function A(name){
this.name = name||'a';
this.sayHello = function(){
console.log('hi,my name is'+this.name);
}
}
//构造函数
function B(name){
this.name = name||'b';
}
B.prototype.sayHello = function(){
console.log('hi,my name is'+this.name);
}
var a1 = new A('a1');
var a2 = new A('a2');
a1.sayHello() //"hi,my name is:a1"
a2.sayHello() //"hi,my name is:a2"
var b1 = new A('b1');
var b2 = new A('b2');
b1.sayHello() //"hi,my name is:b1"
b2.sayHello() //"hi,my name is:b2"
我们写了两个构造函数，第一个是A,这个构造函数里包含了一个方法sayHello.
第二个构造函数是B，我们把sayHello方法写在了B的prototype属性上边。
需要指出的是，通过这两个构造函数new出来的对象，具有一样的属性和方法，但是他们的区别，我们可以通过下图来说明。
image.png
我们通过使用构造函数A创建了两个对象,分别是a1,a2;通过构造函数B创建了两个对象b1,b2;我们可以发现b1,b2这两个对象的那个sayHello方法 。
都是指向了它们的构造函数的prototype属性的sayHello方法.而a1,a2都是在自己内部定义了这个方法.。
注意：
- 定义在构造函数内部的方法，会在它的每一个实例上，都克隆这个方法；
- 定义在构造函数prototype属性上的方法，会让它的所有实例都共享这个方法，但是不会在每个实例内部，重新定义这个方法。
- 如果我们的应用需要创建很多的对象，并且这些对象还有许多的方法，为了节省内存，我们建议把这些方法都定义在构造函数的prototype属性上。
当然，在某些情况下，我们需要将某些方法定义在构造 函数中，这种情况一般是因为，我们需要访问构造函数内部的私有变量。
下边，我们举一个两者结合的例子：
function Person(name,family){
this.name = name;
this.family = family;
var records = [{type:'in',amount:0}];
this.addTransaction = function(trans){
if(trans.hasOwnProperty('type')&&trans.hasOwnProperty('amount')){
records.push(trans);
}
}
this.balance = function(){
var total = 0;
records.forEach(function(record){
if(record.type==='in'){
total += record.amount;
}else{
total -= record.amount;
}
})
return total;
}
}
Person.prototype.getFull = function(){
return this.name+""+this.family;
}
Person.prototype.getProfile = function(){
return this.gerFull()+",total balance:"+this.balance();
}
在上面的代码中,我们定义了一个Person构造函数;这个函数有一个内部的私有变量records,这个变量我们是不希望通过函数内部以外的方法去操作这个变量，所以我们把操作这个变量的方法都写在了函数的内部.而把一些可以公开的方法写在了Person的prototype属性上,比如方法getFull和getProfile。
把方法写在构造 函数的内部，增加了通过构造函数初始化一个对象的成本，把方法写在构造函数的prototype属性上，就有效的降低了这种成本。
你也许会觉得,调用对象上的方法要比调用它的原型链上的方法快得多,其实并不是这样的,如果你的那个对象上面不是有很多的原型的话,它们的速度其实是差不多的。
另外需要注意一些的地方：
- 1)如果是在构造函数的prototype属性上定义的方法的话，要牢记一点，如果你改变某个方法，那么由这个构造函数所产生的所有对象的那个方法，都会改变。
- 2）还有一点就是变量提升的问题,我们可以稍微的看一下下面的代码:
func1(); //这里会报错，因为在函数执行的时候，func1还没有被赋值， error: func1 is not a function
var func1 = function(){
console.log('func1');
}
func2(); // 这个会被正确执行,因为函数的声明会被提升.
function func2() {
console.log('func2');
}
- 3）关于对象序列化的问题。定义在构造函数prototype上的属性，不会被序列化。可以看下边代码：
function A(name) {
this.name = name;
}
A.prototype.sayWhat = 'say what...';
var a = new A('dreamapple');
console.log(JSON.stringify(a)); // {"name":"dreamapple"}
我们可以看到输出结果是{"name":"dreamapple"}
