在Javascript学习笔记5——类和对象中,我简单地提到了利用JSON去构造一个对象。代码如下:

    <script type="text/javascript">var People = {name: "kym",age: 21,SayHello: function () {alert("Hello,My name is " + this.name + ".I am " + this.age);}}alert(People.name);People.SayHello();</script>

但是我们是不能重用这个对象的,我们如何把这个对象作为原型的呢?

首先,在一个JSON对象有一个构造方法是不可能的了,那么我们就做一个简单的“工厂”吧,写一个方法来专门负责创建。

    <script type="text/javascript">var People = {Create: function (name, age) {this.name = name;this.age = age;},SayHello: function () {alert("Hello,My name is " + this.name + ".I am " + this.age);}}People.Create("kym", 21);People.SayHello();</script>

但是通过这个方法我们却发现,我们没有办法用People作为原型,让我们回顾一下:Javascript学习笔记7——原型链的原理 这篇文章,我们想一下这个过程:

var p=new People();==>p.__proto__=People.prototype。于是当我们p.SayHello()的时候就会去People.prototype中去找,结果什么都找不到。

如果可以People.prototype.SayHello=function(){}就可以解决这个问题。但是我们知道,只有function才可以有prototype。

那么我们想想之前的推导公式,怎么样能让p.SayHello()呢?如果可以p.__proto__=People就好了。那么我们想个办法:

既然在new的时候,某个对象的__proto__只能等于某个函数的prototype,我们设置一个函数X,令p.__proto__=X.prototype,我们再令X.prototype=People。这样的关系是这样:

    <script type="text/javascript">var People = {Create: function (name, age) {this.name = name;this.age = age;},SayHello: function () {alert("Hello,My name is " + this.name + ".I am " + this.age);}};var X = function () { };X.prototype = People;var p = new X();p.Create("kym", 21);p.SayHello();</script>

这样就相当于用X做了一个中间变量,使得我们可以访问JSON对象的内部属性。但是这样是不是不太优雅呢?我们每次创建一个对象时,都需要来写这样一个辅助的函数。那好,我们就把这个过程封装起来:

var Factory = {CreatePeople : function (className,name,age) {var temp = function () {className.Create(name, age);};temp.prototype = className;var result = new temp();return result;}
};
var people = Factory.CreatePeople(People,"kym",21);
people.SayHello();

但是这样也有一个缺点,就是每次我增加一个类,就需要向Factory里注册一个新方法,这样是很麻烦的,我在很久以前的 玩转方法:call和apply 中说过关于call和apply的区别,因为这里的参数不固定,我们不可能一一列举,因此我们在这里可以用apply来改善这个方法:

    <script type="text/javascript">var People = {Create: function (name, age) {this.name = name;this.age = age;},SayHello: function () {alert("Hello,My name is " + this.name + ".I am " + this.age);}};var Factory = {Create: function (className, params) {var temp = function () {className.Create.apply(this, params);};temp.prototype = className;var result = new temp();return result;}};var people = Factory.Create(People,["kym",21]);people.SayHello();</script>

这样,一个完整的创建类就诞生了!那么我们每次创建“类”时就都可以用JSON来做了,然后用户每次都统一来调用Factory.Create()就可以了!

转载于:https://www.cnblogs.com/kym/archive/2010/01/10/1643572.html

