JavaScript基础知识：函数

最新推荐文章于 2025-08-06 20:46:34 发布
原创 最新推荐文章于 2025-08-06 20:46:34 发布 · 345 阅读 · 0 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文深入探讨JavaScript函数的定义方式、作用域规则、变量提升现象、闭包特性及箭头函数的应用。同时，介绍了如何利用函数方法、apply、call等技巧控制this指向，以及map、reduce等高阶函数的使用方法。

函数的定义方式

function abs(x) {
    if (x >= 0) {
        return x;
    } else {
        return -x;
    }
}

如果没有return语句，函数执行完毕后也会返回结果，只是结果为undefined。
由于JavaScript的函数也是一个对象，上述定义的abs()函数实际上是一个函数对象，而函数名abs可以视为指向该函数的变量。因此，第二种定义函数的方式如下：

var abs = function (x) {
    if (x >= 0) {
        return x;
    } else {
        return -x;
    }
};

在这种方式下，function (x) { … }是一个匿名函数，它没有函数名。但是，这个匿名函数赋值给了变量abs，所以，通过变量abs就可以调用该函数。上述两种定义完全等价，注意第二种方式按照完整语法需要在函数体末尾加一个;，表示赋值语句结束。

由于JavaScript允许传入任意个参数而不影响调用，因此传入的参数比定义的参数多也没有问题，虽然函数内部并不需要这些参数：

就算不输入参数，也会返回一个NaN，因为传进了一个undefine

JavaScript还有一个免费赠送的关键字arguments，它只在函数内部起作用，并且永远指向当前函数的调用者传入的所有参arguments类似Array但它不是一个Array。
实际上arguments最常用于判断传入参数的个数。你可能会看到这样的写法：

// foo(a[, b], c)
// 接收2~3个参数，b是可选参数，如果只传2个参数，b默认为null：
function foo(a, b, c) {
    if (arguments.length === 2) {
        // 实际拿到的参数是a和b，c为undefined
        c = b; // 把b赋给c
        b = null; // b变为默认值
    }
    // ...
}

要把中间的参数b变为“可选”参数，就只能通过arguments判断，然后重新调整参数并赋值。
rest参数：

function foo(a, b, ...rest) {
    console.log('a = ' + a);
    console.log('b = ' + b);
    console.log(rest);
}

foo(1, 2, 3, 4, 5);
// 结果:
// a = 1
// b = 2
// Array [ 3, 4, 5 ]

foo(1);
// 结果:
// a = 1
// b = undefined
// Array []

JS中存在变量提升的现象：

'use strict';

function foo() {
    var x = 'Hello, ' + y;
    console.log(x);
    var y = 'Bob';
}

foo();

因此我们最好和C一样，有着良好的编码习惯，在一开始就将变量声明：

function foo() {
    var
        x = 1, // x初始化为1
        y = x + 1, // y初始化为2
        z, i; // z和i为undefined
    // 其他语句:
    for (i=0; i<100; i++) {
        ...
    }
}

JS中函数的作用域和python类似，JavaScript实际上只有一个全局作用域。任何变量（函数也视为变量），如果没有在当前函数作用域中找到，就会继续往上查找，最后如果在全局作用域中也没有找到，则报ReferenceError错误。

名字空间

==全局变量会绑定到window上，不同的JavaScript文件如果使用了相同的全局变量，或者定义了相同名字的顶层函数，都会造成命名冲突，并且很难被发现。减少冲突的一个方法是把自己的所有变量和函数全部绑定到一个全局变量中。==例如：// 唯一的全局变量MYAPP:
var MYAPP = {};

// 其他变量:
MYAPP.name = ‘myapp’;
MYAPP.version = 1.0;

// 其他函数:
MYAPP.foo = function () {
return ‘foo’;
};

块级作用域

let和const分别声明块级作用域变量和块级作用域常量。如let常应用于for循环中。

解构赋值

