转生异世界从0开始学 JavaScript - Five day 函数(重点)

最新推荐文章于 2024-07-10 22:11:08 发布

.div

最新推荐文章于 2024-07-10 22:11:08 发布

阅读量1.1k

点赞数 12

分类专栏：转生异世界从0开始的 JavaScript 学习文章标签：学习 javascript 前端

本文链接：https://blog.csdn.net/widrh/article/details/137072860

版权

转生异世界从0开始的 JavaScript 学习专栏收录该内容

7 篇文章 0 订阅

订阅专栏

1. 为什么要使用函数函数

用函数解决代码重用问题。

2. 函数的意义

函数其实就是封装，把可以重复使用的代码放到函数中，如果需要多次使用同一段代码，就可以封装成一个函数，这样每次需要使用这些代码时，调用一次即可。

3. 定义函数的方式

ECMAScript 中的函数使用 function 关键字来声明，后面跟着参数和要执行的代码。例：

// 关键字   函数Name(函数参数/形参)
function functionName(str){
    // 要执行的代码
    console.log('Hello JavaScript');
}

3.1 创建函数及调用(字面量函数)

例：

// 字面量函数
function fun(num1, num2){
    console.log(num1 + num2);
}


// 调用函数
fun(1, 10); // 11

3.2 使用函数声明表达式声明函数(匿名函数)

例：

var str = 'Hello JavaScript';
var fun = function(string){
    console.log(string); // Hello JavaScript
}

fun(str);

3.3 使用 Function 构造函数声明函数(构造函数)

例：

var str = 'Hello JavaScript';
var fun = new Function(string){
    console.log(string); // Hello JavaScript
}

fun(str);

3.4 自执行函数

例：

var str = 'Hello JavaScript';
(function(string){
    console.log(string); // Hello JavaScript
})();

4. 函数的返回值 return

例：

function fun(a,b){
    var sum = a + b;
    return sum; // return 返回当前参数 后面的代码不在执行
    console.log('Hello JavaScript'); // 不执行
}

fun(3, 7); // 10

注意点：

函数在执行完return语句之后停止并立即退出。因此，位于return语句后面的任何代码永远都不会执行。

一个函数中可以有多个return语句。

return语句也可以不带任何返回值。

5. arguments 对象

aarguments 是一个对于传递给函数的参数的类数组对象(伪数组)。

可以使用 arguments 对象在函数中引用函数的参数，此对象包含了传递给函数的每个参数，第一个参数在索引 0 处。

例：假如函数传递三个参数，可以用下列方法引用。

function fun(a, b, c){
    console.log(arguments[0]); // 9
    console.log(arguments[1]); // 8
    console.log(arguments[2]); // 7
}

fun(9, 8, 7);

// 形参不写也可以拿到参数
function fun(){
    console.log(arguments[0]); // 9
    console.log(arguments[1]); // 8
    console.log(arguments[2]); // 7
}

fun(9, 8, 7);

6. 函数时一种数据类型

Function 数据类型

function fun(){};
console.log(typeof fun); // Function

函数可以作为参数，因为函数也是一种类型，可以把函数作为一个函数的参数，在一个函数中调用。

例：

function fun(){
    console.log('函数1');
};

// fun 函数作为 fun1 的参数
function fun1(){
    fun();
    console.log('函数2');
};

fun1();

7. 作用域

作用域：指一个变量的作用范围。

在目前的学习中，JavaScript 将作用域分为 全局作用域 和 函数作用域 (局部作用域)。

7.1 全局作用域和全局变量

代码在程序的任何地方都可以被访问，Window 对象的内置属性都会拥有全局作用域。

例：

var a = 1;

function fun(){
    console.log(a); // 1
};

全局变量：在最外层声明的变量叫全局变量。在函数体内部，没有使用var关键字声明的变量也是全局变量。(不推荐)

7.2 函数作用域(局部作用域)和局部变量

只能在固定的代码片段才能被访问。

例:

function fun(){
    var a = 1;
};

console.log(a); // undefined

局部变量：在函数体内部，使用var关键字声明的变量叫作局部变量。

7.3 作用域规则

函数允许访问函数外的数据。
整个代码结构中只有函数可以限定作用域。
作用域规则首先使用提升规则分析。
如果当前作用规则中有名字了, 就不考虑外面的名字。

注意点：局部变量退出作用域之后会销毁，全局变量关闭网页或浏览器才会销毁。

7.4 作用域链(重点)

只有函数可以制造作用域结构，那么只要是代码，就至少有一个作用域, 即全局作用域。凡是代码中有函数，那么这个函数就构成另一个作用域。如果函数中还有函数，那么在这个作用域中就又可以诞生一个作用域。
将这样的所有的作用域列出来，可以有一个结构:在当前作用域中没有查到值，就会向上级作用域去查，直到查到全局作用域，这么一个查找过程形成的链条就叫做 作用域链 。
作用域链：采取就近原则的方式来查找变量最终的值。

例：

function f1() {
    var num = 123;
    function f2() {
        console.log( num ); // 123
    }
    f2();
}
var num = 456;
f1();

8. 预解析

JavaScript 代码的执行是由浏览器中的 JavaScript 解析器来执行的。

JavaScript 解析器执行JavaScript 代码的时候，分为两个过程：预解析过程和代码执行过程。

预解析过程：

把变量的声明提升到当前作用域的最前面，只会提升声明，不会提升赋值。

把函数的声明提升到当前作用域的最前面，函数声明代表函数整体，所以函数提升后，函数名代表整个函数。

先提升var，再提升function。

预解析会把变量和函数的声明在代码执行之前执行完成。

8.1 变量预解析

预解析也叫做变量、函数提升。

变量提升（变量预解析）：变量的声明会被提升到当前作用域的最上面，变量的赋值不会提升。

8.2 函数预解析

函数提升：函数的声明会被提升到当前作用域的最上面，函数声明代表函数整体，所以函数提升后，函数名代表整个函数。

例：

fun(); // 函数啊

function fun() {
    console.log('函数');
};

特殊情况：函数表达式声明函数问题

fun();
var  fun = function() {
    console.log('想不到吧');
}
//结果：报错提示 "fn is not a function"

//解释：该段代码执行之前，会做变量声明提升，fun 在提升之后的值是 undefined；而 fn 调用是在 fn 被赋值为函数体之前，此时 fn 的值是 undefined ，所以无法正确调用