转载

JS学习-函数

一 概述

1.1 函数的声明

函数的声明有三种方式

  • function命令

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

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

  • 函数表达式

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

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

    函数表达式的函数名只在函数体内部有效,下面的 x 只在函数体内部可用,指代函数表达式本身,其他地方都不可用:

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

    x
    // ReferenceError: x is not defined

    print()
    // function

    这种写法的用处有两个

    • 可以在函数体内部调用自身

    • 方便除错(除错工具显示函数调用栈时,将显示函数名,而不再显示这里是一个匿名函数)。因此,下面的形式声明函数也非常常见

      var f = function f() {};
  • Function构造函数

    var add = new Function(
    'x',
    'y',
    'return (x + y)'
    )
    ;


    // 等同于

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

    在上面代码中, Function 构造函数接受三个参数,除了最后一个参数是 add 函数的“函数体”,其他参数都是 add 函数的参数。如果只有一个参数,该参数就是函数体:

    var foo = new Function(
    'return "hello world"'
    )
    ;


    // 等同于

    function foo() {
    return "hello world";
    }

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

1.2 函数的重复声明

JS中函数允许多次声明,后面的声明就会覆盖前面的声明。

而且由于函数名的提升(参见下文),前一次声明在任何时候都是无效的。

1.3 一等公民

JS的函数与其他数据类型(数值、字符串、布尔值等等)处于同等地位,可以使用其他数据类型的地方,就能使用函数。

比如,可以把函数赋值给变量和对象的属性,也可以当作参数传入其他函数,或者作为函数的结果返回。

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

// 将函数赋值给一个变量
var operator = add;

// 将函数作为参数和返回值
function a(op){
return op;
}
a(add)(1, 1)

1.4 函数名的提升

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

f();

function f() {}

但是,如果采用 赋值语句 定义函数,JavaScript就会报错:

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

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

if (foo) {
function x() {}
}

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

按照语言规范,这是不合法的。但是,实际情况是各家浏览器往往并不报错,能够运行。

但是由于存在函数名的提升,所以在条件语句中声明函数,可能是无效的。

要达到在条件语句中定义函数的目的,只有使用函数表达式。

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

f() // undefined

1.6 函数的属性和方法

1.6.1 name属性

name 属性返回紧跟在 function 关键字之后的那个函数名。

1.6.2 length属性

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

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

上述函数不管调用时输入了多少个参数, length 属性始终等于2。

1.6.3 toString()

函数的 toString 方法返回函数的源码

function f() {
a();
b();
c();
}


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

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

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


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

三 函数作用域

3.1 定义

类似于java,在函数外声明就是全局变量(global variable),在函数内声明就是“局部变量”(local variable)。局部定义的变量,会覆盖同名全局变量。

注意:对于 var 命令来说,只有在函数内部声明的才是局部变量,由于存在变量提升,所以在其他区块中声明,一律都是全局变量:

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

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

ES6中的let命令可以避免这一点

3.2 函数内部的变量提升

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

function foo(x) {
if (x > 100) {
var tmp = x - 100;
}
}

上面的代码等同于

function foo(x) {
var tmp;
if (x > 100) {
tmp = x - 100;
};
}

3.3 函数本身的作用域

函数本身也是一个值,也有自己的作用域,它的作用域绑定其声明时所在的作用域。函数内部访问的变量和该函数具有相同的作用域

下面的函数x的作用域绑定外层,x的内部变量a不会到函数f体内取值,所以输出1,而不是2

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


function f() {
var a = 2;
x();
}


f() // 1

下面的外部作用域的x函数希望访问到y的内部变量,显然是不可以的:

var x = function (){
console.log(a);
};


function y(f){
var a = 2;
f();
}


y(x)
// ReferenceError: a is not defined

四 参数

4.1 参数的省略

JS中函数参数不是必需的,允许省略参数,甚至一个都不传:

function f(a, b) {
return a;
}


f(1, 2, 3) // 1
f(1) // 1
f() // undefined

f.length // 2

上面的三种调用都不会报错。被省略的参数的值就变为 undefined

需要注意的是,函数的 length 属性与实际传入的参数个数无关,只反映函数预期传入的参数个数。

但是无法只省略靠前的参数。如果一定要省略靠前的参数,只有显式传入 undefined

function f(a, b) {
return a;
}

f( , 1) // SyntaxError: Unexpected token ,(…)
f(undefined, 1) // undefined

