`

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

    博客分类:
  • js
阅读更多
<div class="iteye-blog-content-contain" style="font-size: 14px">
  <color=red>
   一、申明函数的三种方法 (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中的“运算符”具体是什么不清楚,从而无法解释,这样,性能自然打了折扣。

当然,当我们有特殊用途,如允许用户去创建他们自定义的函数时,我们可以采用这种函数申明方式,不过我们还是应尽量避免这样使用。



</color>

</div>
分享到:
评论

相关推荐

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

    一、申明函数的三种方法 (Declaring a Function) 方法一:function functionName([parameters]){functionBody}; Example D1 代码如下: function add(a, b) { return a+b; } alert&#40;add(1,2&#41;); // produces ...

    JavaScript中的函数申明、函数表达式、箭头函数

    本篇文章将详细探讨JavaScript中的三种函数创建方式:函数声明、函数表达式和箭头函数。 1. **函数声明** 函数声明使用`function`关键字来定义一个函数,如`function getName() {...}`。这种声明方式的特点是,...

    JavaScript学习总结.pdf

    17. 方法:在一个对象中绑定函数,称为这个对象的方法 知识点:方法 方法的使用使得对象的操作更加灵活和多样化,可以满足不同的需求。 18. 高阶函数: * map():map() 方法定义在 JavaScript 的 Array 中,有一...

    JavaScript下申明对象的几种方法小结

    call方法是JavaScript函数对象的一个重要特性,允许一个函数在指定的this值和初始参数下被调用。 - 使用call方法调用函数:可以指定函数执行时的this值,例如 `abc.call(obj);` 会调用函数 `abc`,但是将 `this` ...

    JavaScript 50道面试题及答案.docx

    * 时间监听:可以绑定多个事件,每个事件可以指定多个回调函数,且可以“去耦合”。 * 发布/订阅:性质与“事件监听”类似,但是明显优于后者。 * 事件流:从页面中接收事件的顺序。 * Promises 对象:是一种异步...

    javascript 用原型继承来实现对象系统

    在JavaScript中,每个对象都有一个特殊的属性`__proto__`(ES6中使用`Object.getPrototypeOf`),它指向对象的原型。当尝试访问一个对象的属性或方法时,如果该对象自身没有这个属性,则会沿着原型链向上查找,直到...

    Kotlin中文版文档

    代理模式是设计模式中的一种,它允许通过一个代理类来控制对另一个对象的访问。Kotlin中的代理模式可以用来实现懒加载或代理属性。代理属性是Kotlin的特有功能,用于通过自定义的getter和setter方法来控制属性的访问...

    一个不错的javaScirpt例子

    如果需要查询条件的,需要设置query为一个函数对象。该函数对象具有pageSize和pageIndex变量,翻页时自动为该函数设置这两个变量。 &lt;br&gt;可选功能: 打印支持,生成打印控制界面,允许开发者设置页面的Head区域...

    jQuery选择器的工作原理和优化分析

    `find`函数会遍历当前jQuery对象中的每个元素,然后在这些元素中查找匹配的子元素。如果直接写成`$(‘#id’).find(‘.className’)`,则在找到`#id`元素后,只在该元素的后代中查找`.className`,这样减少了遍历DOM...

    jquery选择器原理介绍($()使用方法)

    每次使用$()函数申明一个jQuery对象时,返回的是jQuery.prototype.init对象的实例。这里需要注意的是,init不是jQuery.fn的方法,而是一个构造函数。JavaScript的prototype对象可以实现继承,而JavaScript对象只是...

    工程硕士学位论文 基于Android+HTML5的移动Web项目高效开发探究

    除此之外,用户需要亲临检测机构实地送检,在检测的每一个环节用户也无法有效的进行追踪,这些都制约着认证检测领域的进一步发展。鉴于市场上用户的手机型号、种类、屏幕分辨率等参差不齐,传统方式根据主流系统分别...

    TypeScript Array(数组)

    TypeScript还支持数组解构,这是一种优雅地从数组中提取元素并赋值给变量的方法: ```typescript var arr: number[] = [12, 13]; var [x, y] = arr; console.log(x); console.log(y); ``` 这段代码会将数组`arr`的...

    前端代码规范文档,js,css,html等

    1.2.3 分块注释:在每一个块状元素、列表元素和表格元素后,加上一对 HTML 注释。 1.2.4 语义化标签:优先使用语义化标签,避免一个页面都是 div 或者 p 标签。 1.2.5 引号使用:使用双引号 (" ") 而不是单引号 ...

Global site tag (gtag.js) - Google Analytics