你了解JavaScript中的function吗?

最新推荐文章于 2024-10-26 16:05:17 发布

转载最新推荐文章于 2024-10-26 16:05:17 发布 · 768 阅读

Javascript 专栏收录该内容

11 篇文章

订阅专栏

本文介绍了JavaScript中Function的基础用法及应用场景，包括Function的定义、作为对象的使用、作为名字空间和方法，以及Closure特性。

Function作为Javascript的核心技术之一,清晰的理解function的机制和用法,对我们进行javascript开发非常重要.今天本人就结合自己的实践为大家介绍一些function在javascript中的一些浅显用法.

AD：2013云计算架构师峰会精彩课程曝光

1. Function是什么

从Javascript对function的定义, function是一个由代码集合而成的对象.

从中我们可看出,我们可以使用向C语言中的函数那样使用function,也可以对function进行面向对象编程.当然Javascript中function的强

大还不止如此.

2. 如何使用function

2.1定义

   
   function myfunc(param) {  
    //code  
}

注意Javascript中的这两个function被认为是同一个:

在运行时到底调用哪一个function取决于加载顺序,后一个加载的function会覆盖前一个.

   
   function func1() {return 'func1'; }  
function func1(name) { return name; }

换句话说就是,function的参数都是可选参数,因此funciton的识别是不包括如参的,而函数入参处的声明是为了引用方便以及可读性.

以上的代码也等价于:

   
   function func1() {  
    return arguments[0] || 'func1';  
}  
func();              //return 'func1'  
func('function'); //return 'function'

2.2 function当作对象

是的没错,在javascript中function就是对象,我们可以向使用一个对象那样使用function.

它可以有自己的属性和方法.有如下的一个funciton:

   
   function nameOf(name) {  
    return name.toUpperCase();   
}

2.2.1 function作为对象进行赋值

   
   var person = person || {};  
person.nameOf = nameOf;  
person.nameOf('yang dong') // return "YANG DONG"

2.2.2 定义function的属性

看看以下的代码, 你能从中的到什么信息:

   
   function nameOf() {return nameOf.blogger;}  
nameOf.blogger = "YANG_DONG";

没错,function可以拥有自己的属性.

考虑这样一种场景, 假如我们要统计某个function被调用的次数.那么我们有两种方式来实现:

1.设定一个全局变量来记录,该funciton被调用的次数,每调用一次,该变量加1:

   
   var globalNameOfCounter = 0;  
nameOf();  
globalNameOfCounter ++;

这样做看起来是没有问题的,在代码还是比较简单的时候,它可以工作的很好,但是随着代码越来越复杂,维护这段逻辑的成本会直线上升.

主要是因为:globalNameOfCounter污染的global命名空间,并且破坏了代码的封装性.

2.使用function的属性

看看以下代码:

   
   function nameOf() {  
    nameOf.counter++;  
    return nameOf.blogger;  
}  
nameOf.blogger = “YANG_DONG"  
nameOf.counter = 0;    
nameOf(); //nameOf.counter = 1  
nameOf(); //nameOf.counter = 2

显而易见,第二种方式有着很好的封装性和维护性.function的属性的应用还不止如此.请看下文.

2.3 function作为名字空间

Javascript不支持名字空间(本人不太理解如此强大的语言为什么不支持名字空间呢,这是为什么呢?),

不过我们依然可以使用其强大的funciton为我们支持名字空间.

从上节我们知道function可以定义自己的属性,我们就可以利用该特性来生成名字空间.请看以下代码:

   
   nameOf.getBloggerName = function() {  
    return nameOf.blogger;  
}

此时在nameOf名字空间之下已经包含了:blogger,counter属性和function getBloggerName.

2.4 function作为method

在javascript中function和method其实是没有什么本质区别的,如果非的区分两者的话,我想也就是this变量不同吧.

   
   function g() {return this;}  
var local = local || {};  
local.method = g; //修改this指向local  
local.method();   //返回local对象  
g();              //返回DOMWindow对象

2.5 function皆为closure

在Javascript中所有的function都绑定了一个scope chain,因此它是一个保存了调用上下文的函数.看看下面的实例代码:

   
   var variable = 'global';  
function getVariable(){  
    var variable = 'local',  
    func = function() {  
        return variable;  
    };  
    return func;  
}  
getVariable()();  //return local;