首先先看几个函数:

function checkName () {){}// 验证姓名
function checkEmail() {} // 验证邮箱
function checkPassword() {} //验证密码

这相当于创建了三个全局变量,那么就有一个问题出现了,难道函数是变量? 接下来解决这个问题。

首先,函数的另一种表现形式:看下边的三个函数。

var checkName =  function () {){}// 验证姓名
var checkEmail = function () {} // 验证邮箱
var checkPassword = function () {} //验证密码

比较上边两种写法,其实是一样的。。。。。

但是这么看的话,就会发现创建了3个函数保存在变量里来实现功能。

但是,问题又来了。这有什么问题呢?

首先,从功能上来说,是没有问题的。

但是,在团队开发中所写代码的时候就不能只考虑自己了。也要考虑到别人。如果别人也定义了相同的方法,就会覆盖原有的,如果你定义了很多方法,那么这种互相覆盖的问题也是不容易察觉的。

那么,问题又来了。怎么做呢?

那么就是 :用对象收编变量。

可以创建一个检测对象,然后把方法放到里边:

看下边代码:

var CheckObject = {
checkName : function () {){}// 验证姓名
checkEmail: function () {} // 验证邮箱
checkPassword : function () {} //验证密码
}

那么,调用的时候就是 CheckObject.checkName()来调用对象里边的方法。也就是在原来是勇士函数式前面多了一个对象名称。那么,既然可以通过点语法来使用方法,那么是不是能这么创建呢

是的,可以。 对象的另一种形式

var CheckObject = function (){};
CheckObject.checkName = function(){} //验证姓名
CheckObject.checkEmail = function () {} //验证邮箱
CheckObject.checkPassword = function () {} //验证密码

使用和前面是一样的,CheckObject.checkName(),但是别人想用你写的对象方法时,就有些麻烦了,因为对象不能复制一份,或者说这个对象类在用new 关键字创建新的对象时,新创建的对象是不能继承这些方法的。接下来介绍一种 真假对象

 var CheckObject = function () {
return {
checkName:function () {}, //验证姓名
checkEmail:function (){},// 验证邮箱
checkPassword:function(){}//验证密码
}
}

调用即:var a = CheckObject(); a.checkEmail()。当别人想要调用这个函数时,都会返回一个新对象,这样执行过程中明面上是CheckObject 对象,实际上是返回的新对象。

虽然通过创建了新对象完成需求,但是他不是一个真正的类的创建方式,并且创建的对象a 和 CheckObject 没有任何关系,所以要稍加改造一下。

var CheckObject = function () {
this.checkName = function () { } ,
...
}

这种调用方法 这是一个类,那么就是 用到new 关键字 var a = new CheckObject();a.checkName()。

现在我们已经把所有方法都放在了函数内部。通过this 定义所以每次通过new关键字定义的时候,新创建的对象都会对类的this上的属性进行复制。所以这些新创建的对象都会有自己的一套方法,然而有时候这样是很奢侈的。我们需要处理一下。

var CheckObject = function () {};
CheckObject.prototype.checkName = function() {}; //验证姓名 ...

这样创建的好处是,创建的对象所拥有的方法就都是一个了,都要依赖prototype原型一次查找,它们都绑定在CheckObject对象类的原型上,,但是我们还可以继续优化一下

var CheckObject = function () {};
CheckObject.prototype = {
checkName : function() {}, //验证姓名 ...
}

那么使用类:var  a = new CheckObject(); a.checkName();

但是依照上边的方法,调用CheckObject 对象的方法.每次都要调用(a. 方法名)是不是感觉很麻烦。

那么换一种方法

var CheckObject = function  () {};
CheckObject.prototype = {
checkName:function () {return this;}, //验证姓名
checkEmail:function () {return this;}
}

那么调用就是 var a = new CheckObject();a.checkName().checkEmail()  .是不是很省事。

