Javascript构造函数（二）函数内方法和原型方法

1.概念

函数内方法

把方法写在构造函数内的情况我们简称为函数内方法

原型prototype方法

把方法写在prototype属性上的情况我们简称为prototype上的方法。

2.区别

方法	函数内方法	原型prototype方法
区别	使用函数内方法，我们可以访问到函数内部的私有变量，如果我们通过构造函数new出来的对象需要我们操作系统的私有变量的话，则使用函数内方法	当我们通过一个函数创建大量的对象，并且这些对象有许多共同的方法，则需要在函数的protetype属性上添加这些方法

例：//

//函数内方法
function A(name) {
    this.name = name || 'a';
    this.sayHello = function() {
        console.log('Hello, my name is: ' + this.name);
    }
}

// 原型prototype
function B(name) {
    this.name = name || 'b';
}
B.prototype.sayHello = function() {
    console.log('Hello, my name is: ' + this.name);
};

var a1 = new A('a1');
var a2 = new A('a2');
a1.sayHello();
a2.sayHello();

var b1 = new B('b1');
var b2 = new B('b2');
b1.sayHello();
b2.sayHello();

首先，我们写了两个构造函数,第一个是A,这个构造函数里面包含了一个方法sayHello;第二个是构造函数B, 我们把那个方法sayHello写在了构造函数B的prototype属性上面.
接下来，我们通过一幅图看下他们的区别，例子来自于http://caibaojian.com/js-constructor-vs-prototype.html

分析结构图.png

如图所示，定义在函数内方法，对于每一个实例对象，sayHello（）方法都是一模一样的内容，每一次生成一个实例，都必须为重复的内容，多占用一些内存。这样既不环保，也缺乏效率。
定义在构造函数的prototype属性上的方法会让它的所有示例都共享这个方法,但是不会在每个实例的内部重新定义这个方法. 如果我们的应用需要创建很多新的对象,并且这些对象还有许多的方法,为了节省内存,我们建议把这些方法都定义在构造函数的prototype属性上。

3.注意事项

(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"}

4.如果方法比较多的话，可以直接使用对象字面形式代替原型对象；

function Person( name){
       this.name =name;
     }
Person.prototype={
        sayName:function(){
        console.log(this.name);
    },
        toString:function(){
        return “[person"+this.name+”]";
    }
      var p1=new Person('John');

但是这种做法有一个弊端，使用字面量形式改变了原型对象，比如

console.log(p1 instanceOf Person);//true
console,log(p1.constructor===Person);//false
console.log(p1.constructor===object);//true

因为原型对象具有一个constructor属性，这是其他对象所没有的。当一个函数被创建时，它的prototype属性也被创建，且该原型对象的constructor属性指向该函数；当使用对象字面量形式改写原型对象时，其constructor属性的指向将被设置为泛用对象object；
改进方法：强制改变constructor属性的指向；

Person.prototype={
                constructor:Person,
                sayName:function(){
                    console.log(this.name);
                    },
                toString:function(){
                    return "[Person"+ this.name+"]" ;
                    }
            }
console.log(p1 instanceOf Person);//true
console,log(p1.constructor===Person);//true
console.log(p1.constructor===object);//false