函数是一段可以反复调用的代码块。函数还能接受输入的参数,不同的参数会返回不同的值。

函数的声明

JavaScript 有三种声明函数的方法。

(1)function 命令

function命令声明的代码区块,就是一个函数。function命令后面是函数名,函数名后面是一对圆括号,里面是传入函数的参数。函数体放在大括号里面。

function print(s) {
console.log(s);
}

上面的代码命名了一个print函数,以后使用print()这种形式,就可以调用相应的代码。这叫做函数的声明(Function Declaration)。

(2)函数表达式

除了用function命令声明函数,还可以采用变量赋值的写法。

var print = function(s) {
console.log(s);
};

这种写法将一个匿名函数赋值给变量。这时,这个匿名函数又称函数表达式(Function Expression),因为赋值语句的等号右侧只能放表达式。

采用函数表达式声明函数时,function命令后面不带有函数名。如果加上函数名,该函数名只在函数体内部有效,在函数体外部无效。

var print = function x(){
console.log(typeof x);
}; x
// ReferenceError: x is not defined print()
// function

上面代码在函数表达式中,加入了函数名x。这个x只在函数体内部可用,指代函数表达式本身,其他地方都不可用。这种写法的用处有两个,一是可以在函数体内部调用自身,二是方便除错(除错工具显示函数调用栈时,将显示函数名,而不再显示这里是一个匿名函数)。因此,下面的形式声明函数也非常常见。

var f = function f() {};

需要注意的是,函数的表达式需要在语句的结尾加上分号,表示语句结束。而函数的声明在结尾的大括号后面不用加分号。总的来说,这两种声明函数的方式,差别很细微,可以近似认为是等价的。

(3)Function 构造函数

第三种声明函数的方式是Function构造函数。

var add = new Function(
'x',
'y',
'return x + y'
); // 等同于
function add(x, y) {
return x + y;
}

上面代码中,Function构造函数接受三个参数,除了最后一个参数是add函数的“函数体”,其他参数都是add函数的参数。

你可以传递任意数量的参数给Function构造函数,只有最后一个参数会被当做函数体,如果只有一个参数,该参数就是函数体。

var foo = new Function(
'return "hello world"'
); // 等同于
function foo() {
return 'hello world';
}

Function构造函数可以不使用new命令,返回结果完全一样。

总的来说,这种声明函数的方式非常不直观,几乎无人使用。

函数的重复声明

如果同一个函数被多次声明,后面的声明就会覆盖前面的声明。

function f() {
console.log(1);
}
f() // 2 function f() {
console.log(2);
}
f() // 2

上面代码中,后一次的函数声明覆盖了前面一次。而且,由于函数名的提升(参见下文),前一次声明在任何时候都是无效的,这一点要特别注意。

圆括号运算符,return 语句和递归

调用函数时,要使用圆括号运算符。圆括号之中,可以加入函数的参数。

function add(x, y) {
return x + y;
} add(1, 1) // 2

上面代码中,函数名后面紧跟一对圆括号,就会调用这个函数。

函数体内部的return语句,表示返回。JavaScript 引擎遇到return语句,就直接返回return后面的那个表达式的值,后面即使还有语句,也不会得到执行。也就是说,return语句所带的那个表达式,就是函数的返回值。return语句不是必需的,如果没有的话,该函数就不返回任何值,或者说返回undefined。

函数可以调用自身,这就是递归(recursion)。下面就是通过递归,计算斐波那契数列的代码。

function fib(num) {
if (num === 0) return 0;
if (num === 1) return 1;
return fib(num - 2) + fib(num - 1);
} fib(6) // 8

上面代码中,fib函数内部又调用了fib,计算得到斐波那契数列的第6个元素是8。

第一等公民

JavaScript 语言将函数看作一种值,与其它值(数值、字符串、布尔值等等)地位相同。凡是可以使用值的地方,就能使用函数。比如,可以把函数赋值给变量和对象的属性,也可以当作参数传入其他函数,或者作为函数的结果返回。函数只是一个可以执行的值,此外并无特殊之处。

