JavaScript进阶（六）

最新推荐文章于 2023-06-04 21:01:59 发布

AVIC_501

最新推荐文章于 2023-06-04 21:01:59 发布

阅读量113

点赞数

本文链接：https://blog.csdn.net/li5306/article/details/119741248

版权

JavaScript+ 专栏收录该内容

18 篇文章 1 订阅

订阅专栏

一、函数声明

函数的两个基本概念

    函数声明
    函数调用
    函数 => 功能 (function)
    函数声明 => 设计功能.
    函数调用 => 使用这个功能。
    想要弹窗功能 => alert('你好'), '你好'叫函数的参数.
    alert函数 => alert功能 => 弹窗功能

    写函数

    语法 =>

    1(函数声明): function 函数 () { 功能代码 }
    2(匿名函数): function () { 功能代码 }
    3(箭头函数): () => {功能代码}
    4(函数表达式): const fn = () => {}; const fn = function() {}

普通函数:function () { 功能代码 } (ES5)
箭头函数:() => {功能代码} (ES6)

函数声明代码

<script>

    // 没名字的函数叫匿名函数。
    oBtn.onclick = function () {}
    // 推荐后续事件这样写.
    oBtn.onclick = () => {}

  </script>

二、函数调用

// 设计了一个功能 => 弹200.
    function fn () {
      alert(200);
    }

    // 函数调用 => alert(200)就会被执行.
    fn();

// 函数调用的语法(唯一)
    // 函数名(参数);

    // 用函数表达式来创建fn函数
    const fn = function() {
      alert(200);
    }

    // 调用fn
    fn();

// 通过箭头函数创建功能
    const fn = () => {
      alert(200);
    }

    // 箭头函数fn的调用
    fn();

const oYm = {
      fn: function() {
        alert('幂幂');
      },
      show: () => {
        console.log('超越')
      }
    };

    // 调用fn方法
    oYm.fn();
    // 调用show方法
    oYm.show();

let arr = [
      function(){alert('111')}, 
      () => {alert('2222')}
    ];

    // 调用第一个元素
    arr[0]();
    // 调用第二个元素
    arr[1]();

<script>
let arr = [
      {
        fn: function() {
          alert('fn无敌')
        },
        list: [
          {
            show: function() {
              alert('show更无敌')
            }
          }
        ]
      }
    ];

    // 调用第一个元素的fn方法
    arr[0].fn();
    // 调用show方法.
    arr[0].list[0].show();

  </script>

三、函数调用和声明

函数调用和声明的关系:

    函数声明内的代码只有在遇到函数调用时才会被执行.
    函数调用会去执行函数声明内的代码.
    有函数的代码是不能无脑从上往下分析的.

let num = 0;

    function fn () {
      num += 5
    }

    // 打印0,因为fn没调用,num += 5就没有被执行.
    console.log(num);

let num = 0;

    function fn () {
      num += 5
    }

    // 打印0,因为fn在打印之后调用.num += 5是在打印之后执行.
    console.log(num);

    fn ();

let num = 0;

    function fn () {
      num += 5
    }

    console.log(num); // 0

    function show() {
      num += 2;
    }

    show();

    console.log(num);// 2

    fn();

    console.log(num); // 7

四、函数阅读

let num = 0;

    function fn () {
      num += 5
    }

    console.log(num); // 0

    function show() {
      num += 2;
    }

    show();

    console.log(num);// 2

    fn();

    console.log(num); // 7

以下函数阅读分析步骤,把程序按执行顺序列出来之后再分析 => 我们看到函数声明直接跳过.看到了调用在回头函数声明内的代码

    1: let num = 0;
    2: console.log(num);// 0
    3: show();
    4: num += 2;
    5: console.log(num);// 2
    6: fn();
    7: num += 5;
    8: console.log(num);// 7

五、列步骤的重要性

我们在阅读函数代码的时候，对于初学者来说刚开始不能毫无计划的去阅读，一个步骤分析错了可能会造成全盘都出现错误得出的结果也就不一样了。

<script>

    var i = 5;
    for (; i-- ;) {
      console.log(i);// 4,3,2,1,0
    }

    console.log(i);// -1

  </script>

以下分析for死循环的步骤。

    1: i-- === 5 i === 4 console.log(i) // 4
    2: i-- === 4 i === 3 console.log(i) // 3
    3: i-- === 3 i === 2 console.log(i) // 2
    4: i-- === 2 i === 1 console.log(i) // 1
    5: i-- === 1 i === 0 console.log(i) // 0
    6: i-- === 0 i === -1 终止循环。
    7: console.log(i); -1

