javascript对象封装的常用方式

原创 花落如海 随笔 js 321阅读 2017-05-23 16:40:18 举报

1.常规的封装方式

javascript 代码

这种方式是比较常见的方式,比较直观,但是Person() 的职责是构造对象,如果把初始化的事情也放在里面完成,代码就会显得繁琐,如果放在一个方法里初始化会不会好点呢?

升级版 (常见)

javascript 代码

new 的执行原理

new 的执行过程可以用下面一个函数来代替

javascript 代码

解释:
首先通过 var o = {} 构造一个空对象.
然后将 构造函数的原型属性prototype赋值给o 的原型对象proto 。这样,在执行 this.init(info); 这句话的时候,对象 o 就可以在其原型对象中查找init 方法。(原型链)。
之后这句话 就是精髓了。

javascript 代码

以o为上下文调用函数,同时将参数作为数组传递。那么,javascript 代码

这句话就会被 o 执行,
函数
javascript 代码

以 o 为上下文调用,o也将拥有自己的 name,age,sex 属性。

如果在构造函数中,return 复合类型,包括对象,函数,和正则表达式,那么就会直接返回这个对象,否则,返回 o 。
javascript 代码

测试一下
javascript 代码

类jQuery 封装

这种方式是我从 jQuery 那里学来的。

jQuery 对象具有很强的集成性,可以作为函数调用,也可以做为对象调用,当作为函数调用的时候,她可以无需 new 而返回它的一个实例,很方便。

先看代码

javascript 代码

这种封装方式非常巧妙。
将对象的构造操作放在函数的里面,而自己充当一个工厂。
不断调用 prototype 并不是一个直观的做法,于是
javascript 代码

最后用 闭包 封装起来
javascript 代码

测试一下
javascript 代码

object.create();

最后js也提供了一种构造对象的方式,object.create(); 可以传递一个对象Person,构造一个p,并且使p 继承Person.
javascript 代码

结果

可以看到,对象Person的属性成为了p的原型属性,也就是说 p 原型继承自 Person !

我们可以实现一个 Object.create()

javascript 代码

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复