Rowan Liu's Tech
Home
Blog
CSS
JS
lib
Read
About
GitHub
Home
Blog
CSS
JS
lib
Read
About
GitHub
  • 在专精的路上走的一发不可收拾
  • 生活有感

    • lerna
    • jQuery实践
    • gzip
    • 2018 Web开发,实用指南
    • for 追求
    • Travis CI
    • 前端基础设施(gulp)
    • 知乎Live--前端工程师的职业规划
    • 前端架构演进
    • 组件的重写
    • vue-cli2 to vue-cli3
    • vue3
  • 翻译

    • 开篇
    • [译]在 Angular 中使用拦截器的方式 Top 10
    • 2020年关于 Vue 3 你需要知道的事
    • core-js@3, babel展望未来
    • Vue CLI 插件开发指南
    • @vue/cli-plugin-typescript README
    • @vue/cli-plugin-eslint
    • Vue 3 的开发进展
  • 那些年我面过的试

    • 开篇
    • JavaScript
    • css
  • 数据结构

    • 排序
  • 设计模式

    • 开篇
    • OOP
    • 表单验证

表单验证

Q: 个验证表单功能的任务,内容不多,仅需要验证用户名、邮箱、密码等。

demo1

缺点:

  • 多人协作时,会覆盖。

  • 创建了全局变量影响性能。

用对象收编变量demo2

对象的另一种形式demo3

优点:避免了全局变量,一旦出现覆盖现象,会全部覆盖。

问题:当别人想用你的方法时,不能复制一份,或者说别人不能通过new的方式继承这些方法。

使用返回对象的形式demo4

    var a = checkObject();
    a.checkPassword();

使用类的形式 demo5

    // 此处要通过new关键字来创建对象,因为使用的是类的形式。会改变this的指向到a
    var a = new checkObject();
    a.checkPassword();

写成类的形式之后,每个人在new之后都会有独有一套方法,但是这样做也会带来性能问题,需要改变一下。

将公共方法放在原型上 demo6

这样通过new关键字创建的对象所拥有的方法就是一个了,因为他们要依赖prototype原型依次寻找,而找到的方法都是同一个,都绑定在checkObject对象类的原型上。

demo7

在写法上也可以采用这种将对象赋值到对象原型的方式,不过这种方法和上面的方法不能混用, 否则使用为对象的原型对象赋值新对象时,将会覆盖掉之前对prototype对象赋值的新方法。

链式调用demo8

函数的祖先 demo9

通过给Function对象的原型加入checkEmail方法,即可在所有函数中调用该方法,因为Function是所有函数的祖先。

但是这样添加会污染全局变量,会对其他人的开发造成影响,所以不推荐这种方式。

demo10

这样做就不会污染全局变量。

改链式添加方法、链式调用demo11

使用类式调用(new)demo12

注意在调用时要通过new的方式,实例化对象

Edit this page
Last Updated: 2026/1/12 10:15
Contributors: Rowan Liu
Prev
OOP