参考自阮一峰老师的文章。
万物皆对象!
一、生成实例对象--原始模式
有一只猫我们把它看成一个对象,它具有两个属性--名字--颜色
var Cat = {
name : "",
color : ""
}
下面我们生成两个实例对象
var cat1 = {}
cat1.name = "黑猫"; //按照原型对象的属性赋值
cat1.color = "黑色";
var cat2 = {}
cat2.name = "白猫";
cat2.color = "白色";
这就是最简单的封装了,把两个属性封装在一个对象里面。但是,这样的写法有两个缺点,一是如果多生成几个实例,写起来就非常麻烦;
二是实例与原型之间,没有任何办法,可以看出有什么联系
二、原始模式改进
我们创建一个函数解决代码重复
function Cat(name,color){
return {
name:name,
color:color
}
}
然后生成实例对象,其实就是在调用函数
var cat1 = Cat("黑猫","黑色");
var cat2 = Cat("白猫","白色");
这样就是cat1和cat2之间没有什么关系,不能反映出他们是同一个原型对象实例
三、构造函数模式
所谓构造函数其实就是一个function内部使用了this变量,对构造函数使用new运算符就能创建一个实例对象,并且this变量被绑定在实例对象上
function Cat(name,color){
this.name = name;
this.color = color;
}
var cat1 = new Cat("大毛","黄色");
var cat2 = new Cat("二毛","黑色");
alert(cat1.name); // 大毛
alert(cat1.color); // 黄色
这时cat1和cat2含有一个constructor属性指向他们的构造函数
alert(cat1.constructor == Cat); //true
alert(cat2.constructor == Cat); //true
js还提供了一个instanceOf运算符验证原型对象与实例对象之间的关系
alert(cat1 instanceof Cat); //true
alert(cat2 instanceof Cat); //true
四、构造函数的模式问题
构造函数会造成内存浪费
现在为Cat对象添加一个不变的属性type(种类)再添加一个方法eat(吃)
function Cat(name,color){
this.name = name;
this.color = color;
this.type = "猫科动物";
this.eat = function(){
alert("吃吃吃")
}
}
var cat1 = new Cat("大毛","黄色");
var cat2 = new Cat ("二毛","黑色");
alert(cat1.type); // 猫科动物
cat1.eat(); // 吃老鼠
这样做就是每一次生成实例type和eat的内容都是一样的,占用内存,那么就要想办法让type和eat在内存中只生成一次
5、prototype
js规定每一个构造函数都有一个prototype属性指向另一个对象,这个对象的所有属性和方法都会被构造函数的实例继承,
这样我们可以把那些不变的属性和方法定义在prototype上
function Cat(name,color){
this.name = name;
this.color = color;
}
Cat.prototype.type = "猫科动物";
Cat.prototype.eat = function(){alert("吃老鼠")};
然后生成实例
var cat1 = new Cat("黑猫","黑色");
var cat2 = new Cat("白猫","白色");
alert(cat1.type); // 猫科动物
cat1.eat(); // 吃老鼠
这时每一个实例的type和eat都指向同一个内存地址--prototype
验证
alert(cat1.eat == cat2.eat); //true