AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

JS(第九课)深刻的去理解函数.(二)

2023-07-16 47
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： JS(第九课)深刻的去理解函数.(二)

函数的执行顺序你了解多少呀！比如我现在声明下面的函数 认为函数会如何执行呢！

 //全局变量 
var name="张三";
  var sex="女";
  var age=34;
  // 函数一
  function one(name){
      console.log("在局部变量中函数打印的内容"+name)
      function two(sex){
          console.log("在two方法中没有找到name属性打印的内容"+name)
          console.log("在全局变量中打印的年龄"+age)
          console.log("性别是"+sex+"姓名是"+name)
          function three(age){
              console.log("在全局变量中打印的年龄"+age)
              console.log("用户打印的年龄为"+age+"在three方法中没有姓名"+name+"没有性别的属性"+sex)
          }
          three(20)
      }
      two("男")
  }
  one("李四")
  // 函数为什么打印出张三
  console.log("在全局变量函数打印的内容"+name);
  console.log("在全局变量中打印的年龄"+age)

函数的执行顺序你了解多少呀！比如我现在声明下面的函数 认为函数会如何执行呢！ 仔细思考一下为什么呢！

函数的执行顺序总结:函数的的查找方式是就近原则，先局部在整体，范围不断扩大:

下面的案例各位可以思考一下

<!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>
    <!-- 有先反问自己的函数内的变量  -->
    <!-- 理解函数 的全局变量 和局部变量 -->
    <!-- 函数的表达式的内容 -->
    <script>
        // people()
        ope()
        function ope(){
            alert("调用的函数的ope")
        }
        var people=function(){
            console.log("函数无法调用")
        }
        var foo=function(){
            console.log("我是函数的表达式")
        }
        function people(name,fn){
            console.log(name);
            fn();
        }
        people("shuop",function(){
            console.log("正在睡觉")
            console.log("123")
        })
        foo()
        console.log(foo);
        function eating(){
            console.log("正在吃饭")
        }
        var bar=eating
        bar()
            var obj={
                name:"张珊",
                run:function(){
                    console.log("我在跑步")
                }
            }
            obj.run()
    </script>
</body>
</html>

匿名函数自动执行:

// 匿名函数
  (function () {
      console.log("匿名函数自执行");
  })()

案例

<!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>1</button>
    <button>12</button>
    <button>13</button>
    <button>14</button>
    <button>15</button>
    <button>16</button>
    <button>17</button>
    <button>18</button>
    <script>
        var bats = document.querySelectorAll("button")
        for (let i = 0; i < bats.length; i++) {
            bats[i].onclick = function () {
                console.logZ(`第几个${i + 1}`);
            }
        }
        // 呢名函数
        (function () {
            console.log("匿名函数自执行");
        })()
    </script>
</body>
</html>

ES6中的箭头函数:

箭头函数的注意点：如果形参只有一个，则小括号可以省略；函数体如果只有一条语句，则花括号可以省略，函数的返回值为该条语句的执行结果；箭头函数 this 指向声明时所在作用域下 this 的值；箭头函数不能作为构造函数实例化；不能使用 arguments；

特性：

箭头函数的this是静态的，始终指向函数声明时所在作用域下的this的值；

不能作为构造实例化对象；

不能使用 arguments 变量；