由于函数与其他数据类型地位平等,所以在 JavaScript 语言中又称函数为第一等公民。

function add(x, y) {
return x + y;
} // 将函数赋值给一个变量
var operator = add; // 将函数作为参数和返回值
function a(op){
return op;
}
a(add)(1, 1)
// 2

函数名的提升

JavaScript 引擎将函数名视同变量名,所以采用function命令声明函数时,整个函数会像变量声明一样,被提升到代码头部。所以,下面的代码不会报错。

f();

function f() {}

表面上,上面代码好像在声明之前就调用了函数f。但是实际上,由于“变量提升”,函数f被提升到了代码头部,也就是在调用之前已经声明了。但是,如果采用赋值语句定义函数,JavaScript 就会报错。

f();
var f = function (){};
// TypeError: undefined is not a function

上面的代码等同于下面的形式。

var f;
f();
f = function () {};

上面代码第二行,调用f的时候,f只是被声明了,还没有被赋值,等于undefined,所以会报错。因此,如果同时采用function命令和赋值语句声明同一个函数,最后总是采用赋值语句的定义。

var f = function () {
console.log('1');
} function f() {
console.log('2');
} f() // 1

不能在条件语句中声明函数

根据 ES5 的规范,不得在非函数的代码块中声明函数,最常见的情况就是if和try语句。

if (foo) {
function x() {}
} try {
function x() {}
} catch(e) {
console.log(e);
}

上面代码分别在if代码块和try代码块中声明了两个函数,按照语言规范,这是不合法的。但是,实际情况是各家浏览器往往并不报错,能够运行。

但是由于存在函数名的提升,所以在条件语句中声明函数,可能是无效的,这是非常容易出错的地方。

if (false) {
function f() {}
} f() // 不报错

上面代码的原始意图是不声明函数f,但是由于f的提升,导致if语句无效,所以上面的代码不会报错。要达到在条件语句中定义函数的目的,只有使用函数表达式。

if (false) {
var f = function () {};
} f() // undefined

函数的属性和方法

name 属性

函数的name属性返回函数的名字。

function f1() {}
f1.name // "f1"

如果是通过变量赋值定义的函数,那么name属性返回变量名。

var f2 = function () {};
f2.name // "f2"

但是,上面这种情况,只有在变量的值是一个匿名函数时才是如此。如果变量的值是一个具名函数,那么name属性返回function关键字之后的那个函数名。

var f3 = function myName() {};
f3.name // 'myName'

上面代码中,f3.name返回函数表达式的名字。注意,真正的函数名还是f3,而myName这个名字只在函数体内部可用。

name属性的一个用处,就是获取参数函数的名字。

var myFunc = function () {};

function test(f) {
console.log(f.name);
} test(myFunc) // myFunc

上面代码中,函数test内部通过name属性,就可以知道传入的参数是什么函数。

length 属性

函数的length属性返回函数预期传入的参数个数,即函数定义之中的参数个数。

function f(a, b) {}
f.length // 2

上面代码定义了空函数f,它的length属性就是定义时的参数个数。不管调用时输入了多少个参数,length属性始终等于2。

length属性提供了一种机制,判断定义时和调用时参数的差异,以便实现面向对象编程的”方法重载“(overload)。

toString()

函数的toString方法返回一个字符串,内容是函数的源码。

function f() {
a();
b();
c();
} f.toString()
// function f() {
// a();
// b();
// c();
// }

函数内部的注释也可以返回。

function f() {/*
这是一个
多行注释
*/} f.toString()
// "function f(){/*
// 这是一个
// 多行注释
// */}"

利用这一点,可以变相实现多行字符串。

var multiline = function (fn) {
var arr = fn.toString().split('\n');
return arr.slice(1, arr.length - 1).join('\n');
}; function f() {/*
这是一个
多行注释
*/} multiline(f);
// " 这是一个
// 多行注释"

函数作用域

定义

作用域(scope)指的是变量存在的范围。在 ES5 的规范中,Javascript 只有两种作用域:一种是全局作用域,变量在整个程序中一直存在,所有地方都可以读取;另一种是函数作用域,变量只在函数内部存在。ES6 又新增了块级作用域,本教程不涉及。

