JavaScript（函数，作用域和闭包）(上)-阿里云开发者社区

JavaScript（函数，作用域和闭包）(上)

2023-10-11 62

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

本文涉及的产品

全局流量管理 GTM，标准版 1个月

公共DNS（含HTTPDNS解析），每月1000万次HTTP解析

云解析 DNS，旗舰版 1个月

简介： JavaScript（函数，作用域和闭包）

一，什么是函数

类似于Java中的方法，是完成特定任务的代码语句块

特点

使用更简单

不用定义属于某个类，直接调用执行

分类

系统函数

自定义函数

1.1，常用系统函数

1.将字符串转换为整型数字

parseInt("字符串");
<body>
    <input type="button" value="求和" onclick="qiuhe()">
</body>
<script>
  var num1 = parseInt("56.64");      //返回值为56
  var num2 = parseInt("123abc");   //返回值为123
  var num3 = parseInt("hello999"); //返回值为NaN
  console.log(num1,num2,num3);
   function qiuhe(){
       var n1 = prompt("请输入第一个数")
        var n2 = prompt("请输入第二个数")
        var num1=parseInt(n1)
        var num2=parseInt(n2)
        if(isNaN(num1)||isNaN(num2)){
            alert("有一个不是数字");
        }else{
            document.write(num1+num2)
        }
    }
</script>

js示例1

从下标为0起，依次判断每个字符是否可以转换为一个有效数字

如果不是有效数字，则返回NaN，不再继续执行其他操作

如果是有效数字，则该函数将查看下标为1的字符，进行同样的测试，直到发现非有效数字的字符或全部检测完为止

2.将字符串转换为浮点型数字

parseFloat("字符串");
var num1 = parseFloat("3.1415926");  //返回值为3.1415926
var num2 = parseFloat("123abc");       //返回值为123
var num3 = parseFloat("hello999");     //返回值为NaN
var num4 = parseFloat("52.18.97");     //返回值为52.18 如果有两个小数点则第二个小数点无效
console.log(num1,num2,num3);

3.检查其参数是否是非数字

isNaN(x);
var num1=isNaN("20.5");       //返回值为false
var num2=isNaN("123abc");  //返回值为true
var num3=isNaN(48.98);       //返回值为false
console.log(num1,num2,num3);

通常，使用isNaN()函数检测parseInt()和parseFloat()的运算结果，判断它们表示的是否是合格的数字；也可以使用isNaN()函数检测

操作数是否有错误，例如：用0作为除数的情况

1.2，函数声明

由关键字function、函数名、一组参数及置于括号中的待执行的JavaScript语句组成

语法

    // JavaScript是弱数据类型，对于函数参数没有类型检查和类型限定
  function 函数名([参数1[, 参数2[, 参数3,…] ] ]) {
      //JavaScript语句;
      [return 返回值] // return可有可无
  }

调用函数

// 一般和表单元素的事件一起使用
事件名＝“函数名([参数值1[, 参数值2[, 参数值3,…] ])";

函数声明——调用无参函数

// 定义并调用无参函数，输出5次“你好”
<body>
  //单击此按钮时，调用函数func1( )，执行函数体中的代码
    <input type="button" value="点我执行" onclick="func1()">
</body>
<script>
    function func1(){
        for(var i=0;i<5;i++){
            document.write("<h1>你好"+i+"</h1>")
        }
    }
</script>

js示例2

函数声明——调用有参函数

  // 键盘接受“你好”输出行数，并按指定数字输出到网页
 <body>
    <input type="button" value="点我执行" onclick="func1(prompt('请输入显示你好的次数：'))">
</body>
<script>
    function func1(count){
        for(var i=0;i<5;i++){
            document.write("<h1>你好"+i+"</h1>")
        }
    }
</script>

js示例3

1.3，函数表达式

将函数赋给变量

定义函数

var 变量 = function([参数值1[, 参数值2[, 参数值3,…] ]) {
    //JavaScript语句;
};

调用函数

变量([参数值1[, 参数值2[, 参数值3,…] ]);

函数表达式

  // 使用函数声明的方式定义两个函数名都为f1()的函数
      f1();
    function f1(){
        var num3 = 100;
        console.log(num3)
    }
    function f1(){
        console.log("今天天气很好！")
    }
    f1();
    function f1(){
        console.log("今天天气好晴天，处处好风光");
    }
    f1();

  // 使用函数表达式方式定义两个函数名都为f2()的函数
      var f2 = function(){
        console.log("哇~");
    }
    f2();
    var f2 = function(){
        console.log("娃哈哈~");
    }
    f2();

使用函数声明方式定义两个同名的函数时，后面的函数将会覆盖前面的函数；

使用函数表达式方式定义同名的函数时，会从上到下，逐行执行代码，并输出结果

二，预解析

顾名思义就是提前解析代码

主要完成两项工作

其一，变量的声明会提前

其二，函数的声明也会被提前

// 预解析可以把变量的声明提前
console.log(num); //undefined
var num=10;
// 预解析可以把函数的声明提前
f1();
function f1() {
    var num=100;
    console.log(num); //100
}

2.1，函数自调用

自定义函数分类

命名函数

匿名函数

语法

(function() {
  //函数体     
})();

匿名函数的特点

函数没有名字，在声明的同时便直接调用

好处

同名函数之间不会有冲突

    (    function(){
        console.log("立即执行函数");
    })();

2.2，回调函数

注意

如果没有指定回调函数的名称，则称之为匿名回调函数

    function f1(fn){
        console.log("f1");
        fn()
    };
    function f2(){
        console.log("f2");
        return 1
    };
    f1(f2); // 执行命名回调函数，注意f2后面不能加()

    function f1(fn){
        console.log("f1");
        fn()
    };
    f1(function(){ // 匿名函数
        console.log("我没有名字!");
    })

JavaScript（函数，作用域和闭包）(上)

一，什么是函数

1.1，常用系统函数

1.2，函数声明

1.3，函数表达式

二，预解析

2.1，函数自调用

2.2，回调函数

热门文章

最新文章

相关课程

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

JavaScript（函数，作用域和闭包）(上)

一，什么是函数

1.1，常用系统函数

1.2，函数声明

1.3，函数表达式

二，预解析

2.1，函数自调用

2.2，回调函数

热门文章

最新文章

相关课程

相关电子书

相关实验场景