函数和作用域-CSDN博客

本文链接：https://blog.csdn.net/weixin_52142992/article/details/126822361

（1）函数的声明和调用

函数的调用和声明

//声明一个叫say的函数
function say(){
console.log(2222);
}
//调用函数
say();

函数声明提前
- js代码的运行分两步：解析代码、运行代码
- 函数在js里是“一等公民”，函数的声明会提前进行

sum();//函数的调用可以在任意位置，不会出现错误，因为函数的声明会提前
function sum(){
	var sum = 0;
	for(var i=1;i<=100;i++){
		sum +=i;
	}
	console.log(sum);//5050
}

变量声明提前

console.log(1);
console.log(num)//undefined;声明提前，当为赋值，此时num为undefined
var num = 100;
console.log(2);
console.log(num);//100

对象中的函数
对象中的函数也叫对象的方法，也叫对象的api；alert、console、prompt都是window对象的方法，或者叫window的api。

var obj = {
	name:'zs',
	say:function(){
		console.log(obj.name);
	},
	say2(){
		console.log(obj.name);
	}
}
obj.say();
obj.say2();

函数表达式
使用function和var声明的函数有什么作用？
使用函数表达式来创建函数的时候，调用函数必须放在函数之后。

say();//函数声明提前，所以可以在这里调用函数
function say(){
	console.log('hello');
}

//函数表达式
say2();//say2()的值是undefined，所以会报错，这里say2是一个变量
var say2() = function(){
	console.log('hello');
}

（2）函数的调用方式

手动调用
绑定一个事件来触发函数的运行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 2、绑定一个事件来触发函数的运行 -->
    <button onclick="change(reset())">点我，发现不一样的秘密</button>
</body>
<script>
    // 1、手动调用
    function say(){
        alert('傻逼！');
    }
    say();//手动调用


    // 2、绑定一个事件来触发函数的运行
    function change(){
        alert('你个傻叉！');
        reset();
    }
    function reset(){
        alert('咩哈哈哈哈哈哈哈........');
        change();
    }
</script>
</html>
</script>
</html>
</body>

（3）函数传递参数

直接传参

// a和b叫做参数, 是两个变量, 用来接收别人传过来的数据
function add(a,b) {
    console.log('a:', a)
    console.log('b:', b);
  var sum = a + b;
  console.log(sum);
}

// 10, 10也是参数,是传入的参数
add(10,20);

变量传参

// 负责接收数据的参数叫做形参, a和b都是形参, 同时a和b也是变量, 形参的变量名可以随便给
function add(a, b) {
  console.log("a:", a);
  console.log("b:", b);
  var sum = a + b;
  console.log(sum);
}

// 传入的参数叫做实参
var x = 200;
var y = 300;
add(x, y);

传参是对象

function test(obj) {
    obj.age = 100;
    obj.say = function() {
        console.log(obj.age);
    }
    obj.say();
}

var person = {
    name: '张三',
    age: 18
}

test(person);
console.log('perons.age:',person.age);  // 结果：100

传参是函数
函数作为参数被传入的时候, 我们把它叫做回调函数

var obj = {
            // 2. obj.then(), 函数被调用, 函数内容的代码就开始运行
            then(cb) {
                var data = {
                    name: '张三',
                    age : 18
                }
                // 3. 调用cb函数, 传入data
                cb(data);
            }
        }
        debugger;
        // 1. obj.then(); 传入一个函数
        obj.then(function (result) {
            // 4. 函数在第3步时被调用, 所以这里的代码开始运行
            console.log(result);
        });

传入的参数：简单数据类型和复杂数据类型区别

当传入的参数是简单数据类型时，修改形参不会影响实参；
当传入的数据类型是复杂数据类型，修改形参的值，实参也会跟着修改。

基本数据类型和复杂数据类型的区别：

  内存区域：栈区（容量小运行快）、堆区（容量大运行慢）
  基本数据类型存在栈区，复杂数据类型的地址也存放在栈区，但数据是存放在堆区

（4）函数的返回值

return：调用函数就可以得到函数返回的数据；

return之后的代码不再执行；
如果没有写return，则默认返undefined：执行console.log和alert之后，控制台打undefined，实际上是这两个函数没有返回值，所以默认返回了undefined。

function add(num1,num2){
     var sum = num1+num2;
     return sum;
     //这后面的代码不会执行
     console.log(222);
     console.log(333);
}
var aa = add(100,200);
console.log('相加结果：',aa);

（5）函数的作用域

1、作用域

什么是作用域?
概念：变量的作用域值的是变量起作用的范围，就是变量的作用域。
全局作用域：全局作用域就是window对象，声明全局变量的方法：var，window；
- 全局变量：var a =100; window.b = 200;
局部作用域：函数运行的时候，函数的内部就是局部作用域，声明在函数内部的变量就是局部变量
- 局部变量：function add(){var sun = 0;//局部变量}
js没有块级作用域：
如，for(var i=0;i<5;i++){}这里的i是全局变量
作用域规则：函数内部可以访问外部的变量，函数外部不能访问函数内部的变量
作用域规则：
- 函数内部可以访问外部的变量
- 函数外部不能访问函数内部的变量

var a = 100;
        var b = 200;
        function add(){
            var c = 300;
            var d = 400;
            var e = a+b;
        }
        add();
        console.log('c',c);//报错

2、作用域

访问一个变量时候, 会先在最近的作用域里面去查找, 若没有就到上一级的作用域里查找, 一级一级往上查找, 直找到全局作用域为止, 找到了就返回, 没找到就报错, 这样在访问的过程中就形成了一条作用域链。

//作用域链从里到外，一层一层向外找
        var color = 'red';
        function aa() {
            var color = 'blue';
            function bb() {
                var color = 'green';
                console.log(color);
            }
            bb();
        }
        aa();