函数外部声明的变量就是全局变量(global variable),它可以在函数内部读取。

var v = 1;

function f() {
console.log(v);
} f()
// 1

上面的代码表明,函数f内部可以读取全局变量v。

在函数内部定义的变量,外部无法读取,称为“局部变量”(local variable)。

function f(){
var v = 1;
} v // ReferenceError: v is not defined

上面代码中,变量v在函数内部定义,所以是一个局部变量,函数之外就无法读取。

函数内部定义的变量,会在该作用域内覆盖同名全局变量。

var v = 1;

function f(){
var v = 2;
console.log(v);
} f() // 2
v // 1

上面代码中,变量v同时在函数的外部和内部有定义。结果,在函数内部定义,局部变量v覆盖了全局变量v。

注意,对于var命令来说,局部变量只能在函数内部声明,在其他区块中声明,一律都是全局变量。

if (true) {
var x = 5;
}
console.log(x); // 5

上面代码中,变量x在条件判断区块之中声明,结果就是一个全局变量,可以在区块之外读取。

函数内部的变量提升

与全局作用域一样,函数作用域内部也会产生“变量提升”现象。var命令声明的变量,不管在什么位置,变量声明都会被提升到函数体的头部。

function foo(x) {
if (x > 100) {
var tmp = x - 100;
}
} // 等同于
function foo(x) {
var tmp;
if (x > 100) {
tmp = x - 100;
};
}

函数本身的作用域

函数本身也是一个值,也有自己的作用域。它的作用域与变量一样,就是其声明时所在的作用域,与其运行时所在的作用域无关。

var a = 1;
var x = function () {
console.log(a);
}; function f() {
var a = 2;
x();
} f() // 1

上面代码中,函数x是在函数f的外部声明的,所以它的作用域绑定外层,内部变量a不会到函数f体内取值,所以输出1,而不是2。

总之,函数执行时所在的作用域,是定义时的作用域,而不是调用时所在的作用域。

很容易犯错的一点是,如果函数A调用函数B,却没考虑到函数B不会引用函数A的内部变量。

var x = function () {
console.log(a);
}; function y(f) {
var a = 2;
f();
} y(x)
// ReferenceError: a is not defined

上面代码将函数x作为参数,传入函数y。但是,函数x是在函数y体外声明的,作用域绑定外层,因此找不到函数y的内部变量a,导致报错。

同样的,函数体内部声明的函数,作用域绑定函数体内部。

function foo() {
var x = 1;
function bar() {
console.log(x);
}
return bar;
} var x = 2;
var f = foo();
f() // 1

上面代码中,函数foo内部声明了一个函数bar,bar的作用域绑定foo。当我们在foo外部取出bar执行时,变量x指向的是foo内部的x,而不是foo外部的x。正是这种机制,构成了下文要讲解的“闭包”现象。

参数

概述

函数运行的时候,有时需要提供外部数据,不同的外部数据会得到不同的结果,这种外部数据就叫参数。

function square(x) {
return x * x;
} square(2) // 4
square(3) // 9

上式的x就是square函数的参数。每次运行的时候,需要提供这个值,否则得不到结果。

参数的省略

函数参数不是必需的,Javascript 允许省略参数。

function f(a, b) {
return a;
} f(1, 2, 3) // 1
f(1) // 1
f() // undefined f.length // 2

上面代码的函数f定义了两个参数,但是运行时无论提供多少个参数(或者不提供参数),JavaScript 都不会报错。省略的参数的值就变为undefined。需要注意的是,函数的length属性与实际传入的参数个数无关,只反映函数预期传入的参数个数。

但是,没有办法只省略靠前的参数,而保留靠后的参数。如果一定要省略靠前的参数,只有显式传入undefined。

function f(a, b) {
return a;
} f( , 1) // SyntaxError: Unexpected token ,(…)
f(undefined, 1) // undefined

上面代码中,如果省略第一个参数,就会报错。

传递方式

