JS 对象封装的常用方式

1.常规封装

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

2.升级版 (较常见)

    function Person (example){
this._init_(example);
}
Pserson.prototype = {
constructor : Person,
_init_ : function(example) {
this.name = example.name;
this.age = example.age;
}
say:function(){
console.log('hello everyone');
}
}

3.new 的执行原理

var myNew = function(constructor, args) {
var obj = {};
obj .__proto__ = constructor.prototype;
var res = constructor.apply(obj , args);
var type = typeof res;
if (['string', 'number', 'boolean', 'null', 'undefined'].indexOf(type) !== -1) {
return obj ;
}
return res;
}

解释说明: 通过var obj = {} 构造一个空对象. 将构造函数的原型属性prototype赋值给obj 的原型对象__proto__
,在执行 this.init(example); 这句话的时候,对象 obj 就可以在其原型对象中查找_init_ 方法。(原型链)。

var res = constructor.apply(obj,args);

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

this._init_(example);

就会被 obj 执行

函数

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

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

var type = typeof res;

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

举例

   function Person(name) {
this.name = name;
}
Person.prototype.say = function() {
console.log(this.name);
}
var jack = myFriend(Person, ['jack ']);
console.log(jack );
jack.say();

4.类jQuery 封装

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

代码

    var Person = function(info){
return new Person.prototype.init(info);
} Person.prototype = {
constructor: Person,
init:function(){
this.name = example.name.
}
}
Person.prototype.init.prototype = Person.prototype;
  • 这种封装方式非常巧妙。 将对象的构造操作放在函数的里面,而自己充当一个工厂。 不断调用 prototype 并不是一个直观的做法,于是
    var Person = function(example){
return new Person.fn.init(example);
} Person.fn = Person.prototype = {
constructor: Person,
init:function(){
this.name = info.name;
this.say = function(){
this.makeExp();
}
}
makeExp:function(){
console.log(this.name);
}
}

// 虽然把makeArray 等常用方法挂载到 Person.prorotype 下面,但还是会被 init 这个实例使用.
Person.fn.init.prototype = Person.fn;
最后用 闭包 封装起来

 var Person = (function(win) {
var Person = function(name) {
return new Person.fn.init(name);
} Person.fn = Person.prototype = {
constructor: Person,
init: function(name) {
this.name = name;
this.say = function() {
this.makeExp();
}
},
makeExp: function() {
console.log(this.name);
}
} Person.fn.init.prototype = Person.fn; return Person;
})()

举例:

var people = Person('jack');
console.log(people);
people.say();

object.create();
一种构造对象的方式, 可以传递一个对象Person,构造一个people,并且使people 继承Person.

var Person = {
name: 'jack',
say: function() {
console.log(this.name);
}
}
var people = Object.create(Person);
console.log(people);
people.say();

对象Person的属性成为了people的原型属性,也就是说 people 原型继承自 Person !

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

Object.create = function(prototype){
function Fun(){};
Fun.prototype = prototype;
var obj = new Fun();
return obj;
}

说明:
将 Person 作为 构造函数的 原型属性,就可以构造出 以Person 为原型对象的对象.

Object.create(原型); 创建一个继承该原型的实例对象

关于此方法的一些注意事项:
(1)若传参为Object.prototype,则创建的原型为Object.prototype,

  • 和 new Object()创建的对象是一样的 Object.create(Object.prototype) <==>new
    Object();

(2)若传参为空 或者 null,则创建的对象是没有原型的,

  • 导致该对象是无法用document.write()打印会报错,

因为document.write()打印的原理是调用Object.prototype.toString()方法,
该对象没有原型,也就没有该方法,所以document.write()无法打印


   由此延伸的知识点: 引用值都也是算作是对象,  所以都可以用document.write()打印; 原始值numebr, boolean,
string都有自己对象的包装类, 借助此机制也是可以用document.write()打印出的;
  但undefined 和 null既不是引用值,也没有对应的包装类,    所以应该无法打印的,但大家会发现这两个值也是可是用document.write()打印的, 因为这两个值被设定为特殊值,   

document.write()打印其是不用调用任何方法的,而是之直接打印其值

