JavaScript函数实现方式大总结

JavaScript函数实现方式大总结，众多的函数实现方式中，你现在用的是哪种？

一：例子需求分析

实现表单验证功能，验证用户名、邮箱、密码。

二：实现方案（13种）

①：全局函数方式

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

②：全局函数的另一种形式

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

③：用对象收编变量

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

调用方法：CheckObject.checkName()

④：对象的另一种形式

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

⑤：真假对象

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

调用方法：

    var a = CheckObject()a.checkEmail()

⑥：类的形式

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

调用方法：

    var a = new CheckObject()a.checkEmail()

⑦：类的形式结合prototype

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

调用方法：见⑧

⑧：⑦的简化写法

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

调用方法：

    var a = new CheckObject()a.checkName()a.checkEmail()a.checkPassword()

⑨：基于⑧实现链式调用

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

调用方法：

    var a = new CheckObject()a.checkName().checkEmail().checkPassword()

⑩：简单粗暴地对函数的祖先进行扩展（一般不建议）

    Function.prototype.checkEmail = function () {// 验证邮箱}

调用方法：

    var f = function () {}f.checkEmail()或var f = new Function()f.checkEmail()

(11)：优雅地对函数祖先进行扩展

    Function.prototype.addMethod = function (name, fn) {this[name] = fn}// 往addMethod中添加方法var methods = new Function() 或 var methods = function () {}methods.addMethod('checkEmail', function () {// 验证邮箱})methods.addMethod('checkName', function () {// 验证姓名})

调用方法：

    methods.checkName()methods.checkEmail()

(12)：链式地对函数祖先进行扩展、链式调用

    Function.prototype.addMethod = function (name, fn) {this[name] = fnreturn this}var methods = new Function()methods.addMethod('checkName', function () {// 验证姓名return this}).addMethod('checkEmail', function () {// 验证邮箱return this}).addMethod('checkPassword', function () {// 验证密码return this})

调用方法：

 methods.checkName().checkEmail().checkPassword()

(13)：将(12)改为类式调用

    Function.prototype.addMethod = function (name, fn) {this.prototype[name] = fnreturn this}var Methods = new Function()Methods.addMethod('checkName', function () {// 验证姓名return this}).addMethod('checkEmail', function () {// 验证邮箱return this}).addMethod('checkPassword', function () {// 验证密码return this})

调用方法：

    var m = new Methods()m.checkName().checkEmail().checkPassword()

总结：

JavaScript是一门很灵活的语言，“灵活性”是这门语言特有的气质。

上边的小需求你来实现的时候，用的是哪种写法呢？欢迎交流交流~~

学习交友：

JavaScript函数实现方式大总结相关推荐

JavaScript 函数定义方式
函数的定义通俗的来讲,函数是由事件驱动的或者当它被调用时执行的可重复使用的代码快.它是 JavaScript 语言一个即重要又复杂的组成部分,任何一个 JavaScript 框架,如 Dojo.jQ ...
Javascript和JQuery函数定义方式
Javascript 函数定义方式 1.function show() { } 2.var cal = function() { },必须先声明才能调用示例: <html> ...
【转载】100多个很有用的JavaScript函数以及基础写法大集合
1.document.write("");为输出语句 2.JS中的注释为// 3.传统的HTML文档顺序是:document->html->(head,body) 4 ...
从JavaScript函数重名看其初始化方式
今天有个哥们问我要是JavaScript函数重名了会有什么后果?开始我没有细想,就说可能会出错吧,可是等我实验完了发现页面没有任何脚本错误提示,而且程序也运行了,只是对同名函数的调用执行了位置靠后的一 ...
JavaScript函数定义的几种方式
什么是函数呢? 对于JS来说,我们可以把函数理解为任意一段代码放在一个盒子里,在我们想要让这段代码执行的时候,直接执行这个盒子里的代码就行.专业一点来讲:JavaScript 函数是被设计为执行特定任 ...
JavaScript函数的命名方式
函数的命名方式 JavaScript代码服用单位是函数,函数可以包含一段可执行代码,也可以接受调用者传入的参数.JavaScript定义函数主要有以下三种方式: 第一种方式:命名函数 <scri ...
javaScript用函数的方式实现闰年的判断：输入一个年份，判断是否是闰年（分析+代码）
题目:输入一个年份,判断是否是闰年分析: (1)闰年的判断条件是能被4整除却不能被100整除的年份.世纪年份能被400整除的是闰年 (2)用一般形式写出判断闰年的程序 (3)将程序改写为函数的方式 ...
JavaScript函数调用方式：简单调用+在超链接中调用JavaScript函数+在事件中调用JavaScript函数
简单的调用 <html> <head> <meta http-equiv="Content-Type" content="text/html ...
JavaScript 函数的定义
一.关于函数 JavaScript函数是指一个特定代码块,可能包含多条语句,可以通过名字来供其他语句调用以执行函数包含的代码语句. 比如我们有一个特定的功能需要三条语句实现那么每次想实现这个功能的时 ...

JavaScript函数实现方式大总结

一：例子需求分析

二：实现方案（13种）

JavaScript函数实现方式大总结相关推荐

最新文章

热门文章