Javascript学习笔记8——用JSON做原型相关推荐

  1. JavaScript --- [学习笔记] 原型模式

    说明 接JavaScript - > [学习笔记]观察者模式 & 理解对象 & 工厂模式 & 构造函数模式 上一篇构造函数模式创建的实例,不同实例的同一个方法是不相等的, ...

  2. 千锋JavaScript学习笔记

    千锋JavaScript学习笔记 文章目录 千锋JavaScript学习笔记 写在前面 1. JS基础 1.1 变量 1.2 数据类型 1.3 数据类型转换 1.4 运算符 1.5 条件 1.6 循环 ...

  3. JavaScript学习笔记(五)---cookie、Proxy、服务器、PHP语言、http协议、同步异步、事件轮循机制、ajax编写、接口

    JavaScript学习笔记(五)---cookie.Proxy.服务器.PHP语言.http协议.同步异步.事件轮循机制.ajax编写.接口 1.cookie 1.1cookie概念 1.2cook ...

  4. JavaScript学习笔记(六)--数组

    数组初始化 我们都知道,数组是用于保存多个值的集合,在数组中,值被称为元素,值可以是任意的数据类型.在Javascript中,创建数组通常有两种方式:字面量和构造函数. 字面量 数组的元素可以是任意的 ...

  5. JavaScript学习笔记(三)--操作运算符

    JavaScript中的运算符有很多,主要分为算术运算符,比较运算符,逻辑运算符,三目运算符.一元运算符.位运算符等.这些运算符都有一些属于自己的运算规则,下面就为大家介绍一下JavaScript中的 ...

  6. [学习笔记] Cordova+AmazeUI+React 做个通讯录 - 使用 SQLite

    [学习笔记] Cordova+AmazeUI+React 做个通讯录 系列文章 目录 准备 联系人列表(1) 联系人列表(2) 联系人详情 单页应用 (With Router) 使用 SQLite 传 ...

  7. JavaScript学习笔记(九)(验证框架,layer弹出层)

    JavaScript学习笔记(九) 一.jQuery Validate验证框架 1.引入相关插件路径 2. 修改一些规则 3. 自定义验证规则 4.异步验证 整体代码 二.layer弹出层 1.引入相 ...

  8. JavaScript 学习笔记(二)

    JavaScript 学习笔记(二) 文章目录 JavaScript 学习笔记(二) 一 JSON 1. JSON 对象 什么是JSON对象 JSON对象与Javascript对象的区别 在JavaS ...

  9. JavaScript学习笔记(一)-Learning Advanced JavaScript

    JavaScript学习笔记 (一)- Learning Advanced JavaScript Learning Advanced JavaScript #2: Goal: To be able t ...

最新文章

  1. C++作用域 (二)
  2. php浮点数计算比较及取整不准确解决方法
  3. 【原】使用Json作为Python和C#混合编程时对象转换的中间文件
  4. 你的代码糟粕比精华要多得多
  5. android6.0源码分析之Camera API2.0下的Preview(预览)流程分析
  6. 技术分享 | CodeReview主要Review什么?
  7. Hadoop入门(十七)Mapreduce的多表关联程序
  8. Hibernate缓存级别教程
  9. 基本 Python 词汇
  10. Rock8247 bsp-Tornado-VXWorks Build up
  11. 笔记本电脑如何强制关机_如果你的MacBook一直关机,该怎么办?
  12. Redis系列1——概述
  13. PHP json_decode($json, TRUE) TRUE使数据格式化为Array,而非object
  14. matlab函数_常用于连通区域
  15. 在windows7中安装了office了
  16. 【工具类】使用ffmpeg下载视频
  17. python系列教程176——函数调用
  18. Win10易升-在线升级工具
  19. 老板开会要用Word文档?立马做了一款无限次且免费的PDF转Word小程序。
  20. 双人贪吃蛇c语言,关于C 双人贪吃蛇显示的问题

热门文章

  1. Mr.J-- jQuery学习笔记(三)--静态方法详解
  2. 【LeetCode】24. Swap Nodes in Pairs
  3. mui dtpicker 时间的设置 以及MUI的弹窗
  4. 原根(扩展欧几里得+欧拉函数)
  5. NHibernate 3.3
  6. Note - Shader - 2
  7. 让你瞬间提高工作效率的常用js函数汇总
  8. 一些UED网址的收藏
  9. css-浮动-定位-行内或行内快特点
  10. JavaScript算法(实例六)输出日期 / 数组合并 / 小球下落--反弹运动