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


Posted in Javascript onDecember 30, 2016

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

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

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

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

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

结果

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

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

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

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

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

测试一下

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

OK

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

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

Javascript 相关文章推荐
保证JavaScript和Asp、Php等后端程序间传值编码统一
Apr 17 Javascript
修改js Calendar日历控件 兼容IE9/谷歌/火狐
Jan 04 Javascript
js AppendChild与insertBefore用法详细对比
Dec 16 Javascript
高效利用Angular中内置服务$http、$location等
Mar 22 Javascript
BootStrap入门教程(一)之可视化布局
Sep 19 Javascript
js本地图片预览实现代码
Oct 09 Javascript
JavaScript Base64 作为文件上传的实例代码解析
Feb 14 Javascript
node.js多个异步过程中判断执行是否完成的解决方案
Dec 10 Javascript
浅谈使用mpvue开发小程序需要注意和了解的知识点
May 23 Javascript
apicloud拉起小程序并传递参数的方法示例
Nov 21 Javascript
微信小程序进入广告实现代码实例
Sep 19 Javascript
vue实现循环滚动列表
Jun 30 Javascript
Jquery EasyUI Datagrid右键菜单实现方法
Dec 30 #Javascript
jQuery与js实现颜色渐变的方法
Dec 30 #Javascript
javascript工厂模式和构造函数模式创建对象方法解析
Dec 30 #Javascript
ajax图片上传,图片异步上传,更新实例
Dec 30 #Javascript
浅谈JavaScript的函数及作用域
Dec 30 #Javascript
解析ajaxFileUpload 异步上传文件简单使用
Dec 30 #Javascript
JS实现的样式切换功能tableCSS实例
Dec 30 #Javascript
You might like
ThinkPHP框架里隐藏index.php
2016/04/12 PHP
php结合mysql与mysqli扩展处理事务的方法
2016/06/29 PHP
PHP7基于curl实现的上传图片功能
2018/05/11 PHP
jquery之Document元素选择器篇
2008/08/14 Javascript
jQuery中创建实例与原型继承揭秘
2011/12/21 Javascript
jQuery中outerHeight()方法用法实例
2015/01/19 Javascript
简单谈谈javascript中的变量、作用域和内存问题
2015/08/30 Javascript
Angular.js中$apply()和$digest()的深入理解
2016/10/13 Javascript
基于vue.js轮播组件vue-awesome-swiper实现轮播图
2017/03/17 Javascript
ES5学习教程之Array对象
2017/04/01 Javascript
基于Cookie常用操作以及属性介绍
2017/09/07 Javascript
Vue如何从1.0迁移到2.0
2017/10/19 Javascript
Angular 容器部署的方法
2018/04/17 Javascript
JS实现的3des+base64加密解密算法完整示例
2018/05/18 Javascript
详解操作虚拟dom模拟react视图渲染
2018/07/25 Javascript
使用Vue父子组件通信实现todolist的功能示例代码
2019/04/11 Javascript
js实现图片3D轮播效果
2019/09/21 Javascript
Python调用C语言的方法【基于ctypes模块】
2018/01/22 Python
使用DataFrame删除行和列的实例讲解
2018/04/08 Python
对numpy.append()里的axis的用法详解
2018/06/28 Python
详解python如何在django中为用户模型添加自定义权限
2018/10/15 Python
解决django前后端分离csrf验证的问题
2019/02/03 Python
深入分析python 排序
2020/08/24 Python
python开发一款翻译工具
2020/10/10 Python
canvas绘制表情包的示例代码
2018/07/09 HTML / CSS
详解通过变换矩阵实现canvas的缩放功能
2019/01/14 HTML / CSS
HTML5 input placeholder 颜色修改示例
2014/05/30 HTML / CSS
瑞典首都斯德哥尔摩的多元奢侈时尚品牌:Acne Studios
2017/07/09 全球购物
经贸日语毕业生自荐信
2013/11/03 职场文书
会计专业自荐信范文
2013/12/02 职场文书
旅游项目开发策划书
2014/01/18 职场文书
基层党组织建设整改方案
2014/09/16 职场文书
2015年城管执法工作总结
2015/07/23 职场文书
公司与个人合作协议书
2016/03/19 职场文书
辞职信怎么写?
2019/05/21 职场文书
HTML5页面打开微信小程序功能实现
2022/09/23 HTML / CSS