JS 对象封装的常用方式

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

常规封装

<span class="hljs-function"><span class="hljs-keyword">function <span class="hljs-title">Person (<span class="hljs-params">name,age,sex){
   this.name = name;
   this.age = age;
   this.sex = sex;
}

Pserson.prototype = {
   constructor:Person,
   sayHello:function(){
       <span class="hljs-built_in">console.log(<span class="hljs-string">'hello');
   }
}</span></span></span></span></span></span>

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

<span class="hljs-function"><span class="hljs-keyword">function <span class="hljs-title">Person (<span class="hljs-params">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(){
       <span class="hljs-built_in">console.log(<span class="hljs-string">'hello');
   }
}</span></span></span></span></span></span>

可是,说到这里就发现,name,age,sex 并没有在Person里面申明,哪来的呢??? new 的执行原理

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

<span class="hljs-keyword">var myNew = <span class="hljs-function">function<span class="hljs-params">(constructor, args) <span class="hljs-comment">{
    var o = {};
    o.__proto__ = constructor.<span class="hljs-title">prototype;
    var res = constructor.apply(o, args);
    var type = typeof res;
    if ([<span class="hljs-string">'string', 'number', 'boolean', 'null', 'undefined'].indexOf(type) !== -<span class="hljs-number">1) {
        return o;
    }
    return res;
}</span></span></span></span></span></span></span>

 解释: 首先通过 var o = {} 构造一个空对象. 然后将 构造函数的原型属性prototype赋值给o 的原型对象\_\_proto\_\_ 。这样，在执行 this.*init*(info); 这句话的时候，对象 o 就可以在其原型对象中查找\_init\_ 方法。（原型链）。 之后这句话 就是精髓了。 ```
<span class="hljs-keyword">var res = <span class="hljs-function">constructor.<span class="hljs-title">apply<span class="hljs-params">(o,args);</span></span></span></span>

以o为上下文调用函数，同时将参数作为数组传递。那么， `
this._init_(info);

 这句话就会被 o 执行， 函数 ```
    _init_ : <span class="hljs-function"><span class="hljs-keyword">function(<span class="hljs-params">info) {
        this.name = info.name;
        this.age = info.age;
        this.sex = info.sex;
    }</span></span></span>

以 o 为上下文调用，o也将拥有自己的 name,age,sex 属性。 如果在构造函数中，return 复合类型，包括对象，函数，和正则表达式，那么就会直接返回这个对象，否则，返回 o 。 `
var type = typeof res;

if([<span class="hljs-symbol">'string','number','boolean','null','undefined'].indexOf(type) <span class="hljs-title">!== -1){
    return o;
}
return res;</span></span></span></span>

 测试一下 ```

    <span class="hljs-function"><span class="hljs-keyword">function <span class="hljs-title">Person(<span class="hljs-params">name) {
        this.name = name;
    }
    Person.prototype.sayHello = function() {
        <span class="hljs-built_in">console.log(this.name);
    }
    var o1 = myNew(Person, [<span class="hljs-string">'pawn']);
    console.log(o1);
    o1.sayHello();</span></span></span></span></span></span>

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 并不是一个直观的做法，于是 ```
<span class="hljs-keyword">var Person = <span class="hljs-function">function(<span class="hljs-params">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(){
        <span class="hljs-built_in">console.log(this.name);
    }
}
<span class="hljs-comment">// 这句话的作用 
// 虽然把makeArray 等常用方法挂载到 Person.prorotype 下面,但还是会被 init 这个实例使用.
Person.fn.init.prototype = Person.fn;
</span></span></span></span></span>

最后用 闭包 封装起来 `

<span class="hljs-keyword">var Person = (<span class="hljs-function">function(<span class="hljs-params">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() {
            <span class="hljs-built_in">console.log(this.name);
        }
    }

    Person.fn.init.prototype = Person.fn;

    return Person;
})();

 测试一下 ```
    <span class="hljs-keyword">var p = Person(<span class="hljs-string">'pawn');
    <span class="hljs-built_in">console.log(p);
    p.sayHello();
</span></span></span>

object.create();

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

<span class="hljs-keyword">var Person = {
    name: <span class="hljs-string">'pawn',
    sayHello: <span class="hljs-function">function(<span class="hljs-params">) {
        <span class="hljs-built_in">console.log(this.name);
    }
}
var p = Object.create(Person);
console.log(p);
p.sayHello();</span></span></span></span></span>

 结果 ![](/storage/uploads/2018/08/857465-20161214013121214-1077689596-1.png) 可以看到,对象Person的属性成为了p的原型属性,也就是说 p 原型继承自 Person ! 我们可以实现一个 Object.create() ```

<span class="hljs-built_in">Object.create = <span class="hljs-function"><span class="hljs-keyword">function(<span class="hljs-params">prototype){
   function <span class="hljs-title">Func(){};
   Func.prototype = prototype;
   var o = new Func();
   return o;
}</span></span></span></span></span>

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

测试一下 OK 关于 JS对象封装的方式就介绍到这里,如有错误,望不吝赐教.