构造函数模式

1
2
3
4
5
6
7
8
9
10
11
function CreatNewPerson(name){
   this.name = name;
   this.showName = function(){
     console.log(this.name)
   }
 }
 var p1 =new CreatNewPerson('少年');//当new去调用一个函数时，函数中的this就是创建出来的对象而函数中的返回值就是this
 p1.showName();//少年
 var p2 =new CreatNewPerson('姑娘');
 p2.showName();//姑娘
 console.log(p1.showName==p2.showName)//false

为什么p1.showName==p2.showName的值会是false呢

因为构造函数存在一个缺陷，就是在创建对象时，每个对象都有一套自己的方法，每定义一个函数都实例化了一个对象

原型模式

原型（prototype）:重写对象下面公用的属性或方法，让公用的属性或方法在内存中只存在一份（提高性能），也就是说所有在原型对象中创建的属性或方法都直接被所有对象实例共享。

  • 原型：类比CSS中的class
  • 普通方法：类比css中的style

我们来把上面的代码修改一下

1
2
3
4
5
6
7
8
9
10
11
function CreatNewPerson(name){
  this.name = name;
}
CreatNewPerson.prototype.showName = function(){
  console.log(this.name)
};
var p1 =new CreatNewPerson('少年');
p1.showName();//少年
var p2 =new CreatNewPerson('姑娘');
p2.showName();//姑娘
console.log(p1.showName==p2.showName)//true

我们可以看到，p1.showName==p2.showName的值为true，由此可见，原型模式解决了构造函数中每定义一个函数就实例化一个对象的问题