4.2 默认值的写法

function f(a){
a = a || 1;
return a;
}


f('') // 1
f(0) // 1

上面代码的 || 表示“或运算”,即如果 a 有值,则返回 a ,否则返回事先设定的默认值(上例为1)。

这种写法会对 a 进行一次布尔运算,只有为 true 时,才会返回 a

但是,除了 undefined 以外, 0 、空字符、 null 等的布尔值也是 false 。也就是说,如果外部传入了0或者空字符,也会返回默认值,为了避免这个问题,可以采用下面更精确的写法:

function f(a) {
(a !== undefined && a !== null) ? a = a : a = 1;
return a;
}


f() // 1
f('') // ""
f(0) // 0

4.3 传递方式

  • 函数参数为原始类型的值(数值、字符串、布尔值)的,传递方式是值传递
  • 函数参数是复合类型的值(数组、对象、其他函数),传递方式是传址传递(pass by reference),因此在函数内部修改参数,将会影响到原始值

4.3.1 如果替换整个参数,不会影响到原始值

var obj = [1, 2, 3];

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

f(obj);


obj // [1, 2, 3]

上面代码中,在函数 f 内部,参数对象 obj 被整个替换成另一个值,而不是参数对象的某个属性,这时不会影响到原始值。这是因为,形式参数( o )与实际参数 obj 存在一个赋值关系。

// 函数f内部
o = obj;

上面代码中,对 o 的修改都会反映在 obj 身上。

但是,如果对 o 赋予一个新的值,就等于切断了 oobj 的联系,导致此后的修改都不会影响到 obj 了。

4.3.2 通过全局对象的属性实现原始类型的地址传递效果

某些情况下,如果需要对某个原始类型的变量,获取传址传递的效果,可以将它写成全局对象的属性。

var a = 1;

function f(p) {
window[p] = 2;
}

f('a');


a // 2

上面代码中,变量 a 本来是传值传递,但是写成 window 对象的属性,就达到了传址传递的效果。

4.4 同名参数

如果有同名的参数,则取最后出现的那个值,即使后面的 a 没有值或被省略,也是以其为准:

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


f(1, 2) // 2

但调用函数 f 的时候,没有提供第二个参数, a 的取值就变成了 undefined

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


f(1) // undefined

如果要获得第一个 a 的值,可以使用 arguments 对象

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

f(1) // 1

4.5 arguments对象

4.5.1 定义

由于JS允许函数有不定数目的参数,所以需要一种机制,可以在函数体内部读取所有参数。这就是 arguments 对象的由来。

arguments 对象包含了函数运行时的所有参数,这个对象只有在函数体内部,才可以使用

var f = function(one) {
console.log(arguments[0]);
console.log(arguments[1]);
console.log(arguments[2]);
}

f(1, 2, 3)
// 1
// 2
// 3

arguments 可以为参数赋值(严格模式不允许这种用法):

var f = function(a, b) {
arguments[0] = 3;
arguments[1] = 2;
return a + b;
}

f(1, 1)
// 5

可以通过 arguments 对象的 length 属性,判断函数调用时到底带几个参数

function f() {
return arguments.length;
}


f(1, 2, 3) // 3
f(1) // 1
f() // 0

4.5.2与数组的关系

虽然 arguments 很像数组,但它是一个对象。数组专有的方法(比如 sliceforEach ),不能在 arguments 对象上直接使用。

  • apply方法

    可以通过 apply 方法,把 arguments 作为参数传进去,这样就可以让 arguments 使用数组方法了:

    // 用于apply方法
    myfunction.apply(obj, arguments).

    // 使用与另一个数组合并
    Array.prototype.concat.apply([1,2,3], arguments)

  • 将arguments转为真正的数组

    要让arguments对象使用数组方法,真正的解决方法是将arguments转为真正的数组。

    下面是两种常用的转换方法:slice方法和逐一填入新数组

    var args = Array.prototype.slice.call(arguments);

    // or

    var args = [];
    for (var i = 0; i < arguments.length; i++) {
    args.push(arguments[i]);
    }

4.5.3callee属性

arguments 对象带有一个 callee 属性,返回它所对应的原函数,可以通过 arguments.callee ,达到调用函数自身的目的。

var f = function(one) {
console.log(arguments.callee === f);
}

f() // true

五 函数其它知识点

5.1 闭包