let [x, [y, z]] = ['hello', ['JavaScript', 'ES6']];
x; // 'hello'
y; // 'JavaScript'
z; // 'ES6'
let [, , z] = ['hello', 'JavaScript', 'ES6']; // 忽略前两个元素，只对z赋值第三个元素
z; // 'ES6'

从一个对象中取出若干属性，也可以使用解构赋值，便于快速获取对象的指定属性：

var person = {
    name: '小明',
    age: 20,
    gender: 'male',
    passport: 'G-12345678',
    school: 'No.4 middle school',
    address: {
        city: 'Beijing',
        street: 'No.1 Road',
        zipcode: '100001'
    }
};
var {name, address: {city, zip}} = person;
name; // '小明'
city; // 'Beijing'
zip; // undefined, 因为属性名是zipcode而不是zip
// 注意: address不是变量，而是为了让city和zip获得嵌套的address对象的属性:
address; // Uncaught ReferenceError: address is not defined

使用解构赋值对对象属性进行赋值时，如果对应的属性不存在，变量将被赋值为undefined，这和引用一个不存在的属性获得undefined是一致的。如果要使用的变量名和属性名不一致，可以用下面的语法获取：

var person = {
    name: '小明',
    age: 20,
    gender: 'male',
    passport: 'G-12345678',
    school: 'No.4 middle school'
};

// 把passport属性赋值给变量id:
let {name, passport:id} = person;
name; // '小明'
id; // 'G-12345678'
// 注意: passport不是变量，而是为了让变量id获得passport属性:
passport; // Uncaught ReferenceError: passport is not defined

一个常见的错误

// 声明变量:
var x, y;
// 解构赋值:
{x, y} = { name: '小明', x: 100, y: 200};
// 语法错误: Uncaught SyntaxError: Unexpected token =

这里JavaScript引擎将{}当成语句出力，=被忽视了。只需（{x,y})即可。

函数方法

之前介绍过JS对象的值可以是函数

var xiaoming = {
    name: '小明',
    birth: 1990,
    age: function () {
        var y = new Date().getFullYear();
        return y - this.birth;
    }
};

xiaoming.age; // function xiaoming.age()
xiaoming.age(); // 今年调用是25,明年调用就变成26了

在一个方法内部，this是一个特殊变量，它始终指向当前对象，也就是xiaoming这个变量。所以，this.birth可以拿到xiaoming的birth属性。

那如何理解这个当前对象呢，如果以对象的方法形式调用，比如xiaoming.age()，该函数的this指向被调用的对象，也就是xiaoming，这是符合我们预期的。如果单独调用函数，比如getAge()，此时，该函数的this指向全局对象，也就是window。

保证this指向正确，必须用obj.xxx()的形式调用！由于这是一个巨大的设计错误，要想纠正可没那么简单。ECMA决定，在strict模式下让函数的this指向undefined

一个错误：

'use strict';

var xiaoming = {
    name: '小明',
    birth: 1990,
    age: function () {
        function getAgeFromBirth() {
            var y = new Date().getFullYear();
            return y - this.birth;
        }
        return getAgeFromBirth();
    }
};

xiaoming.age(); // Uncaught TypeError: Cannot read property 'birth' of undefined

结果又报错了！原因是this指针只在age方法的函数内指向xiaoming，在函数内部定义的函数，this又指向undefined了！（在非strict模式下，它重新指向全局对象window！）修复的办法也不是没有，我们用一个that变量首先捕获this：

'use strict';

var xiaoming = {
    name: '小明',
    birth: 1990,
    age: function () {
        var that = this; // 在方法内部一开始就捕获this
        function getAgeFromBirth() {
            var y = new Date().getFullYear();
            return y - that.birth; // 用that而不是this
        }
        return getAgeFromBirth();
    }
};

xiaoming.age(); // 25

apply

虽然在一个独立的函数调用中，根据是否是strict模式，this指向undefined或window，不过，我们还是可以控制this的指向的！要指定函数的this指向哪个对象，可以用函数本身的apply方法，它接收两个参数，第一个参数就是需要绑定的this变量，第二个参数是Array，表示函数本身的参数。

function getAge() {
    var y = new Date().getFullYear();
    return y - this.birth;
}

