JavaScript 申明函数的三种方法 每个函数就是一个对象(一)

一、申明函数的三种方法 (Declaring a Function)
方法一:function functionName([parameters]){functionBody};

Example D1


代码如下:

function add(a, b)
{
return a+b;
}
alert(add(1,2)); // produces 3

当我们这样申明函数时,函数的内容被解释(但没有执行,要我们调用该函数才会执行),同时,一个名为add的对象已经建立。

方法二:将一个未命名的函数function赋给一个指定变量(var)

Example D2


代码如下:

var add=function(a, b)
{
return a+b;
}
alert(add(1,2)); // produces 3

这种申明的语法看起来怪异,但它可以帮助我们更好地理解“函数即对象”。通过这种方式申明的函数的内容,同样是被解释,而未被执行。
同时,我们还可以这样定义:

Example D2A:


代码如下:

var add=function theAdd(a, b)
{
return a+b;
}
alert(theAdd(1,2)); // produces 3
alert(add(1,2)); // also produces 3

由上面一个例子可以看出,我们既可以通过函数名theAdd调用函数,也可以通过指定的函数变量名add调用函数。

Example D2B:


代码如下:

var myObject=new Object();
myObject.add=function(a,b){return a+b};
// myObject now has a property/a method named "add"
// and I can use it like below
myObject.add(1, 2);

而这个例子表明,当我们需要将一个自定义函数作为某个对象的属性时,这种函数申明方法是非常有用的,它更接近OOP的思想。

方法三:使用new运算符申明函数


代码如下:

varName=new Function([param1Name, param2Name,...paramNName], functionBody);

Example D3:


代码如下:

var add=new Function("a", "b", "return a+b;");
alert(add(3,4)); // produces 7

这里有两个参数a和b,以及一个函数体,返回a+b。同时请注意,new Function(……),这里使用的是大写Function,而不是小写function,这就表明,我们是要建立一个Function对象(回想下new Object()建立一个Object对象)。同时,我们也可以看出,前面的参数名和后面的函数体都是通过字符串形式传递(注意:它们都加了双引号)。我们可以有许多个参数,JavaScript会自动判别函数体,通常是离右边括号最近的那一个参数。当然,我们不一定非得将所有的代码写在同一行,我们可以分多行写,中间使用“+”或者“\”进行联接。“+”和“\”告诉我们,JavaScript将要在下一行寻找剩余的代码。

Example D3A


代码如下:

