备案控制台
探索云世界
开发者社区 开发与运维 文章 正文

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

2023-07-16 36
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 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
目录
相关文章
雷霆半月斩掉你的板砖
|
21天前
|
JavaScript
变量和函数提升（js的问题）
变量和函数提升（js的问题）
雷霆半月斩掉你的板砖
8 0
泡芙-草莓
|
29天前
|
JavaScript
变量和函数提升（js的问题）
变量和函数提升（js的问题）
泡芙-草莓
8 0
泡芙-草莓
|
29天前
|
JavaScript
常见函数的4种类型（js的问题）
常见函数的4种类型（js的问题）
泡芙-草莓
11 0
程序员-刘华强
|
3天前
|
JavaScript
变量和函数提升（js的问题）
变量和函数提升（js的问题）
程序员-刘华强
7 0
爱叨叨的小嘟
|
4天前
|
存储 JavaScript 前端开发
每日一道javascript面试题（九）函数的参数可以和函数体中的变量重名吗
每日一道javascript面试题（九）函数的参数可以和函数体中的变量重名吗
爱叨叨的小嘟
8 0
爱叨叨的小嘟
|
4天前
|
JavaScript 前端开发
每日一道javascript面试题（七）你真的知道箭头函数吗
每日一道javascript面试题（七）你真的知道箭头函数吗
爱叨叨的小嘟
13 0
东方睿赢
|
8天前
|
JavaScript 前端开发
js开发：请解释什么是ES6的Generator函数，以及它的用途。
ES6的Generator函数是暂停/恢复功能的特殊函数，利用yield返回多个值，适用于异步编程和流处理，解决了回调地狱问题。例如，一个简单的Generator函数可以这样表示： ```javascript function* generator() { yield &#39;Hello&#39;; yield &#39;World&#39;; } ``` 创建实例后，通过`.next()`逐次输出&quot;Hello&quot;和&quot;World&quot;，展示其暂停和恢复的特性。
东方睿赢
18 0
恰小面包
|
15天前
|
缓存 JavaScript 前端开发
js的入口函数，入口函数的作用
js的入口函数，入口函数的作用
恰小面包
16 4
聂聂脸
|
20天前
|
JavaScript 前端开发
JS的入口函数，并讲解入口函数的作用
JS的入口函数，并讲解入口函数的作用
聂聂脸
10 0
泡芙-草莓
|
29天前
|
JavaScript
惰性加载函数（js的问题）
惰性加载函数（js的问题）
泡芙-草莓
7 0

热门文章

最新文章

  • 1
    JavaScript 权威指南第七版（GPT 重译）（六）(4)
  • 2
    JavaScript 权威指南第七版（GPT 重译）（三）(1)
  • 3
    JavaScript 权威指南第七版（GPT 重译）（二）(1)
  • 4
    JavaScript 权威指南第七版（GPT 重译）（四）(4)
  • 5
    JavaScript 权威指南第七版（GPT 重译）（七）(1)
  • 6
    JavaScript 权威指南第七版（GPT 重译）（六）(3)
  • 7
    JavaScript 权威指南第七版（GPT 重译）（三）(2)
  • 8
    报错/ ./node_modules/axios/lib/platform/index.js Module parse failed: Unexpected token (5:2)怎么解决？
  • 9
    设置WebStorm像VSCode一样每行代码结尾自动格式化加入“；”分号（JavaScript、TypeScript格式化）
  • 10
    前端最常见的JS面试题大全
  • 1
    JavaScript字符串检查：从基础到高级
    26
  • 2
    使用 JavaScript 获取 URL 参数的详细指南
    670
  • 3
    监控内网电脑软件设计与实现：基于Node.js的服务器端架构分析
    121
  • 4
    Java Script 中的垃圾回收机制有哪些缺点
    14
  • 5
    描述 JavaScript 中的垃圾回收机制。
    20
  • 6
    如何使用 JavaScript 操作 DOM？
    17
  • 7
    解释 JavaScript 中的`map()`、`filter()`和`reduce()`方法的用途。
    19
  • 8
    JavaScript 中的数组方法有哪些？
    10
  • 9
    JS设置日期为0时0分0秒
    30
  • 10
    JavaScript随手笔记 --- 对数据进行判断最大位数是否超过八位
    26

    • 相关课程

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

    • 相关电子书

    更多
  • JavaScript面向对象的程序设计
  • Delivering Javascript to World
  • 编程语言如何演化-以JS的private为例

    • 相关实验场景

    更多
  • 前端开发基础6：Node.js和LESS预编译工具
  • Html5和Webpack2：Webpack5打包JS和样式表
    • 下一篇
    2024年阿里云免费云服务器及学生云服务器申请教程参考