var xiaoming = {
    name: '小明',
    birth: 1990,
    age: getAge
};

xiaoming.age(); // 25
getAge.apply(xiaoming, []); // 25, this指向xiaoming, 参数为空

这里apply就让this指向xiaoming
call和apply一样
不同的是
apply()把参数打包成Array再传入；call()把参数按顺序传入。

函数的map，reduce方法

map，函数映射

var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
arr.map(String); // ['1', '2', '3', '4', '5', '6', '7', '8', '9']

reduce，再看reduce的用法。Array的reduce()把一个函数作用在这个Array的[x1, x2, x3…]上，这个函数必须接收两个参数，reduce()把结果继续和序列的下一个元素做累积计算，其效果就是：

map 里面可以之间定义一个函数

arr=arr.map(function(str){let first=str.substring(0,1).toUpperCase();let rest=str.substring(1).toLowerCase();return first+rest});
return arr;

sort函数

Array的sort()方法默认把所有元素先转换为String再排序，结果’10’排在了’2’的前面，因为字符’1’比字符’2’的ASCII码小。

[10, 20, 1, 2].sort(); // [1, 10, 2, 20]

sort()方法也是一个高阶函数，它还可以接收一个比较函数来实现自定义的排序。
比较的过程必须通过函数抽象出来。通常规定，对于两个元素x和y，如果认为x < y，则返回-1，如果认为x == y，则返回0，如果认为x > y，则返回1，这样，排序算法就不用关心具体的比较过程，而是根据比较结果直接排序。
要按数字大小排序，我们可以这么写：

arr.sort(function (x, y) {
    if (x < y) {
        return -1;
    }
    if (x > y) {
        return 1;
    }
    return 0;
});

默认情况下，对字符串排序，是按照ASCII的大小比较的，现在，我们提出排序应该忽略大小写，按照字母序排序。要实现这个算法，不必对现有代码大加改动，只要我们能定义出忽略大小写的比较算法就可以：

var arr = ['Google', 'apple', 'Microsoft'];
arr.sort(function (s1, s2) {
    x1 = s1.toUpperCase();
    x2 = s2.toUpperCase();
    if (x1 < x2) {
        return -1;
    }
    if (x1 > x2) {
        return 1;
    }
    return 0;
}); // ['apple', 'Google', 'Microsoft']

every()方法可以判断数组的所有元素是否满足测试条件。
find()方法用于查找符合条件的第一个元素，如果找到了，返回这个元素，否则，返回undefined：
forEach()和map()类似，它也把每个元素依次作用于传入的函数，但不会返回新的数组。forEach()常用于遍历数组，因此，传入的函数不需要返回值

闭包

注意到返回的函数在其定义内部引用了局部变量arr，所以，当一个函数返回了一个函数后，其内部的局部变量还被新函数引用，所以，闭包用起来简单，实现起来可不容易。
另一个需要注意的问题是，返回的函数并没有立刻执行，而是直到调用了f()才执行。我们来看一个例子：

unction count() {
    var arr = [];
    for (var i=1; i<=3; i++) {
        arr.push(function () {
            return i * i;
        });
    }
    return arr;
}

var results = count();
var f1 = results[0];
var f2 = results[1];
var f3 = results[2];

全部都是16！原因就在于返回的函数引用了变量i，但它并非立刻执行。等到3个函数都返回时，它们所引用的变量i已经变成了4，因此最终结果为16。返回闭包时牢记的一点就是：返回函数不要引用任何循环变量，或者后续会发生变化的变量。如果一定要引用循环变量怎么办？方法是再创建一个函数，用该函数的参数绑定循环变量当前的值，无论该循环变量后续如何更改，已绑定到函数参数的值不变。

借助闭包封装私有变量

'use strict';

function create_counter(initial) {
    var x = initial || 0;
    return {
        inc: function () {
            x += 1;
            return x;
        }
    }
}
var c1 = create_counter();
c1.inc(); // 1
c1.inc(); // 2
c1.inc(); // 3

