您好,欢迎来到三六零分类信息网!老站,搜索引擎当天收录,欢迎发信息
免费发信息

JavaScrpt对象如何创建和构造函数模式代码详解

2024/5/19 21:34:24发布5次查看
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对象如何创建和构造函数模式代码详解的详细内容。
该用户其它信息

VIP推荐

免费发布信息,免费发布B2B信息网站平台 - 三六零分类信息网 沪ICP备09012988号-2
企业名录