JS 对象封装的经常使用方式

JS是一门面向对象语言,其对象是用prototype属性来模拟的,下面,来看看如何封装JS对象.

常规封装

function Person (name,age,sex){ this.name = name; this.age = age; this.sex = sex; } Pserson.prototype = { constructor:Person, sayHello:function(){ console.log('hello'); } }

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

升级版 (常见)

function Person (info){ this._init_(info); } Pserson.prototype = { constructor : Person, _init_ : function(info) { this.name = info.name; this.age = info.age; this.sex = info.sex; } sayHello:function(){ console.log('hello'); } }

但是,说到这里就发现,name,age,sex 并无在Person里面申明,哪来的呢???

new 的执行原理

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

var myNew = function(constructor, args) { var o = {}; o.__proto__ = constructor.prototype; var res = constructor.apply(o, args); var type = typeof res; if (['string', 'number', 'boolean', 'null', 'undefined'].indexOf(type) !== -1) { return o; } return res; }

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

var res = constructor.apply(o,args);

以o为上下文调用函数，同时将参数做为数组传递。那么，

this._init_(info);

这句话就会被 o 执行，
函数

_init_ : function(info) { this.name = info.name; this.age = info.age; this.sex = info.sex; }

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

若是在构造函数中，return 复合类型，包括对象，函数，和正则表达式，那么就会直接返回这个对象，不然，返回 o 。

var type = typeof res; if(['string','number','boolean','null','undefined'].indexOf(type) !== -1){ return o; } return res;

测试一下

function Person(name) { this.name = name; } Person.prototype.sayHello = function() { console.log(this.name); } var o1 = myNew(Person, ['pawn']); console.log(o1); o1.sayHello();

OK 吧

类jQuery 封装

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

jQuery 对象具备很强的集成性，能够做为函数调用，也能够作为对象调用，看成为函数调用的时候，她能够无需 new 而返回它的一个实例，很方便。

先看代码

var Person = function(info){ return new Person.prototype.init(info); } Person.prototype = { constructor: Person, init:function(){ this.name = info.name. } } Person.prototype.init.prototype = Person.prototype; 

这种封装方式很是巧妙。
将对象的构造操做放在函数的里面，而本身充当一个工厂。
不断调用 prototype 并非一个直观的作法，因而

var Person = function(info){ return new 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 下面,但仍是会被 init 这个实例使用. Person.fn.init.prototype = Person.fn; 

最后用 闭包 封装起来

var Person = (function(window) { var Person = function(name) { return new Person.fn.init(name); } Person.fn = Person.prototype = { constructor: Person, init: function(name) { this.name = name; this.sayHello = function() { this.makeArray(); } }, makeArray: function() { console.log(this.name); } } Person.fn.init.prototype = Person.fn; return Person; })(); 

测试一下

var p = Person('pawn'); console.log(p); p.sayHello(); 

object.create();

最后js也提供了一种构造对象的方式,object.create(); 能够传递一个对象Person,构造一个p,而且使p 继承Person.

var Person = { name: 'pawn', sayHello: function() { console.log(this.name); } } var p = Object.create(Person); console.log(p); p.sayHello();

结果

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

咱们能够实现一个 Object.create()

Object.create = function(prototype){ function Func(){}; Func.prototype = prototype; var o = new Func(); return o; }

在这里,咱们将 Person 做为 构造函数的 原型属性,就能够构造出 以Person 为原型对象的对象.

测试一下

OK

关于 JS对象封装的方式就介绍到这里,若有错误,望不吝赐教.