function f1() {
var n = 999;
function f2() {
  console.log(n); // 999
}
}

闭包简单理解成“定义在一个函数内部的函数”。

上述代码中,闭包就是函数 f2 ,即能够读取其他函数内部变量的函数。由于在JavaScript语言中,只有函数内部的子函数才能读取内部变量,所以定义了这样的一种概念。

闭包最大的特点,就是它可以“记住”诞生的环境。本质上,闭包就是将函数内部和函数外部连接起来的一座桥梁。

f2 作为返回值,达到在 f1 外部读取它的内部变量的目的:

function f1() {
var n = 999;
function f2() {
console.log(n);
}
return f2;
}

var result = f1();
result(); // 999

闭包的最大用处有两个:

  • 可以读取函数内部的变量(可以封装对象的私有属性和方法)

    和Java开发中的javabean的概念类似:

    function Person(name) {
    var _age;
    function setAge(n) {
    _age = n;
    }
    function getAge() {
    return _age;
    }

    return {
    name: name,
    getAge: getAge,
    setAge: setAge
    };
    }

    var p1 = person('张三');
    p1.setAge(25);
    p1.getAge() // 25

    上面代码中,函数 Person 的内部变量 _age ,通过闭包 getAgesetAge ,变成了返回对象 p1 的私有变量。

  • 让这些变量始终保持在内存中,即闭包可以使得它诞生环境一直存在

    闭包使得内部变量记住上一次调用时的运算结果:

    function createIncrementor(start) {
    return function () {
    return start++;
    };
    }

    var inc = createIncrementor(5);

    inc() // 5
    inc() // 6
    inc() // 7

    上面代码中, start 是函数 createIncrementor 的内部变量。通过闭包, start 的状态被保留了,每一次调用都是在上一次调用的基础上进行计算。从中可以看到,闭包 inc 使得函数 createIncrementor 的内部环境,一直存在。所以,闭包可以看作是函数内部作用域的一个接口。

    为什么会这样呢?原因就在于 inc 始终在内存中,而 inc 的存在依赖于 createIncrementor ,因此也始终在内存中,不会在调用结束后,被垃圾回收机制回收。

闭包比较耗内存

注意,外层函数每次运行,都会生成一个新的闭包,而这个闭包又会保留外层函数的内部变量,所以内存消耗很大。因此不能滥用闭包,否则会造成网页的性能问题。

5.2 立即调用的函数表达式(IIFE)

有时在定义函数之后,希望立即调用该函数。但不能在函数的定义之后加上圆括号,这会产生语法错误。

function(){ /* code */ }();
// SyntaxError: Unexpected token (

产生这个错误的原因是, function 这个关键字即可以当作语句,也可以当作表达式

// 语句
function f() {}

// 表达式
var f = function f() {}

因此,JavaScript引擎规定,如果 function 关键字出现在行首,一律解释成语句。因此,JavaScript引擎看到行首是 function 关键字会解析成函数的定义,函数不应该以圆括号结尾,所以就报错了。

解决方法

不要让 function 出现在行首,让引擎将其理解成一个表达式,将其放在一个圆括号里面:

(function(){ /* code */ }());
// 或者
(function(){ /* code */ })();

上面两种写法都是以圆括号开头,引擎就会认为后面跟的是一个表示式,而不是函数定义语句,所以就避免了错误。这就叫做 “立即调用的函数表达式”(Immediately-Invoked Function Expression) ,简称 IIFE

5.3 eval命令

eval 命令的作用是,将字符串当作语句执行:

eval('var a = 1;');
a // 1

上面代码将字符串当作语句运行,生成了变量 a

  • eval 命令可以修改了外部变量a的值,存在安全风险

    由于这个原因,如果无法做到作用域隔离,最好不要使用

    var a = 1;
    eval('a = 2');

    a // 2
  • eval 的命令字符串不会得到JavaScript引擎的优化,运行速度较慢,尽量少用

ECMAScript 5将 eval 的使用分成两种情况:

  • “直接使用”, 这种情况下 eval 的作用域就是当前作用域(即全局作用域或函数作用域)
  • “间接调用”,此时eval的作用域总是全局作用域

    var a = 1;

    function f(){
    var a = 2;
    var e = eval;
    e('console.log(a)');
    }

    f() // 1

参考资料

JavaScript 标准参考教程

原文  http://www.lightskystreet.com/2016/06/08/js-func/
正文到此结束
Loading...