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

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

2023-07-16 52
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 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
目录
相关文章
进步`于辰
|
12天前
|
JavaScript 前端开发 Java
[JS]同事：这次就算了，下班回去赶紧补补内置函数，再犯肯定被主管骂
本文介绍了JavaScript中常用的函数和方法，包括通用函数、Global对象函数以及数组相关函数。详细列出了每个函数的参数、返回值及使用说明，并提供了示例代码。文章强调了函数的学习应结合源码和实践，适合JavaScript初学者和进阶开发者参考。
进步`于辰
25 2
[JS]同事：这次就算了，下班回去赶紧补补内置函数，再犯肯定被主管骂
大树营养快线
|
11天前
|
前端开发 JavaScript 开发者
除了 Generator 函数，还有哪些 JavaScript 异步编程解决方案？
【10月更文挑战第30天】开发者可以根据具体的项目情况选择合适的方式来处理异步操作，以实现高效、可读和易于维护的代码。
大树营养快线
26 2
游客44yag4ft7nckq
|
25天前
|
JavaScript 前端开发
JavaScript 函数语法
JavaScript 函数是使用 `function` 关键词定义的代码块，可在调用时执行特定任务。函数可以无参或带参，参数用于传递值并在函数内部使用。函数调用可在事件触发时进行，如用户点击按钮。JavaScript 对大小写敏感，函数名和关键词必须严格匹配。示例中展示了如何通过不同参数调用函数以生成不同的输出。
游客44yag4ft7nckq
17 1
德国都芳最好
|
27天前
|
存储 JavaScript 前端开发
JS函数提升 变量提升
【10月更文挑战第6天】函数提升和变量提升是 JavaScript 语言的重要特性，但它们也可能带来一些困惑和潜在的问题。通过深入理解和掌握它们的原理和表现，开发者可以更好地编写和维护 JavaScript 代码，避免因不了解这些机制而导致的错误和不一致。同时，不断提高对执行上下文等相关概念的认识，将有助于提升对 JavaScript 语言的整体理解和运用能力。
德国都芳最好
17 1
神明木佑
|
1月前
|
JavaScript 前端开发
js教程——函数
js教程——函数
神明木佑
32 4
神明木佑
|
1月前
|
存储 JavaScript 前端开发
js中函数、方法、对象的区别
js中函数、方法、对象的区别
神明木佑
16 2
小强在此
|
1月前
|
JavaScript 前端开发 Java
【javaScript数组，函数】的基础知识点
【javaScript数组，函数】的基础知识点
小强在此
23 5
cqtianxin1
|
1月前
|
JavaScript 前端开发
Node.js 函数
10月更文挑战第5天
cqtianxin1
22 3
Li370234940
|
1月前
|
前端开发 JavaScript
探索JavaScript函数基础
探索JavaScript函数基础
Li370234940
18 3
邹荣乐
|
30天前
|
存储 JavaScript 前端开发
JavaScript数据类型全解：编写通用函数，精准判断各种数据类型
JavaScript数据类型全解：编写通用函数，精准判断各种数据类型
邹荣乐
18 0

热门文章

最新文章

  • 1
    实时显示日期、时间、城市天气（HTML+JS）
  • 2
    JavaScript值得注意的小知识点
  • 3
    HTML6 无 JavaScript 的单页应用引起一片哗然
  • 4
    走在JS上的全栈之路(一)
  • 5
    JavaScript 图片切割效果
  • 6
    js: 删除node的所有child
  • 7
    js正则表达式语法
  • 8
    Swift WKWebView JS 和 Native 交互(上)
  • 9
    开发者最容易犯的13个JavaScript错误
  • 10
    高性能Javascript--脚本的无阻塞加载策略
  • 1
    前端框架与库 - Vue.js基础：模板语法、数据绑定
    134
  • 2
    《JavaScript权威指南第7版》中文PDF+英文PDF+源代码 +JavaScript权威指南(第6版)(附源码)PDF下载阅读分享推荐
    271
  • 3
    js【详解】arr.reduce() 数组缩减
    47
  • 4
    【vue】 vue2 | js 实现数字滚动效果
    107
  • 5
    【vue】 网站动态背景 | vanta.js的使用
    418
  • 6
    JavaScript进阶-JavaScript库与框架简介
    58
  • 7
    DVWA JavaScript 通关解析
    67
  • 8
    WEB三大主流框架之Vue.js
    45
  • 9
    断网之后的页面，Autox.js是点击还是上下滑动比较好？
    60
  • 10
    autox.js如何监听异常情况，比如网络中断、内存慢、应用死机或者页面无响应
    221

    • 相关课程

    更多
  • JavaScript入门与实战
  • JavaScript 自学手册文档教程
  • Vue.js完全自学手册图文教程
  • Vue.js 入门与实战
  • React 入门教程开发文档
  • PHP进阶教程 - 由浅入深掌握面向对象开发 - 第二阶段

    • 相关电子书

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

    • 相关实验场景

    更多
  • 前端开发基础6：Node.js和LESS预编译工具
  • Html5和Webpack2：Webpack5打包JS和样式表
    • 下一篇
    阿里云OSS设置跨域访问