javascript面向对象知识很广泛,想深入理解需要花费一些时间
对象的创建:
1 创建一个面向对象
var obj = new object();
obj.name = 'haha';
obj.showname = function(){
alert(obj.name);
}
obj.showname();
缺点:当我们想创建多个面向对象的时候,重复代码过多,需要封装,所以有了工厂方法。
2 工厂方式
function createperson(name){
var obj = new object(); //原料
obj.name = name; //加工
obj.showname = function(){
alert(this.name);
}
return obj;//出厂
}
var p1 = createperson('haha');
p1.showname();
var p2 = createperson('hehe');
p2.showname();
//其实就是简单的封装函数,整个过程像工厂的流水线,所以叫工厂方式
缺点:无法识别创建的对象的类型。因为全部都是object,没有区分度,不像date、array等,因此出现了构造函数模式。
3 构造函数模式
function createperson(name){
this.name = name;
this.showname = function(){
alert(this.name);
}
}
var p1 =new createperson('haha');
p1.showname();
var p2 = new createperson('hehe');
p2.showname();
我们通过这二个方面来改变:
函数名首字母大写
这是为了区别于普通的函数,构造函数本身其实就是普通的函数,只是我们专门用它来实现了构造的功能,所以专门起了一个名字叫构造函数,任何函数都可以成为构造函数,这取决于你调用函数的方式,当使用了new的方式调用就成了构造函数。
new 关键字调用
调用函数的时候用了 new关键字,那么new到底做了什么?用不用new有什么区别?再来看下面的例子
function createperson(name){
this.name = name;
this.showname = function(){
alert(this.name);
};
console.log(this);
}
new createperson('haha'); //createperson
createperson('haha'); //window
我们会发现当用new去调用一个函数的时候,this的指向会不一样。其实new主要做了下面这些事,不过下面写的只是大概的行为,并不是内部源码。
function createperson(name){
var obj = {}; //声明一个空对象obj
obj._proto_= createperson.prototype;
//把这个对象的_proto_属性指向构造函数的原型对象,这样obj就可以调用createperson原型对象下的所有方法 ,这里原型先知道结论,下面会讲。
createperson.apply(obj); //用apply方法让this指向obj对象
this.name = name; //obj对象添加属性,方法
this.showname = function(){
alert(this.name);
};
return obj;//返回这个对象
}
函数构造模式存在的问题:
alert(p1.showname==p2.showname);//false
缺点:可见这两个对象并不是共用一个方法,每new一次,系统都会新创建一个内存,这两个对象各自有各自的地盘,但他们具有相同的功能,还不共用,肯定不是我们所希望的。所以就有了下一种方法,原型+构造模式
4 原型+构造模式
原型:每个函数都有一个prototype属性,它是一个对象,也称作原型对象,我们可以把方法和属性写在它上面(不过原型对象不仅仅有我们写的属性和方法,还有别的,下面会介绍),而通过这个函数创建出来的实例对象,都能共享这个原型对象下的方法和属性。所以我们只需要把想要共享的东西放在函数的prototype下,不想共享的东西通过构造函数来创建就可以了。
看个栗子(原型+构造)
function createperson(name){
this.name = name;
}
createperson.prototype.showname = function(){
alert(this.name);
}
var p1 =new createperson('haha');
p1.showname();
var p2 = new createperson('hehe');
p2.showname();
alert(p1.showname==p2.showname);//true
测试为true,可见showname()方法是共享的,也就是说他们共用一个内存,更进一步的说它们存在引用关系,也就是说你更改了p1的showname也会影响p2的showname。
以上就是javascrpt对象如何创建和构造函数模式代码详解的详细内容。