var add=new Function("a", "b",
"alert" + // chop string using "+"
"('adding '+a+' and ' +b);\ // separate string using "\"
return a+b;");
alert(add(3,4)); // produces 7

当然,通过这种方式申明函数,函数体没有被解释(要直到运行时才被解释),这样便导致了性能的降低。为什么呢?请看下面的例子:

Example D3B


代码如下:

function createMyFunction(myOperator)
{
return new Function("a", "b", "return a" + myOperator + "b;");
}
var add=createMyFunction("+"); // creates "add" function
var subtract=createMyFunction("-"); // creates "subtract" function
var multiply=createMyFunction("*"); // created "multiply" function
// test the functions
alert("result of add="+add(10,2)); // result is 12
alert("result of substract="+subtract(10,2)); // result is 8
alert("result of multiply="+multiply(10,2)); // result is 20
alert(add);

这个例子比较有趣,它在执行时可以通过传递参数(myOperator)分别创建了三个不同的Function对象。然后解释器在意图解释createMyFunction的时候,对return中的“运算符”具体是什么不清楚,从而无法解释,这样,性能自然打了折扣。
当然,当我们有特殊用途,如允许用户去创建他们自定义的函数时,我们可以采用这种函数申明方式,不过我们还是应尽量避免这样使用。

(0)

相关推荐

  • JavaScript 申明函数的三种方法 每个函数就是一个对象(一)

    一.申明函数的三种方法 (Declaring a Function) 方法一:function functionName([parameters]){functionBody}; Example D1 复制代码 代码如下: function add(a, b) { return a+b; } alert(add(1,2)); // produces 3 当我们这样申明函数时,函数的内容被解释(但没有执行,要我们调用该函数才会执行),同时,一个名为add的对象已经建立. 方法二:将一个未命名的函数

  • JavaScript遍历数组的三种方法map、forEach与filter实例详解

    本文实例讲述了JavaScript遍历数组的三种方法map.forEach与filter.分享给大家供大家参考,具体如下: 前言 近一段时间,因为项目原因,会经常在前端对数组进行遍历.处理,JS自带的遍历方法有很多种,往往不加留意,就可能导致知识混乱的现象,并且其中还存在一些坑.前端时间在ediary中总结了js原生自带的常用的对数组遍历处理的方法,分别为:map.forEach.filter,在讲解知识点的同时,会类比相识的函数进行对比,这样会有助于思考方法的利与弊. 一.Js自带的map()

  • JavaScript定义数组的三种方法(new Array(),new Array('x','y')

    如下所示: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Co

  • JavaScript中定义函数的三种方法

    在JavaScript的世界里,定义函数的方法多种多样,这正是JavaScript灵活性的体现,但是正是这个原因让初学者摸不着头脑,尤其对于没有 语言基础的同学.正所谓条条大道通罗马,但是如果道路太多,会让行路者不知所措,因为不知道走那条路才是正途,呵呵,废话一大篇,闲言少叙,先看代码: 复制代码 代码如下: /*第一种方法,使用function语句,格式如下*/ function fn(){ alert("这是使用function语句进行函数定义"); } fn(); /*第二种方法

  • JavaScript去除空格的三种方法(正则/传参函数/trim)

    方法一: 个人认为最好的方法.采用的是正则表达式,这是最核心的原理. 其次.这个方法使用了JavaScript 的prototype 属性 其实你不使用这个属性一样可以用函数实现.但这样做后用起来比较方便. 下面就来看看这个属性是怎么来用的. 返回对象类型原型的引用. objectName.prototype objectName 参数是对象的名称. 说明 用 prototype 属性提供对象的类的一组基本功能.对象的新实例"继承"赋予该对象原型的操作. 例如,要为 Array 对象添

  • JavaScript调用后台的三种方法实例

    方法一:直接使用<%=%>调用 前台JS: 复制代码 代码如下: <script type="text/javascript">         var methodStr = "<%=BehindMethod() %>";         alert(methodStr);         </script> 后头方法: 复制代码 代码如下: public static string BehindMethod()  

  • 结构体类型数据作为函数参数(三种方法)

    (1)用结构体变量名作为参数. 复制代码 代码如下: #include<iostream>#include<string>using namespace std;struct Student{ string name; int score; };int main(){ Student one; void Print(Student one); one.name="千手"; one.score=99; Print(one); cout<<one.nam

  • Javascript定义类(class)的三种方法详解

    将近20年前,Javascript诞生的时候,只是一种简单的网页脚本语言.如果你忘了填写用户名,它就跳出一个警告. 如今,它变得几乎无所不能,从前端到后端,有着各种匪夷所思的用途.程序员用它完成越来越庞大的项目. Javascript代码的复杂度也直线上升.单个网页包含10000行Javascript代码,早就司空见惯.2010年,一个工程师透露,Gmail的代码长度是443000行! 编写和维护如此复杂的代码,必须使用模块化策略.目前,业界的主流做法是采用"面向对象编程".因此,Ja

  • JavaScript定义函数的三种实现方法

    JavaScript定义函数的三种实现方法 [1]正常方法 function print(msg){ document.write(msg); } 对函数进行调用的几种方式: 函数名(传递给函数的参数1,传递给函数的参数2,-.) 变量 = 函数名(传递给函数的参数1,传递给函数的参数2,-.) 对于有返回值的函数调用,也可以在程序中直接使用返回的结果,例如:alert("sum=" + square(2,3)); 不指定任何函数值的函数,返回undefined. [2]构造函数方法 

  • 网页中JS函数自动执行常用三种方法

    本文为大家分享了在网页中JS函数自动执行常用方法,供大家参考,具体内容如下 一.JS方法 1.最简单的调用方式,直接写到html的body标签里面: <body onload="myfunction()"> <html> <body onload="func1();func2();func3();"> </body> </html> 2.在JS语句调用: <script type="text

随机推荐