专注于WEB前端开发,HTML基础知识,CSS基础知识,HTML5和CSS3,Javascript,Jquery,Jquery插件,移动开发,微信开发等技术话题

当前位置:CSSTOP主页 > JS函数 > 正文

js中函数的作用

前面已经提到,在 JavaScript 中,函数可以:
  • 被赋值给一个变量
  • 被赋值为对象的属性
  • 作为参数被传入别的函数
  • 作为函数的结果被返回
我们就分别来看看这些场景。

赋值给一个变量:
//声明一个函数,接受两个参数,返回其和
function add(x, y){
  return x + y;
}
var a = 0;
a = add;//将函数赋值给一个变量
var b = a(2, 3);//调用这个新的函数a
print(b);

这段代码会打印”5”,因为赋值之后,变量 a 引用函数 add,也就是说,a 的值是一个函数对象(一个可执行代码块),因此可以使用 a(2, 3)这样的语句来进行求和操作。

赋值为对象的属性:
var obj = {
  id : "obj1"
}
obj.func = add;//赋值为obj对象的属性
obj.func(2, 3);//返回5

事实上,这个例子与上个例子的本质上是一样的,第一个例子中的 a 变量,事实上是全局对象(如果在客户端环境中,表示为 window 对象)的一个属性。而第二个例子则为 obj 对象,由于我们很少直接的引用全局对象,就分开来描述。

作为参数传递:
//高级打印函数的第二个版本
function adPrint2(str, handler){
  print(handler(str));
}

//将字符串转换为大写形式,并返回
function up(str){
  return str.toUpperCase();
}
//将字符串转换为小写形式,并返回
function low(str){
  return str.toLowerCase();
}
adPrint2("Hello, world", up);
adPrint2("Hello, world", low);
运行此片段,可以得到这样的结果:
HELLO, WORLD
hello, world

应该注意到,函数 adPrint2 的第二个参数,事实上是一个函数,将这个处理函数作为参数传入,在 adPrint2 的内部,仍然可以调用这个函数,这个特点在很多地方都是有用的,特别是,当我们想要处理一些对象,但是又不确定以何种形式来处理,则完全可以将“处理方式”作为一个抽象的粒度来进行包装(即函数)。

作为函数的返回值:
先来看一个最简单的例子:
function currying(){
  return function(){
    print("curring");
  }
}
函数 currying 返回一个匿名函数,这个匿名函数会打印”curring”,简单的调用 currying()会得到下面的结果:
function (){
  print("curring");
}
如果要调用 currying 返回的这个匿名函数,需要这样:
currying()();
第一个括号操作,表示调用 currying 本身,此时返回值为函数,第二个括号操作符调用这个返回值,则会得到这样的结果:
currying