函数参数如果是原始类型的值(数值、字符串、布尔值),传递方式是传值传递(passes by value)。这意味着,在函数体内修改参数值,不会影响到函数外部。

var p = 2;

function f(p) {
p = 3;
}
f(p); p // 2

上面代码中,变量p是一个原始类型的值,传入函数f的方式是传值传递。因此,在函数内部,p的值是原始值的拷贝,无论怎么修改,都不会影响到原始值。

但是,如果函数参数是复合类型的值(数组、对象、其他函数),传递方式是传址传递(pass by reference)。也就是说,传入函数的原始值的地址,因此在函数内部修改参数,将会影响到原始值。

var obj = { p: 1 };

function f(o) {
o.p = 2;
}
f(obj); obj.p // 2

上面代码中,传入函数f的是参数对象obj的地址。因此,在函数内部修改obj的属性p,会影响到原始值。

注意,如果函数内部修改的,不是参数对象的某个属性,而是替换掉整个参数,这时不会影响到原始值。

var obj = [1, 2, 3];

function f(o) {
o = [2, 3, 4];
}
f(obj); obj // [1, 2, 3]

上面代码中,在函数f内部,参数对象obj被整个替换成另一个值。这时不会影响到原始值。这是因为,形式参数(o)的值实际是参数obj的地址,重新对o赋值导致o指向另一个地址,保存在原地址上的值当然不受影响。

同名参数

如果有同名的参数,则取最后出现的那个值。

function f(a, a) {
console.log(a);
} f(1, 2) // 2

上面代码中,函数f有两个参数,且参数名都是a。取值的时候,以后面的a为准,即使后面的a没有值或被省略,也是以其为准。

function f(a, a) {
console.log(a);
} f(1) // undefined

调用函数f的时候,没有提供第二个参数,a的取值就变成了undefined。这时,如果要获得第一个a的值,可以使用arguments对象。

function f(a, a) {
console.log(arguments[0]);
} f(1) // 1

arguments是什么?

arguments是一个对应于传递给函数的参数的类数组对象。在(非箭头)函数调用时,创建的一个 它类似于Array,但除了长度和索引之外没有任何Array属性的对象,它存储的是实际传递给函数的参数(局限于函数声明的参数列表)。此对象包含传递给函数的每个参数的条目,第一个条目的索引从0开始。例如:

function fn(){ //利用instanceof判断arguments
console.log( 'arguments instanceof Array? ' + (arguments instanceof Array) );//false
console.log( 'arguments instanceof Object? ' + (arguments instanceof Object) );//true
console.log(arguments);
console.log(arguments[0]);//string
console.log(arguments[1]);//1
}
fn('string',1);

从输出我们可以看出arguments是一个‘object’,带有2个常用的属性callee和caller(文章最后面介绍)。对应的参数可以通过条目的索引来获取(从0开始),虽然它不拥有数组的属性,但是我们可以把它转换为一个正在的数组,通过Js中的apply和call,或者es6中的参数扩展的方法,代码如下:

//call
var args = Array.prototype.slice.call(arguments);
var args = [].slice.call(arguments);
//由于slice会阻止某些Js引擎中的优化 (v8)产生一些性能问题,可以采用如下方法
var args = (arguments.length === 1 ? [arguments[0]] : Array.apply(null, arguments));
var args = Array.from(arguments);
var args = [...arguments];

通过上面的方法,我们就可以让arguments成为一个真正的Array,我们就能获取参数的长度length,使用array中一些方法,如Join、concat、indexOf等等。

需要注意一点的是只有函数被调用时,arguments对象才会创建,未调用时其值为null,例如

console.log(new Function().arguments);//return null

arguments的例子

下面将介绍arguments在实际项目中,常用于传递任意数量的参数到该函数,来对参数进行操作。

1.累加:

function add(...args) {
let sum=0;
for(let i of args){
sum+=parseFloat(i);
}
return sum
}
add(1,2,3);//输出6

2.字符串链接:

function concat(o) {
let args = Array.prototype.slice.call(arguments, 1);
return args.join(o);
}
concat('.','a','b','c');//输出a.b.c

