详解JS对象封装的常用方式

 更新时间:2016年12月30日 10:19:44   作者:何问起  
JS是一门面向对象语言,其对象是用prototype属性来模拟的,本文介绍了如何封装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对象封装的方式就介绍到这里,如有错误,望不吝赐教.

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

相关文章

  • layui 中select下拉change事件失效的解决方法

    layui 中select下拉change事件失效的解决方法

    今天小编就为大家分享一篇layui 中select下拉change事件失效的解决方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • JavaScript实现点击按钮后变灰避免多次重复提交

    JavaScript实现点击按钮后变灰避免多次重复提交

    注册的时候需要发送验证激活帐号的邮件,为了避免邮件的多次重复发送,所以可以在点击了发送后,设置按钮变灰,倒计时一段时间后又可重复点击,具体实现如下,感兴趣的朋友可以参考下哈
    2013-07-07
  • JS发起HTTP请求的多种方式总结

    JS发起HTTP请求的多种方式总结

    这篇文章主要为大家详细介绍了JavaScript发起HTTP请求的多种方式,文中的示例代码讲解详细,具有一定的学习价值,感兴趣的小伙伴可以跟随小编一起学习一下
    2023-11-11
  • JS中的回调函数实例浅析

    JS中的回调函数实例浅析

    这篇文章主要介绍了JS中的回调函数,结合实例形式简单分析了javascript回调函数的感念、功能、使用方法及相关注意事项,需要的朋友可以参考下
    2018-03-03
  • 微信小程序手机号验证码登录的项目实现

    微信小程序手机号验证码登录的项目实现

    本文主要介绍了微信小程序手机号验证码登录的项目实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-04-04
  • javascript模拟git diff命令实现文本文件差异比较

    javascript模拟git diff命令实现文本文件差异比较

    这篇文章主要为大家详细介绍了javascript如何模拟git diff命令实现文本文件差异比较效果,文中的示例代码讲解详细,感兴趣的小伙伴可以参考下
    2023-12-12
  • 详解JavaScript中数组的reduce方法

    详解JavaScript中数组的reduce方法

    js函数中有三个在特定场合很好用的函数:reduce(),map(),filter()。而数组经常用到的方法有push、join、indexOf、slice等等,但是有一个经常被我们忽略的方法:reduce,这个方法简直强大的不要不要的。下面通过这篇文章来一起学习学习吧。
    2016-12-12
  • 一文秒懂JavaScript DOM操作基础

    一文秒懂JavaScript DOM操作基础

    通过这篇文章帮助大家快速学习JavaScript DOM操作基础的相关知识,本文给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧
    2021-04-04
  • Javascript中各种trim的实现详细解析

    Javascript中各种trim的实现详细解析

    这篇文章主要是对Javascript中各种trim的实现进行了详细的介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2013-12-12
  • javascript实现英文首字母大写

    javascript实现英文首字母大写

    本文给大家总结了几种可以实现英文首字母大写的javascript脚本,另附上一个CSS的实现方法,非常的简单实用,这里推荐给大家,有需要的小伙伴可以参考下。
    2015-04-04

最新评论