JavaScript封装的几种方式

JS 对象封装的常用方式

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

常规封装

?

1 2 3 4 5 6 7 8 9 10 11 12

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

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

 

升级版 (常见)

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

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 的执行过程可以用下面一个函数来代替

?

1 2 3 4 5 6 7 8 9 10

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_ 方法。（原型链）。
之后这句话 就是精髓了。

?

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

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

?

1	this._init_(info);

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

?

1 2 3 4 5

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

 

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

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

?

1 2 3 4 5

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

 测试一下

?

1 2 3 4 5 6 7 8 9

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

 

 

 

call方法:
语法：call([thisObj[,arg1[, arg2[,   [,.argN]]]]])
定义：调用一个对象的一个方法，以另一个对象替换当前对象。
说明：
call 方法可以用来代替另一个对象调用一个方法。call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。
如果没有提供 thisObj 参数，那么 Global 对象被用作 thisObj。

apply方法：
语法：apply([thisObj[,argArray]])
定义：应用某一对象的一个方法，用另一个对象替换当前对象。
说明：
如果 argArray 不是一个有效的数组或者不是 arguments 对象，那么将导致一个 TypeError。
如果没有提供 argArray 和 thisObj 任何一个参数，那么 Global 对象将被用作 thisObj， 并且无法被传递任何参数。

 

 

 

类jQuery 封装

 

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

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

代码

?

1 2 3 4 5 6 7 8 9 10 11

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 并不是一个直观的做法，于是

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

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;

 最后用 闭包 封装起来

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

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;     })();

 测试一下

?

1 2 3

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

 

 

 

object.create()

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

?

1 2 3 4 5 6 7 8 9

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()

?

1 2 3 4 5 6

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

 在这里,我们将 Person 作为 构造函数的 原型属性,就可以构造出 以Person 为原型对象的对象.