var c2 = create_counter(10);
c2.inc(); // 11
c2.inc(); // 12
c2.inc(); // 13

在返回的对象中，实现了一个闭包，该闭包携带了局部变量x，并且，从外部代码根本无法访问到变量x。换句话说，闭包就是携带状态的函数，并且它的状态可以完全对外隐藏起来。
里面可以用外面，外面看不到里面。

箭头函数

类似匿名函数

generator（生成器）

function* fib(max) {
    var
        t,
        a = 0,
        b = 1,
        n = 0;
    while (n < max) {
        yield a;
        [a, b] = [b, a + b];
        n ++;
    }
    return;
}

生成数列

var f = fib(5);
f.next(); // {value: 0, done: false}
f.next(); // {value: 1, done: false}
f.next(); // {value: 1, done: false}
f.next(); // {value: 2, done: false}
f.next(); // {value: 3, done: false}
f.next(); // {value: undefined, done: true}
JavaScript学习笔记
weixin_52798101的博客
07-19 452
JavaScript 是 Web 的编程语言。 所有现代的 HTML 页面都可以使用 JavaScript。 JavaScript 非常容易学。 本教程将教你学习JavaScript 知识。
js温故而知新3——学习廖雪峰的js教程
weixin_34125592的博客
03-10 133
1.map 由于map()方法定义在JavaScript的Array中，我们调用Array的map()方法，传入我们自己的函数，就得到了一个新的Array作为结果： function pow(x) { return x * x; } var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9]; arr.map(p...
Python学习笔记之函数作为返回值、闭包的解释
徐刘根的博客
04-18 3579
函数作为返回值高阶函数除了可以接受函数作为参数外，还可以把函数作为结果值返回。我们来实现一个可变参数的求和。通常情况下，求和的函数是这样定义的：def calc_sum(*args): ax = 0 for n in args: ax = ax + n return ax但是，如果不需要立刻求和，而是在后面的代码中，根据需要再计算怎么办？可以不返回求和的结果，
Javascript的函数基础知识(全)
weixin_54902466的博客
06-01 2400
系列文章目录 JavaScript关于函数基础知识的总体汇总 文章目录系列文章目录前言一、函数是什么？1.函数的概念:2.函数的说明二、函数的介绍和基本使用1. 函数的基本语法2.函数的命名规范3.函数的调用4.函数体5.函数的封装三、有参数的函数1. 有参数的函数声明和调用2.执行过程3.形参以及实参4关于函数的传参小练习5.关于形参实参一一对应的参照6.函数传参的提升-案例四、有返回值的函数1.有返回值的函数2. 为什么要让函数有返回值3. 用return返回数据五、内置函数1. 什么是内置函数2.内
javascript教程(3)——JS函数的基础知识
wydsnza的博客
02-19 557
1.函数基础知识 1.1函数的定义 函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。【简而言之，函数是为了实现某种特定功能的代码块】。   1.2函数的分类和调用 我们JS里面分为系统函数和自定义函数。所谓的系统函数就是JS为我们已经提供好的函数，而自定义函数就是我们自己写的为了实现某种特定功能的函数。     系统函数：   console.log()  // 控制台...
JavaScript函数基础知识图谱
半夏半暖半倾城的博客
07-09 366
JavaScript流程控制知识图谱
JavaScript中的函数基础知识
太阳与星辰的博客
02-19 548
JavaScript中的函数基础知识
JavaScript基础知识-ES规范-JS基础特性与函数定义及调用
2503_91308956的博客
08-06 290
本文将通过一段具体的代码示例，详细解析 JavaScript 中的弱类型特性、变量默认值、函数定义与参数处理等核心知识点，帮助大家更好地理解 JS 的运行机制。
gtest测试脚本文件，不要下，空！！！
06-22
gtest测试脚本文件，不要下，空！！！
Delphi 13.1控件之46 StringGridWW超强表格.7z
最新发布
06-22
Delphi 13.1控件之46 StringGridWW超强表格.7z
易语言源码易语言百度电台源码
06-22
易语言源码易语言百度电台源码
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值