Function.caller:

caller是javascript函数的一个属性,它指向调用当前函数的函数,如果函数是在全局范围内调用的话,那么caller的值为null。

function outer() {
inner();
}
function inner() {
if(inner.caller==null) { //值为null,在全局作用域下调用
console.log("我是在全局环境下调用的");
} else {
console.log(inner.caller+"调用了我");
}
}
inner();
outer();

arguments.callee:

arguments是函数内部中一个特殊的对象,callee是arguments的属性之一, 他指向拥有该arguments的函数对象。在某些不方便暴露函数名的情况下,可以用arguments.callee代替函数名。但是,在严格模式(“use strict;”)下访问arguments.callee会抛出 TypeError: 'caller', 'callee', and 'arguments' properties may not be accessed on strict mode functions or the arguments objects for calls to them 错误。

现在我们来仔细看看上面那段代码。如果老板说:“不行,函数名叫inner不好听,给我改!” 改代码容易,但是想改了后不出错误那可就难了。 这时我们就可以使用argument.callee来代替函数名,减少修改代码的地方,从而降低出错率。

function outer() {
inner();
}
function inner() { //只需改这个函数名,而不需要改内部代码
if(arguments.callee.caller==null) {
console.log("我是在全局环境下调用的");
} else {
console.log(arguments.callee.caller+"调用了我");
}
}
inner();
outer();

除此之外,当我们写递归函数时,也会在函数里面暴露函数名,此时也会产生问题,如下。

/**
* factorial:阶乘
*/
function factorial(n) {
if(n<=1) {
return 1;
} else {
return n*factorial(n-1);
}
}
console.log(factorial(3)); //6
var foo = factorial;
console.log(foo(3)); //6
factorial = null;
console.log(foo(3)); //Error:factorial is not a function

factorial置为null,虽然foo指向了factorial使其不会被销毁, 但是原函数内部的函数名任然是factorial,自然应找不到而报错。 此时我们就可以用arguments.callee代替函数名。

function factorial(n) {
if(n<=1) {
return 1;
} else {
return n*arguments.callee(n-1);
}
}

那还能不能更强点?毕竟arguments.callee在严格模式下是无法访问的,肯定没法儿用啊!

var factorial = (function foo(n) {
if(n<=1) {
return 1;
} else {
return n*foo(n-1); //内部可访问foo
}
});
foo(6); //ReferenceError: foo is not defined

以上代码利用命名函数表达式的形式创建了一个递归函数。 这有两个好处:第一,严格模式下函数任然能照常运转; 第二,性能优于argument.callee。注意foo仅在其函数体内可访问,在外是访问不到的。

arguments.caller:

arguments.caller 这是我们遇到的第二个caller,没啥用,在严格模式下无法访问,非严格模式下值也为undefined,而且貌似被废弃了。

总结:

1.Function.caller指向调用该函数的函数

2.arguments.callee指向拥有该arguments的函数

3.arguments.caller没啥用

http://javascript.ruanyifeng.com/grammar/function.html

函数调用方式:

1、直接调用:fn();

2、采用对象方法调用;

3、new 调用:new Test();

4、fn.apply/call(obj):临时让fn函数成为obj的方法进行调用。

回调函数:

什么是回调函数?

1、你定义的;

2、你没调用;

3、但最终执行了

常见的回调函数:

dom事件回调函数

定时器回调函数

ajax请求回调函数

生命周期回调函数

IIFE:匿名函数自调用

好处:不会污染外部(全部)命名空间;

作用:代码模块化。

