详细解释JS对象封装的常见方式

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；}在这里，我们将人作为构造函数的原型属性，就可以构造出以人为原型对象的对象。

测试一下

好

关于射流研究…对象封装的方式就介绍到这里，如有错误，望不吝赐教。

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持我们！