六、函数出参

<body>  
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</body>

函数调用是一个表达式.

    表达式

    1:原始表达式,单个常量和变量
    2:运算符表达式.
    3:函数调用表达式.
    表达式都会有返回值.函数调用也有返回值.

    把alert(100)的返回值赋值给x.

    let x = alert('100');

    打印alert(200)的返回值.

    console.log(alert(200));

    不同的函数调用有不同的返回值.有些函数没返回值.(undefined)

    自己写的函数,如何让他有返回值

    这个fn没有返回值,因此调用时返回undefined

    function fn() {

      console.log('8000')

    }

    把fn()的返回值赋值给x。

    let x = fn();

    console.log(x); // undefined

    // 这个fn有返回值,返回的值就是return后面表达式的值.
    // return 后面的值,我们就叫做函数的"出参".
    function fn() {
      console.log('8000');
      return 100
    }

    // 把fn()的返回值赋值给x。
    let x = fn();

    console.log(x); // 100

七、函数出参

出参

    函数调用是表达式,那函数调用表达式的返回值是由什么确定?
    函数声明内的 return 决定了函数的返回值.
    return 后面可以写任意的表达式.

<script>

    // 函数出出参可以是任意表达式.
    // 最后的出参就是return 后面表达式的值.

    function fn () {

      let x = 200;

      // 返回 一个原始表达式
       return 100

      // 返回 一个原始表达式
       return x

      // 返回 一个运算符表达式
       return x + 100

      // 返回 一个运算符表达式
       return typeof x

      // 返回一个三目运算表达式
       return false ? 300 : x

      // 返回一个逻辑与
       return false && x;

      // 返回另一个函数调用表达式.
      // 这时fn()的返回值就是show()的返回值
      // show()返回undefined,因此num就是undefined
      return show()
    }

    function show() {
      console.log(100)
    }

    // show() => fn() => num
    let num = fn();

    console.log(num); // 'number'

  </script>

八、形参实参

形参和实参关系 => 断点观察

调用时,形参变成实参.
同一个函数可以调用多次,因此形参在每次函数调用时都会变成不同的值。

功能就是弹100 => 功能特别单一.不够强大.
如何让fn可以弹指定的内容.而不是固定弹100.

    function fn() {
      alert(100);
    }

这里x叫 => 形参

    x写在函数声明的()里,就相当于是声明过了.不需要再手动声明.

    x用来干嘛的? => 代数.函数调用时x才会有具体的值.

    x和100,200,抹蜜哦有啥关系? => 形参在函数调用时被实参赋值.(形参在函数调用时变成实参)

    如果不传入实参,形参是什么? undefined.

    想知道形参的值 => 只能在调用时和实参的值一致.

    抛开调用弹形参是什么 => 是毫无意义.

    // x 是什么?
    function fn(x) {
      alert(x);
    }

    // 这里200和100是实参.
    // 弹200
    fn(200);
    // 弹100
    fn(100);
    // 弹抹蜜哦
    fn('抹蜜哦');

九、形参和实参

形参会变成实参 => 把xxx值带入公式计算得....

    π*r*r 已知篮球的半径是15cm.把15cm带入公式计算.相当于是把r变成15cm来计算

    π*r*r 已知太阳的半径是127348728km.把127348728km带入公式计算.相当于是把r变成127348728km来计算

    形参和实参 => 统称参数(入参);

    // 两个参数的函数.多个参数间用,隔开.
    function fn (x, y) {
      console.log('x', x);
      console.log('y', y);
    }

    fn(100, 200);

十、封装函数

封装函数 => 用入参,出参以及循环判断等语法.设计一个功能.

    不管封装什么函数,都需要写声明和调用.

    目的: 设计一个功能, 可以计算任意两个数字的乘积.

    封装函数应该先写调用.

    然后根据调用去写声明.

    let num1 = fn(1, 3);
    let num2 = fn(2, 5);

    function fn(x, y) {
      return x * y
    }

AVIC_501

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript进阶（六）

一、函数声明函数的两个基本概念函数声明函数调用函数=>功能(function) 函数声明=>设计功能. 函数调用=>使用这个功能。想要弹窗功能=>alert('你好'),'你好'叫函数的参数. alert函数=>alert功能=>弹窗功能写函数语法=>1(函数声明):function函数()...
复制链接

扫一扫