专题8:javascript函数详解的更多相关文章

  1. javascript 函数详解2 -- arguments

    今天我们接着上篇文章来继续javascript函数这个主题.今天要讲的是函数对像中一个很重要的属性--arguments. 相关阅读: javascript 函数详解1 -- 概述 javascrip ...

  2. javascript 函数详解

    一.函数的一些基础概念: 1.js中的函数使用function来声明. 2.关于return: 2.1  函数在执行到return语句后悔立即停止并退出,return后面的代码永远不会得到执行: 2. ...

  3. javascript函数详解

    //函数的两种声明方式 //在同一个<script>标签中,函数的调用和声明位置可以没有先后的顺序,因为在同一个标签中,都是等加载到内存中,然后在运行 //但是如果是在两个script标枪 ...

  4. JavaScript正则表达式详解(二)JavaScript中正则表达式函数详解

    二.JavaScript中正则表达式函数详解(exec, test, match, replace, search, split) 1.使用正则表达式的方法去匹配查找字符串 1.1. exec方法详解 ...

  5. [转]javascript console 函数详解 js开发调试的利器

    javascript console 函数详解 js开发调试的利器   分步阅读 Console 是用于显示 JS和 DOM 对象信息的单独窗口.并且向 JS 中注入1个 console 对象,使用该 ...

  6. JavaScript事件详解-jQuery的事件实现(三)

    正文 本文所涉及到的jQuery版本是3.1.1,可以在压缩包中找到event模块.该篇算是阅读笔记,jQuery代码太长.... Dean Edward的addEvent.js 相对于zepto的e ...

  7. JavaScript事件详解-Zepto的事件实现(二)【新增fastclick阅读笔记】

    正文 作者打字速度实在不咋地,源码部分就用图片代替了,都是截图,本文讲解的Zepto版本是1.2.0,在该版本中的event模块与1.1.6基本一致.此文的fastclick理解上在看过博客园各个大神 ...

  8. JavaScript正则表达式详解(一)正则表达式入门

    JavaScript正则表达式是很多JavaScript开发人员比较头疼的事情,也很多人不愿意学习,只是必要的时候上网查一下就可以啦~本文中详细的把JavaScript正则表达式的用法进行了列表,希望 ...

  9. JavaScript事件详解-zepto的事件实现

    zepto的event 可以结合上一篇JavaScript事件详解-原生事件基础(一)综合考虑源码暂且不表,github里还有中文网站都能下到最新版的zepto.整个event模块不长,274行,我们 ...

随机推荐

  1. iOS添加pch文件

    1.第一步,创建pch文件 第二步设置pch文件:相对地址,填写$(SRCROOT)/YTCompleteCarSell/PrefixHeader.pch  $(SRCROOT)是项目地址/项目名/p ...

  2. 下拉菜单被表单、图片、FLASH挡住的解决办法

    设置Flash的参数: <param name="wmode" value="opaque"> <object classid="c ...

  3. 比Xshel更好用的 FinalShell

    FinalShell功能特点: 1.多平台支持Windows,Mac OS X,Linux 2.多标签,批量服务器管理. 3.支持登录Ssh和Windows远程桌面. 4.漂亮的平滑字体显示,内置10 ...

  4. oracle sql小结(主要讲横列转换的例子)decode 以及case

    --建表 create table kecheng( id NUMBER, name VARCHAR2(20), course VARCHAR2(20), score NUMBER); --插入数据i ...

  5. Font Awesome 最简单应用例子

    简介: Font Awesome为您提供可缩放的矢量图标,您可以使用CSS所提供的所有特性对它们进行更改,包括:大小.颜色.阴影或者其它任何支持的效果. 使用方法: 引入<link rel=&q ...

  6. 搭建简单SBT工程实践

    在本机jdk(主要配置环境变量).scala(主要配置环境变量).sbt(主要配置①私服repositories  ②sbtconfig.txt)都已经安装且配置好的情况下. repositories ...

  7. echart图表

    http://echarts.baidu.com/tutorial.html#5%20%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B%20ECharts

  8. IOP知识点(5)

    1 检验规则 取“或”   2 IOP升级中心 2 IOP升级中心 http://10.110.17.12:8080/cloud-ops/#/environment/     admin 我修改了io ...

  9. Python pickle 模块

    转自:https://www.cnblogs.com/lincappu/p/8296078.html pickle可以存储的数据类型 所有python支持的原生类型:布尔值,整数,浮点数,复数,字符串 ...

  10. 基于jquery ajax的多文件上传进度条

    效果图 前端代码,基于jquery <!DOCTYPE html> <html> <head> <title>主页</title> < ...