zoukankan      html  css  js  c++  java
  • 从零开始学 Web 之 JavaScript(三)函数

    大家好,这里是「 Daotin的梦呓 」从零开始学 Web 系列教程。此文首发于「 Daotin的梦呓 」公众号,欢迎大家订阅关注。在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识点,期间也会分享一些好玩的项目。现在就让我们一起进入 Web 前端学习的冒险之旅吧!

    一、函数

    1、函数的定义

    // 第一种
    function fn1(){
        console.log("我是第一种定义方法!");
    }
    
    // 第二种
    var fn2 = function (){
        console.log("我是第二种定义方法!");
    };  // 注意分号
    
    function (){
       console.log("我是第二种定义方法!");
    }();  // 第二种方式的调用方式之一:函数的自调用
    
    //第三种
    var fn3 = new Function("console.log('我是第三种定义方法!')");
    

    第一种:(函数的声明)第一种定义方法最强大,定义完毕后,在哪里使用都可以,无位置限制。
    第二种:(函数表达式:匿名函数) 后两种定义方法是有局限性的。(使用函数必须在定义函数之后)

    2、函数的调用

    函数名();
    

    3、函数名

    • 要遵循驼峰命名法。
    • 不能同名(函数重载),否则后面的函数会覆盖前面的函数。
    //打印函数名,就等于打印整个函数。
    console.log(fn);
    //打印执行函数,就等于打印函数的返回值。
    console.log(fn()); 
    

    4、形参和实参

    • 形参不需要写 var.
    • 形参的个数和实参的个数可以不一致 。

    5、返回值

    1. 如果函数没有显示的使用 return 语句 ,那么函数有默认的返回值:undefined
    2. 如果函数使用 return 语句,但是 return 后面没有任何值,那么函数的返回值也是:undefined.

    6、变量和作用域

    全局变量:在 script 使用 var 定义的变量(所有的 script 共享其全局性,js 里面没有块级作用域概念,只有全局作用域和局部作用域)。

    隐式全局变量:在 script 没有 var 的变量。

    function fn(){
      var a = b = c = 1;       // b和c就是隐式全局变量(等号)
      var a = 1; b = 2; c = 3;   // b和c就是隐式全局变量(分号)
      var a = 1 , b = 2 , c = 3;  // b和c就不是隐式全局变量(逗号)
    }
    

    (全局变量是不能被删除的,隐式全局变量是可以被删除的)

    var num1 = 10;
    num = 20;
    delete num1;
    delete num2;
    console.log(typeof num1); // number
    console.log(typeof num2); // undefined
    

    局部变量函数内部用 var 定义的变量和形参。

    6.1、变量声明提升(预解析)

    作用:查看语法错误。js的解析器在页面加载的时候,首先检查页面上的语法错误。把变量声明提升起来。(变量声明提升和函数整体提升)

    6.2、变量的提升

    只提升变量名,不提升变量值。

    consolas.log(aaa);// 打印的结果是 undefined ,因为只提升变量名,不提升变量值。
    var aaa = 111; 
    

    在函数范围内,照样适用。

    6.3、函数的提升

    function 直接定义的方法:整体提升(上面说的第一种函数定义的方法).

    fn();
    
    var aaa = 111;
    function fn(){
        //变量声明提升在函数内部照样实用。
        //函数的就近原则(局部变量作用域),打印的aaa不是111,而是 undefined。
        console.log(aaa); // undefined
        var aaa = 222;
    }
    

    预解析会分块:

    多对的 script 标签中函数重名的话,预解析不会冲突。也就是预解析的作用域是每一个的 script 标签。

    var先提升,function再提升:

    示例:

    console.log(a); // 输出a函数体
    function a() {
        console.log("aaaaa");
    }
    var a = 1;
    console.log(a); // 输出1
    

    打印第一个结果的时候,var会提升,之后 function 再提升,但是函数a和变量a重名,function的a在后面覆盖掉变量a,所以第一个输出 a 函数体.

    第二个前面var a = 1;提升之后,这个位置就相当于只有 a = 1; 赋值,所以第二个打印1.

    6.4、匿名函数

    作用大致如下:

    //1.直接调用
    (function (){
        console.log(1);
    })();
    
    //2.绑定事件
    document.onclick = function () {
        alert(1);
    }
    
    //3.定时器
    setInterval(function () {
        console.log(444);
    },1000);
    

  • 相关阅读:
    图解机器学习读书笔记-CH3
    塑造职场影响力的五大法宝
    怎样培养独挡一面的能力
    数据结构
    [分享]恼人的设计模式
    Git使用总结
    设计师整理的系统开发流程-简洁又有重点
    JavaScript中的String对象
    python高效解析日志入库
    如何让js不产生冲突,避免全局变量的泛滥,合理运用命名空间
  • 原文地址:https://www.cnblogs.com/lvonve/p/9152885.html
Copyright © 2011-2022 走看看