函数和作用域

最新推荐文章于 2024-10-16 16:26:58 发布

还没头秃

最新推荐文章于 2024-10-16 16:26:58 发布

阅读量102

点赞数 1

分类专栏： js相关文章标签： javascript 前端

本文链接：https://blog.csdn.net/c2517945543/article/details/122363949

版权

js相关专栏收录该内容

10 篇文章 0 订阅

订阅专栏

(一)函数的声明函数的调用

函数就是封装(打包)多行函数, 元素函数就是运行函数封装的多行代码

函数声明和调用
对象中的函数(方法), alert 就是 window 对象的一个方法
函数和变量声明提前
函数表达式

(1)函数的声明和调用

声明函数 fuction xxx() {}
调用函数 xxx(), 函数被调用的时候, 函数体(函数内部的代码)才会运行
js代码的运行分两步:
- 先解析代码
- 运行代码
函数和变量的声明会提前
- 函数是"一等公民", 程序运行的时候, 不管函数定义在什么位置, 都会先执行声明, 所以在任何地方都可以调用函数.
- 变量也会一开始运行就声明, 等到代码运行到变量声明的那句代码才可以对其进行赋值

<script>
  // 调用函数
  sum();
  console.log('ghkjhkhk');
  // 声明函数
  function sum() {
    var count=0;
    for(var i=0;i<100;i++) {
      count+=i;
    }
    console.log('count',count);
  }  
  // 调用函数
  sum();
</script>
    
    
<script>
	console.log('str',str); // 不会报错,输出undefined
    var str = 'hello';
	console.log('str',str); // hello
</script>

(2) 对象中的方法

定义在对象中的函数就是对象的方法, 下面say函数是obj对象的一个方法

alert, console, prompt都是window对象的方法

<script>
  var obj = {
    name: 'zhangsan',
    age: 18,
    say: function() {
      console.log('它是张三');
    }
  }
  obj.say();
</script>

(3) 函数表达式(先了解)

使用函数表达式来创建函数的时候, 调用函数必须放在函数之后

<script> 
  // 使用函数表达式时, say在这里还没赋值, 所以它的值就是undefined, 所以不能调用
  console.log('say',say); 
  var say = function () {
    console.log('它居然会说话')
  };
  // 必须在赋值之后去调用(就是在表达式之后才能调用)
  say();
</script>

(二)函数的调用方式

(1) 手动调用

(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>
  <button onclick="say()">按钮</button>
 
  <script>
    function say(){
      console.log('哈哈哈哈哈');
    }
    // 调用函数
    say();
  </script>
</body>
</html>

(三)函数传递参数(重要)

调用函数可以通过()传入任意类型参数, 被调用函数通过()接收参数(demo1)
- 调用时传入什么数据,函数就接收到什么数据
- 传入的参数可以是任何类型
传入的参数叫实参, 接收的参数叫形参, 形参和实参位置一一对应
基本数据类型和引用数据类型参数的区别(先了解)

<!-- demo1 -->
<!DOCTYPE html>
<html lang="en"> 
<body> 
  <script>
      function say(a) {
        console.log(a);
      } 
      say(100);
      say('abcd');
      say({name:'zhangsan',age: 100});
  </script>
</body>
</html>    
      
<!-- demo2 -->
<!DOCTYPE html>
<html lang="en"> 
<body> 
  <script>
      var a = 100;
      var b = 200;
      say(a,b);

      function say(x,y) {
        console.log(x,y);
      } 
  </script>
</body>
</html>

(四)函数返回值

4.1 使用 return 返回计算的结果(是否需要返回根据你自己的需要) 4.2 没写 return,默认返回 undefined

<script>
    function add(a,b) {
      var sum = a+b;
      return sum;
    }

    var sum = add(10,20);
    console.log('调用结果',sum);
</script>
    
<script>
    function add(a,b) {
      var sum = a+b;
      console.log(sum);
    }

    var sum = add(10,20);
    console.log('调用结果',sum); // undefined
</script>

(五)作用域

什么是作用域?

答: 变量的作用域指的是变量起作用的领域(范围)就是变量的作用域.

作用域和变量
作用域访问规则

(1) 作用域和变量

全局作用域和全局变量: 全局作用域就是window,在window下定义的变量就是全局变量

var num = 100; // 全局变量num会自动的变成window的一个属性
window.num2 = 200;
console.log(window.num2);
consoel.log(num2);  // 全局变量可以直接访问, 省略window.

函数运行时, 函数内部就形成了局部作用域, 在函数内部声明的变量就是局部变量

局部变量在函数运行的时候存在, 函数运行结束就被销毁

ps: 区分全局和局部变量的标准就是看这个变量是否是在函数内声明的

  <script>
    // num是全局变量
    var num = 100; 
	// sum,a,b都是局部变量, 因为它们都是函数add内
    function add(a, b) {
      var sum = a + b;
      return sum;
    } 
  </script>

js没有块级作用域(后台语言有块级作用域, 以{}进行区分)

解释: js的作用域以函数作为区分标准, 而不是以{}作为区分标准
```
<script> 
    for(var i=0;i<5;i++) {
      console.log(2222);
    } 
    console.log(i);
</script>
```

(4) 作用域规则

函数内部可以访问函数外部的变量

函数外部不可以访问函数内部的变量

<script>
  var x = 100; 
  function aa() {
    var y = 200;
    console.log(x); // 里面可以访问外面
  } 
  aa();  
  console.log(y);  // 外面无法访问里面
</script>

多个嵌套的作用域形成了作用域链

当访问一个变量时, 从最近的作用域开始查找, 若没有就查找向上一层作用域, 一直到全局作用域为止, 若找到就返回, 找不到就报错"xxx is not defined"

<script>
  var x = 100; 
  function aa() {
    var a = 10;
    function bb() {
      var b = 20;
      function cc() {
        var c = 30;
         console.log(x);
         console.log(y);
      }
      cc();
    }
    bb();
  } 
  aa();   
</script>