Javascript是一种基于对象的语言,但它又没有class。这在很长的一段时间里,对JS的面向对象编程的概念很模糊,在编程的时候时有用到,但要说个所以然,却说不出来,所以看了些书,又在网上查了些资料,写下些总结。
一、封装
写个对象,将属性(变量),方法写在对象内,这就是封装。如下:我把两个属性封装在函数内。
var Cat = {
name : '',
color : ''
}
用法:
var cat1 = {}; // 创建一个空对象
cat1.name = "小花"; // 按照原型对象的属性赋值
cat1.color = "黄色";
但这种写法用起来比构造函数模式的麻烦。比较如下:
function cat(name,color){
this.name=name,
this.color=color,
}
用法:
var cat1 = new cat('小花','黄色');
从代码的量上就可以看出,构造的更便捷。
这里解释下"构造函数":其实就是一个普通函数,但是内部使用了this变量。对构造函数使用new
运算符,就能生成实例,并且this
变量会绑定在实例对象上。
而且用同一个构造函数生成的实例,他们之间是有联系的。他们会自动含有一个constructor
属性,指向它们的构造函数。代码如下;
console.log(cat1.constructor==cat); //true
console.log(cat2.constructor==cat); //true
console.log(cat1.constructor==cat2.constructor); //true
Javascript还提供了一个instanceof
运算符,验证原型对象与实例对象之间的关系。
alert(cat1 instanceof Cat); //true
alert(cat2 instanceof Cat); //true
构造函数虽然好用,但是存在一个浪费内存的问题。如下
function cat(name,color){
this.name=name,
this.color=color
this.type="猫咪";
}
看上去好像没什么问题,但是,每实例化一个对象时,就会生成一个name、color、type,他们都是会占用内存的,而每次生成的type,都是相同的,这就多占用一些内存,缺乏效率。
可喜可贺的是,Javascript提供了一个prototype
属性,每一个构造函数都有一个prototype
属性,指向另一个对象。这个对象的所有属性和方法,都会被构造函数的实例继承。
这也就说明,我们可以直接把type写在prototype
对象上,如下:
function cat(name,color){
this.name=name,
this.color=color
}
cat.prototype.type="猫咪";
验证下不同实例的type,是否是同一个。如下:
var cat1 = new cat('小花','黄色');
var cat2 = new cat('大花','橘色');
console.log("cat1.type="+cat1.type);
console.log("cat2.type="+cat2.type);
cat1.type="老虎";
console.log("cat1.type="+cat1.type);
console.log("cat2.type="+cat2.type);
但输入的结果却是:
cat1.type=猫咪
cat2.type=猫咪
cat1.type=老虎
cat2.type=猫咪
原因在于cat1这个实例没有type这个属性,这个属性是存在于cat1的原型中,而我们可以通过实例访问原型中的值,却不能通过实例改变原型中的值,如果我们在实例中添加一个属性,而这个属性又刚好于原型中的某个属性同名,那么该属性会屏蔽原型中的属性,最后出现上面那种效果。
下面是一些在网上找的Prototype模式的验证方法:
1、 isPrototypeOf()
这个方法用来判断,某个proptotype
对象和某个实例之间的关系。
alert(Cat.prototype.isPrototypeOf(cat1)); //true
alert(Cat.prototype.isPrototypeOf(cat2)); //true
2、 hasOwnProperty()
每个实例对象都有一个hasOwnProperty()
方法,用来判断某一个属性到底是本地属性,还是继承自prototype
对象的属性。
alert(cat1.hasOwnProperty("name")); // true
alert(cat1.hasOwnProperty("type")); // false
3、 in运算符
in
运算符可以用来判断,某个实例是否含有某个属性,不管是不是本地属性。
alert("name" in cat1); // true
alert("type" in cat1); // true
in
运算符还可以用来遍历某个对象的所有属性。
for(var prop in cat1) { alert("cat1["+prop+"]="+cat1[prop]); }