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
网友评论