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对象封装的方式就介绍到这里,如有错误,望不吝赐教.
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持小牛知识库!
本文向大家介绍python对于requests的封装方法详解,包括了python对于requests的封装方法详解的使用技巧和注意事项,需要的朋友参考一下 由于requests是http类接口的核心,因此封装前考虑问题比较多: 1. 对多种接口类型的支持; 2. 连接异常时能够重连; 3. 并发处理的选择; 4. 使用方便,容易维护; 当前并未全部实现,后期会不断完善。重点提一下并发处理的选择:p
本文向大家介绍js常用DOM方法详解,包括了js常用DOM方法详解的使用技巧和注意事项,需要的朋友参考一下 介绍几个js DOM的常用方法 获取元素节点 getElementById getElementsByTagName getElementsByClassName 先写一个简单的网页做测试: 1. getElementById 1.先定义变量 var contentId =
本文向大家介绍js原生Ajax的封装和原理详解,包括了js原生Ajax的封装和原理详解的使用技巧和注意事项,需要的朋友参考一下 原理及概念 AJAX即“Asynchronous Javascript And XML”(异步JavaScript和XML),是一种用于创建快速动态网页的技术。 动态网页:是指可以通过服务器语言结合数据库随时修改数据的网页。 静态网页,随着html代码的生成,页面的内容和
本文向大家介绍详解js 创建对象的几种方法,包括了详解js 创建对象的几种方法的使用技巧和注意事项,需要的朋友参考一下 在js中创建对象的方法可分为6种,分别是:基本模式、工厂模式、构造函数模式、原型模式、组合模式、动态原型模式,接下来分别看下这几种模式的写法吧 一、基本模式 二、工厂模式 缺点:1、实例之间没有联系;2、没有使用new关键字;3、会造成资源的浪费,每生成一个实例都会都会增加一些重
本文向大家介绍用js封装一个对cookie操作的方法相关面试题,主要包含被问及用js封装一个对cookie操作的方法时的应答技巧和注意事项,需要的朋友参考一下
本文向大家介绍Python面向对象封装操作案例详解 II,包括了Python面向对象封装操作案例详解 II的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了Python面向对象封装操作。分享给大家供大家参考,具体如下: 士兵突击案例 身份运算符 封装 封装 是面向对象编程的一大特点 面向对象编程的 第一步 —— 将 属性 和 方法 封装 到一个抽象的 类 中 外界 使用 类 创建 对象,然后