设计模式(一) 灵活的javaScript语言的更多相关文章

  1. javaScript设计模式 -- 灵活的javaScript语言

    因为好长时间的懒惰和懈怠,好久没有更新文章了,从现在开始我会按时更新一些自己总结的一些知识,和研究的东西,希望能让大家从我这里学到一点点的知识. 本文参考了张荣铭的javascript设计模式一书,算 ...

  2. 《JavaScript语言精粹》之函数化

    写在前面 看到好多书评和读书笔记都说<JavaScript语言精粹>字字珠玑,名不虚传..当然,要看得懂才行 其实个人认为函数化部分不是很好,举的例子不是十分恰当,之前看不懂是因为被成功误 ...

  3. 读《JavaScript语言精粹》的一些感言

    最近看了<JavaScript语言精粹>,并且连着看了两遍,如果非要用言语形容的话,那我只能用4个字来形容:相见恨晚.其中的一些经验经过这么多年的摸索其实也了然,但是作者用这么浅薄的书把有 ...

  4. 试读《JavaScript语言精髓与编程实践》

    有幸看到iteye的活动,有幸读到<JavaScript语言精髓与编程实践_第2版>的试读版本,希望更有幸能完整的读到此书. 说来读这本书的冲动,来得很诡异,写一篇读后感,赢一本书,其实奖 ...

  5. 充分发挥 JavaScript 语言的优势

    尽管我在生产环境中使用 JavaScript 长达 8 年之久了,但是,直到最近 2 年,我才开始学习如何正确地编写 JavaScript 代码,根据我对人们的理解,很多开发者都有类似经历.我们有相当 ...

  6. 《JavaScript语言入门教程》记录整理:入门和数据类型

    目录 入门篇 js介绍 历史 基本语法 数据类型 概述 null 和 undefined 数值 字符串 对象 函数 数组 本系列基于阮一峰老师的<JavaScrip语言入门教程>或< ...

  7. 《JavaScript语言入门教程》记录整理:面向对象

    目录 面向对象编程 实例对象与 new 命令 this关键字 对象的继承 Object对象的方法 严格模式(strict mode) 本系列基于阮一峰老师的<JavaScrip语言入门教程> ...

  8. <JavaScript语言精粹>-读书笔记(一)

    用object.hasOwnProperty(variable)来确定这个属性名是否为该对象成员,还是来自于原型链. for(my in obj){ if(obj.hasOwnProperty(my) ...

  9. 《JavaScript语言精粹》小记

    一.前言 以下内容均摘自<JavaScript语言精粹>一书,本人在读这本书时,发现作者诠释JavaScript很犀利,特别是数组部分,固记录下来,想和大家分享下. 随笔主要包含两大部分: ...

随机推荐

  1. Telegra.ph | 简洁的文章发布平台

    https://telegra.ph 自由 Telegraph 并不强调内容管理方这一概念,真正做到了「人人都是媒体」.通过 Telegraph 发布的文章,理论上来说不会存在删除的危险,并且由于会产 ...

  2. ansible roles实践——安装httpd

    1. vim  httpd.yml 2.执行

  3. ssh代理转发

    实验环境 serverA:172.16.2.116 serverB:172.16.2.225 serverC:172.16.2.115 "代理转发"是针对ssh认证过程的一种转发 ...

  4. FastDFS文件同步

    FastDFS同步相关文件: a)10.100.66.82_23000.mark 内容如下: binlog_index=0 binlog_offset=1334 need_sync_old=1 syn ...

  5. Ubuntu 18.04 安装教程

    准备材料 Ubuntu安装U盘 足够的硬盘空间 未初始化的硬盘需要提前初始化 注意事项 Ubuntu安装盘的制作请参考我的另外一个博客,里面写清楚了怎么制作Ubuntu安装盘,步骤非常简单 请将要拿给 ...

  6. ApacheCN C/C++ 译文集(二) 20211204 更新

    编写高效程序的艺术 零.序言 第一部分:性能基础 一.性能和并发性介绍 二.性能测量 三.CPU 架构.资源和性能 四.内存架构和性能 五.线程.内存和并发 第二部分:高级并发 六.并发和性能 七.并 ...

  7. bom-location

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

  8. webpack打包如何统一js和css中图片资源路径

    目前项目应用的是vue-cli,自行修改了部分配置.三个环境的情况跟你差不多,测试/生产环境的层级比你还深. 先说下修改了哪些配置 1-build/utils.js下的cssLoaders内的gene ...

  9. Ajax不允许缓存方法

    AJAX请求后台时会自动缓存,客户端发起请求首先请求缓存,第一次请求即由缓存再请求服务器,返回数据时同样先返回到缓存再展示再客户端.但是如果数据要求随时性呢,数据变化频率高呢?那么如何不让ajax设置 ...

  10. 增删改查简单的sql语句

    insert INSERT   INTO    t_stu   (name,age)  VALUES  ('wang',12) INSERT INTO    t_stu   VALUES(NULL,' ...