JS是一种面向对象的语言,其对象由原型属性模拟。这里,让我们看看如何封装JS对象。
传统包装
函数Person(姓名、年龄、性别){ this.name=namethis.age=年龄;this.sex=sex} Pserson . prototype={ constructor : PeRsoN,SayHello : FuncTion(){ console . log(' hello ');}}这种方法比较常见也比较直观,但是Person()的职责是构造对象。如果在其中进行初始化,代码将会很麻烦。用一种方法初始化会更好吗?
升级版本(通用)
功能人员(信息){此。_init_(信息);} Pserson . prototype={ constructor : Person,_ init _ : function(info){ this . name=info . name;this . age=info . age;this . sex=info . sex;} SayHello : FuncTion(){ console . log(' hello ');}}然而,当我们这样说的时候,我们发现名字、年龄和性别并没有在Person中说明。他们从哪里来的?
新的执行原则
新的执行过程可以由以下函数代替
var myNew=函数(构造函数,args){ var o={ };o . _ _ proto _ _ _=constructor . prototype;var res=constructor.apply(o,args);var type=的类型;if (['string ',' number ',' boolean ',' null ',' undefined'])。indexOf(类型)!==-1){ return o;}返回res}解释:
首先,用var o={}构造一个空对象。
然后将构造函数的原型属性prototype赋给o的原型对象_ _ prototype _ _这样,在执行完this.init(info)之后;有了这句话,对象o可以在其原型对象中找到_init_ method。(原型链)。
之后,这句话就是精华。
var res=constructor.apply(o,args);
函数在o的上下文中调用,参数作为数组传递。所以,
这个。_init_(信息);
这个判决将由o执行,
功能
_init_ :函数(info){ this . name=info . name;this . age=info . age;this . sex=info . sex;}是在o的上下文中调用的,而o也会有自己的名字、年龄和性别属性。
如果构造函数返回复合类型,包括对象、函数和正则表达式,它将直接返回这个对象;否则,它将返回o。
var type=的类型;if(['string ',' number ',' boolean ',' null ',' undefined'])。indexOf(类型)!==-1){ return o;}返回res测试一下
函数Person(name){ this . name=name;} person . prototype . sayHello=function(){ console . log(this . name);} var o1=myNew(Person,['典当']);console . log(O1);O1 . SayHello();
OK栏
类jQuery封装
我从jQuery中学到了这种方法。
JQuery对象具有很强的集成性,可以作为函数或对象调用。当它作为函数调用时,它可以返回它的一个实例,而不需要new,这非常方便。
先看看代码
var Person=function(info){返回新的Person . prototype . init(info);} Person . prototype={ constructor : Person,init : function(){ this . name=info . name . } } Person . prototype . init . prototype=Person . prototype;这种包装方法很巧妙。
把对象的构造操作放在函数中,充当工厂。
不断调用原型不是一种直观的方法,所以
var Person=function(info){返回新的Person . fn . init(info);} Person . fn=Person . prototype={ constructor : Person,init : function(){ this . name=info . name;this . SayHello=function(){ this . MakeArray();} } MaKEarray : FuncTion(){ console . log(this . name);} }//这句话的作用//虽然常用的makeArray之类的方法都挂载在Person.prorotype之下,但是初始化实例还是会用到。person . fn . init . prototype=person . fn;最后,它用一个闭包封装
var Person=(函数(窗口){ var Person=函数(名称){返回new Person.fn.init(名称);}人。fn=人。prototype={构造函数: Person,init : function(name){ this。name=name这个。SayHello=function(){ this。makeArray();} },makarray : function(){ console。日志(这个。姓名);} }个人。fn。初始化。原型=人。fn;返回人员;})();测试一下
风险值p=人("棋子");控制台。log(p);p . SayHello();
对象。create();
最后射流研究…也提供了一种构造对象的方式,对象。create();可以传递一个对象人,构造一个p,并且使p继承人。
var Person={ name: '典当,say hello : function(){ console。日志(这个。姓名);} } var p=对象。创建(人);控制台。log(p);p . SayHello();结果
可以看到,对象人的属性成为了p的原型属性,也就是说p原型继承自人!
我们可以实现一个Object.create()
对象。create=function(prototype){ Func(){ };Func.prototype=原型;var o=new Func();返回o;}在这里,我们将人作为构造函数的原型属性,就可以构造出以人为原型对象的对象。
测试一下
好
关于射流研究…对象封装的方式就介绍到这里,如有错误,望不吝赐教。
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持我们!