JS对象之封装(二)的更多相关文章

  1. js对象系列【二】深入理解js函数,详解作用域与作用域链。

    这次说一下对象具体的一个实例:函数,以及其对应的作用域与作用域链.简单的东西大家查下API就行了,这里我更多的是分享自己的理解与技巧.对于作用域和作用域链,相信绝大多数朋友看了我的分享都能基本理解,少 ...

  2. JS 对象封装的常用方式

    JS是一门面向对象语言,其对象是用prototype属性来模拟的,下面,来看看如何封装JS对象. 常规封装 function Person (name,age,sex){ this.name = na ...

  3. js原生设计模式——7原型模式之真正的原型模式——对象复制封装

    <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8&qu ...

  4. JSON(二)——JavaScript中js对象与JSON格式字符串的相互转换

    首先我们来看一下js中JSON格式的字符串 var JSONStr1 = "{\"name\" : \"张三\"}"; 注意以下的写法不是j ...

  5. 点滴笔记(二):利用JS对象把值传到后台

    记得以前刚写asp.net 从前台往后台传值 都是var data=A,B,C,D,E; 循环添加用逗号隔开 后台还要被测试测出只输入,就错了 哈哈..后来用✈◆类似的符号隔开 不是长久之计... 现 ...

  6. js 对象深复制,创建对象和继承

    js 对象深复制,创建对象和继承.主要参考高级编程第三版,总结网上部分资料和自己的代码测试心得.每走一小步,就做一个小结. 1.对象/数组深复制 一般的=号传递的都是对象/数组的引用,如在控制台输入 ...

  7. 【转】第7篇:Xilium CefGlue 关于 CLR Object 与 JS 交互类库封装报告:全自动注册与反射方法分析

    作者: 牛A与牛C之间 时间: 2013-12-12 分类: 技术文章 | 2条评论 | 编辑文章 主页 » 技术文章 » 第7篇:Xilium CefGlue 关于 CLR Object 与 JS ...

  8. 【转】第6篇:Xilium CefGlue 关于 CLR Object 与 JS 交互类库封装报告:自动注册JS脚本+自动反射方法分析

    作者: 牛A与牛C之间 时间: 2013-11-21 分类: 技术文章 | 暂无评论 | 编辑文章 主页 » 技术文章 » 第6篇:Xilium CefGlue 关于 CLR Object 与 JS ...

  9. 【转】第5篇:Xilium CefGlue 关于 CLR Object 与 JS 交互类库封装报告:自动注册JS脚本+委托回调方法分析

    作者: 牛A与牛C之间 时间: 2013-11-19 分类: 技术文章 | 暂无评论 | 编辑文章 主页 » 技术文章 » 第5篇:Xilium CefGlue 关于 CLR Object 与 JS ...

随机推荐

  1. 使用命令安装laravel 项目

    cp .env.example .env   拷贝.env 文件 php artisan key:generate  生成秘钥 php artisan migrate   生成数据表 composer ...

  2. yii执行流程简单介绍

    1. 用户访问 http://www.example.com/index.php?r=post/show&id=1,Web 服务器执行入口脚本 index.php 来处理该请求.  2. 入口 ...

  3. django框架基础-ORM进阶-长期维护

    ###############    ORM进阶---contenttype    ################ 设计思路: """ 路飞有两种课,专题课和学位课, ...

  4. 如何使用iTunes制作iPhone铃声

    新版iTunes(iTunes11)推出以后,界面上发生了一些改变,给人带来一种面貌一新的感觉,但也给许多朋友带来一些操作上的不太适应.下面就大家比较关心的iPhone的铃声制作方法,我在iTunes ...

  5. MongoDBcrud操作,采集部分代码

    using System; using System.Collections.Generic; using System.ComponentModel.Design; using System.Lin ...

  6. bubble chart|Matrix Scatter|Overlay Scatter|Scatterplots|drop-line|box plot|Stem-and-leaf plot|Histogram|Bar chart|Pareto chart|Pie chart|doughnut chart|

    应用统计学 对类别数据要分类处理: Bar chart复式条形图便于对比: Pareto chart:对类别变量依据频数高低排列: Pie chart:饼图用于一个样本,可以区分类别数据 doughn ...

  7. 科学家用AI看月球后,却发现了这些东西

    ​​人工智能(AI)几乎已经无所不在,我们生活的大多数方面都已经被它们渗透,随着AI在过去几年取得的令人震惊的进步,它在许多方面都可能帮助我们的生活变得更美好.近日,AI在月球上发现了近7000个未被 ...

  8. 「CometOJ」Contest #11

    Link Aeon 显然字典序最大就是把最小的字母放在最后 Business [动态规划] 简单dp dp[i][j]dp[i][j]dp[i][j]表示到第iii天,当前有jjj块钱,最后返还的钱最 ...

  9. Win10下JDK环境搭建的两种方法

    jdk1.8--64位官网下载的百度网盘 https://pan.baidu.com/s/1A7jYfupwMWZawb5z_RSdJg 提取码:    92eu 第一种方法(建议)    变量名:  ...

  10. form组件及cookie和session

    多对多关系表的三种创建方式 1.全自动创建 优势:不需要你手动创建第三张表 不足:由于第三张表不是你手动创建的,也就意味着,第三张表字段是固定的无法更改 class Book(models.Model ...