接下来一起来学习一下吧！

 //传统写法：无参数
 var say = function () {
     console.log("hello!");
 }
 say();
 //ES写法2：无参数
 // 好像少了function
 let speak = () => console.log("hello 哈哈！");
 speak();


    // 传统写法：一个参数 
    var hello = function (name) {
        return "hello" + name;
    }
    console.log(hello("人人"));
    //ES6箭头函数：一个参数
    let hi = name => "hi" + name;
    console.log(hi("我是es6新的表达方式"));
    console.log("======================================="
    let fn = sex => "fn" + sex;
    console.log(fn("我是男性"));


        //传统写法:多个参数
        var sun = function (a, b, c) {
            return a + b + c;
        }
        console.log(sun(1, 2, 3));
        //ES6箭头函数:多个参数
        let he = (a, b, c) => a + b + c;
        console.log(he(1, 2, 3));

箭头函数的this是静态的，始终指向函数声明是所在作用域下的this的值

 const school = {
     name: "我是你的大哥哦",
 }
 //传统函数写法
 function getName() {
     console.log("getName:" + this.name);
 }
 //箭头函数
 getName1 = () => console.log("getName1:" + this.name);
 window.name = "玩家往往能够网网";
 //函数的直接调用
 getName();
 getName1();
 //函数的使用call调用 方案二
 getName.call(school);
 getName1.call(school);

上面的代码运行结果

arguments的对象介绍

        每一个函数都会有一个Arguments对象实例arguments，它引用着函数的实参，可以用数组下标的方式" [ ] "引用arguments的元素。

       arguments.length为函数实参个数，arguments.callee引用函数自身。

       arguments对象是所有函数中可用的局部变量，

       可以使用arguments对象在函数中引用函数的参数，此参数包含传递给函数的每个参数条目。


// function arg(name){
// console.log(arguments);
// console.log(arguments[0]);
// console.log(arguments[1]);
// console.log(arguments[2])
// console.log(typeof arguments);
// for(var i=0;i<arguments.length;i++){
// document.write(arguments[i])
// document.write(...arguments)
// }
// }
// arg("张三",123,678,"abc","aa3")
// 定义：
// arguments是一个类似于数组的对象，对应于传递给函数的参数，他有length属性，argument
// 但是它不能用数组的一些方法。例如push、pop、slice等。
// arguments虽然不是一个数组，但是它可以转成一个真正的数组。
function argText(a, b, c, d, e, f) {
    var actual = arguments.length;   //实际传参个数
    var hope = argText.length   //期望传参个数
    // 8  6
    console.log(actual, hope);
    //转换数组：
    var args1 = [].slice.call(arguments);   //第一种
    var args = Array.prototype.slice.call(arguments);   //第二种
    var args2 = Array.from(arguments);   //第三种
    var args3 = [...arguments];   //第四种
    console.log(args)
    console.log(args1)
    console.log(args2)
    console.log(args3)
    // 
}
argText(1, 2, 3, 4, 5, 6, 7, 8)

函数表达式:

 var foo=function(){
     console.log("我是函数的表达式")
 }
 foo()
 console.log(foo);

主要看下面的案例

<!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>
    <!-- 有先反问自己的函数内的变量  -->
    <!-- 理解函数 的全局变量 和局部变量 -->
    <!-- 函数的表达式的内容 -->
    <script>
        // people()
        ope()
        function ope(){
            alert("调用的函数的ope")
        }
        var people=function(){
            console.log("函数无法调用")
        }
        var foo=function(){
            console.log("我是函数的表达式")
        }
        function people(name,fn){
            console.log(name);
            fn();
        }
        people("shuop",function(){
            console.log("正在睡觉")
            console.log("123")
        })
        foo()
        console.log(foo);
        function eating(){
            console.log("正在吃饭")
        }
        var bar=eating
        bar()
            var obj={
                name:"张珊",
                run:function(){
                    console.log("我在跑步")
                }
            }
            obj.run()
    </script>
</body>
</html>

在函数中有一种思想 叫递归 看个案例 五五重复的加法

<!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>
    <style>
        :root {
            --bule: pink;
        }
        div {
            --co: green;
        }
    </style>
</head>
<body>
    <!-- 全局变量的理解 和局部变量的理解  -->
    <script>
        function sahi(names) {
            for (var i = 0; i < arguments.length; i++) {
                console.log(arguments[i])
            }
            return arguments;
        }
        var arg = sahi("simkop", 23, 45);
        console.log(arg)
        console.log(typeof arg)
    </script>
    <!-- 函数中调用函数 -->
    <script>
        function run(name) {
            console.log(name + "正在跑步")
        }
        function people(name) {
            console.log("我的姓名叫" + name)
            run(name)
        }
        people("张三")
    </script>
    <!-- 函数回调 -->
    <script>
        function chuko() {
            alert("这是程序的出口")
        }
        function a() {
            chuko();
        }
        function b() {
            a();
        }
        function c() {
            b();
        }
        function d() {
            alert("程序的入口")
            c();
        }
        // 调用的出口
        d()
    </script>
    <!-- 幂函数的实现 -->
    <script>
        function dg(x, n) {
            var sum = 1;
            for (var i = 1; i <= n; i++) {
                sum *= x;
            }
            return sum
        }
        var num = dg(2, 10);
        console.log(num);
    </script>
    <!-- 递归 -->
    <script>
        // 第一次的时候 变量初始值 X=5 n=1  5
        // 第二次的时候 变量初始值 x=5 n=2  25
        function pow(x, n) {
            if (n == 1) return x
            document.write("打印第一次的内容" + x)
            // 5*pow(5,2-1)
            // 5 *5=25
            return x + pow(x, n - 1)
        }
        // 5*5
        var nums = pow(5, 2);
        console.log("打印第二次的内容" + nums)
    </script>
    <!-- 递归 -->
    <script>
        // 第三次的时候 变量初始值 x=5 n=3  125
        function pow(x, n) {
            if (n == 1) return x
            // 5*pow(5,3-1);
            // 5*25
            return x + pow(x, n - 1)
        }
        // 5 *5*5*
        var nums = pow(5, 3);
        console.log("打印第三次的内容" + nums)
    </script>
    <!-- 递归 -->
    <script>
        function pow(x, n) {
            if (n == 1) return x
            // 5*125
            return x + pow(x, n - 1)
        }
        // 5 *5*5*5
        var nums = pow(5, 4);
        console.log("打印第四次的内容" + nums)
    </script>
    <!-- 递归 -->
    <script>
        function pow(x, n) {
            if (n == 1) return x
            // 5*125
            return x + pow(x, n - 1)
        }
        // 5* 5*5*5*5
        var nums = pow(5, 5);
        console.log("打印第五次的内容" + nums)
    </script>
    <!-- 递归 -->
    <script>
        function pow(x, n) {
            if (n == 1) return x
            // 5*125
            return x + pow(x, n - 1)
        }
        // 5* 5*5*5*5*5
        var nums = pow(5, 6);
        console.log("打印第六次的内容" + nums)
    </script>
    <!-- 递归 -->
    <script>
        function pow(x, n) {
            if (n == 1) return x
            // 5*125
            return x + pow(x, n - 1)
        }
        // 5* 5*5*5*5*5
        var nums = pow(5, 7);
        console.log("打印第七次的内容" + nums)
    </script>
    <!-- 递归 -->
    <script>
        function pow(x, n) {
            if (n == 1) return x
            // 5*125
            return x + pow(x, n - 1)
        }
        // 5* 5*5*5*5*5
        var nums = pow(5, 8);
        console.log("打印第八次的内容" + nums)
    </script>
    <!-- 递归 -->
    <script>
        function pow(x, n) {
            if (n == 1) return x
            // 5*125
            return x + pow(x, n - 1)
        }
        // 5* 5*5*5*5*5
        var nums = pow(5, 9);
        console.log("打印第九次的内容" + nums)
    </script>
    <!-- 递归 -->
    <script>
        function pow(x, n) {
            if (n == 1) return x
            // 5*125
            return x + pow(x, n - 1)
        }
        // 5* 5*5*5*5*5
        var nums = pow(5, 10);
        console.log("打印第十次的内容" + nums)
    </script>
</body>
</html>

不理解没有关系:在看个重复5的乘法

<!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>
    <style>
        :root {
            --bule: pink;
        }
        div {
            --co: green;
        }
    </style>
</head>
<body>
    <!-- 全局变量的理解 和局部变量的理解  -->
    <script>
        function sahi(names) {
            for (var i = 0; i < arguments.length; i++) {
                console.log(arguments[i])
            }
            return arguments;
        }
        var arg = sahi("simkop", 23, 45);
        console.log(arg)
        console.log(typeof arg)
    </script>
    <!-- 函数中调用函数 -->
    <script>
        function run(name) {
            console.log(name + "正在跑步")
        }
        function people(name) {
            console.log("我的姓名叫" + name)
            run(name)
        }
        people("张三")
    </script>
    <!-- 函数回调 -->
    <script>
        function chuko() {
            alert("这是程序的出口")
        }
        function a() {
            chuko();
        }
        function b() {
            a();
        }
        function c() {
            b();
        }
        function d() {
            alert("程序的入口")
            c();
        }
        // 调用的出口
        d()
    </script>
    <!-- 幂函数的实现 -->
    <script>
        function dg(x, n) {
            var sum = 1;
            for (var i = 1; i <= n; i++) {
                sum *= x;
            }
            return sum
        }
        var num = dg(2, 10);
        console.log(num);
    </script>
    <!-- 递归 -->
    <script>
        // 第一次的时候 变量初始值 X=5 n=1  5
        // 第二次的时候 变量初始值 x=5 n=2  25
        function pow(x, n) {
            if (n == 1) return x
            document.write("打印第一次的内容" + x)
            // 5*pow(5,2-1)
            // 5 *5=25
            return x * pow(x, n - 1)
        }
        // 5*5
        var nums = pow(5, 2);
        console.log("打印第二次的内容" + nums)
    </script>
    <!-- 递归 -->
    <script>
        // 第三次的时候 变量初始值 x=5 n=3  125
        function pow(x, n) {
            if (n == 1) return x
            // 5*pow(5,3-1);
            // 5*25
            return x * pow(x, n - 1)
        }
        // 5 *5*5*
        var nums = pow(5, 3);
        console.log("打印第三次的内容" + nums)
    </script>
    <!-- 递归 -->
    <script>
        function pow(x, n) {
            if (n == 1) return x
            // 5*125
            return x * pow(x, n - 1)
        }
        // 5 *5*5*5
        var nums = pow(5, 4);
        console.log("打印第四次的内容" + nums)
    </script>
    <!-- 递归 -->
    <script>
        function pow(x, n) {
            if (n == 1) return x
            // 5*125
            return x * pow(x, n - 1)
        }
        // 5* 5*5*5*5
        var nums = pow(5, 5);
        console.log("打印第五次的内容" + nums)
    </script>
    <!-- 递归 -->
    <script>
        function pow(x, n) {
            if (n == 1) return x
            // 5*125
            return x * pow(x, n - 1)
        }
        // 5* 5*5*5*5*5
        var nums = pow(5, 6);
        console.log("打印第六次的内容" + nums)
    </script>
</body>
</html>

递归的思想又是函数中自己去调用自己的函数

文章标签：
JavaScript
关键词：
JavaScript函数
JavaScript深刻函数
t75yjb52rsccc
目录
相关文章
土木林森
|
29天前
|
前端开发 JavaScript 开发者
揭秘JavaScript魔法三剑客：call、apply、bind，解锁函数新世界，你的前端之路因它们而精彩！
【8月更文挑战第23天】在 JavaScript 的世界里，`call`、`apply` 和 `bind` 这三个方法常常让新手感到困惑。它们都能改变函数执行时的上下文（即 `this` 的指向），但各有特点：`call` 接受一系列参数并直接调用函数；`apply` 则接收一个参数数组，在处理不确定数量的参数时特别有用；而 `bind` 不会立即执行函数，而是创建一个新版本的函数，其 `this` 上下文已被永久绑定。理解这三个方法能帮助开发者更好地运用函数式编程技巧，提升代码灵活性和可维护性。
土木林森
27 0
尹正杰
|
18天前
|
JavaScript 前端开发
JavaScript基础知识-函数的返回值
关于JavaScript函数返回值的基础知识。
尹正杰
21 9
JavaScript基础知识-函数的返回值
游客zi3qmblbcdexu
|
3天前
|
JSON JavaScript 前端开发
JavaScript第五天（函数，this，严格模式，高阶函数，闭包，递归，正则，ES6）高级
JavaScript第五天（函数，this，严格模式，高阶函数，闭包，递归，正则，ES6）高级
游客zi3qmblbcdexu
25 12
尹正杰
|
18天前
|
JavaScript 前端开发
JavaScript基础知识-函数的参数
关于JavaScript函数参数基础知识的介绍。
尹正杰
17 4
JavaScript基础知识-函数的参数
尹正杰
|
18天前
|
JavaScript 前端开发
JavaScript基础知识-立即执行函数
关于JavaScript基础知识中立即执行函数的介绍。
尹正杰
16 2
JavaScript基础知识-立即执行函数
cqtianxin1
|
16天前
|
JavaScript 前端开发
JavaScript 函数
JavaScript 函数
cqtianxin1
22 9
Star时光
|
17天前
|
JavaScript 前端开发
前端JS函数
【9月更文挑战第4天】前端JS函数
Star时光
21 6
小周sir
|
14天前
|
存储 JavaScript 前端开发
JS中的数组有哪些常用操作函数和属性
【9月更文挑战第7天】JS中的数组有哪些常用操作函数和属性
小周sir
9 1
wljslmz
|
21天前
|
自然语言处理 JavaScript 前端开发
函数闭包：理解JavaScript中的闭包及其应用
【8月更文挑战第31天】
wljslmz
8 0
路边两盏灯
|
27天前
|
SQL JavaScript 前端开发
【Azure 应用服务】Azure JS Function 异步方法中执行SQL查询后，Callback函数中日志无法输出问题
【Azure 应用服务】Azure JS Function 异步方法中执行SQL查询后，Callback函数中日志无法输出问题
路边两盏灯
67 0

热门文章

最新文章

  • 1
    JavaScript基本数据类型分析
  • 2
    [译] 使用 Node.js 提供百万的活跃 WebSocket 连接
  • 3
    读javascript高级程序设计14-错误处理与调试
  • 4
    VS实现JavaScript智能感知实践
  • 5
    用js实现登录的简单验证
  • 6
    js 格式验证总结
  • 7
    局部打印插件 jquery.PrintArea.js
  • 8
    《JavaScript和jQuery实战手册（原书第2版）》——3.5节教程：一个简单测验
  • 9
    如何添加360浏览器（chrome）添加JavaScript例外，禁止网站加载JS
  • 10
    Kotlin 扩展函数 与 JS 的 prototype
  • 1
    【Web 前端】JavaScript window.onload 事件和 jQuery ready 函数有何不同？
    62
  • 2
    Vue.js 中父组件调用子组件的方法
    98
  • 3
    Vue.js 中子组件向父组件传值的方法
    56
  • 4
    使用JavaScript和XLSX.js将数据导出为Excel文件
    279
  • 5
    AngularJS是一款由Google收购的JavaScript结构框架
    56
  • 6
    JavaScript 关键字
    45
  • 7
    【Web 前端】什么是JS变量提升？
    99
  • 8
    <body> 中的JavaScript函数
    30
  • 9
    <head> 中的JavaScript 函数
    30
  • 10
    【JavaScript 与 TypeScript 技术专栏】JavaScript 与 TypeScript 的未来发展趋势
    130

    • 相关课程

    更多
  • JavaScript入门与实战
  • JavaScript 自学手册文档教程
  • Vue.js完全自学手册图文教程
  • Vue.js 入门与实战
  • React 入门教程开发文档

    • 相关电子书

    更多
  • JavaScript异步编程
  • Delivering Javascript to World
  • 编程语言如何演化-以JS的private为例

    • 相关实验场景

    更多
  • 前端开发基础6：Node.js和LESS预编译工具
  • Html5和Webpack2：Webpack5打包JS和样式表
    • 下一篇
    通义千问API入门教程