zoukankan      html  css  js  c++  java
  • Day3-JS-JavaScript 函数专题

    小知识:

        1、通常使用 4 个空格符号来缩进代码块。

        2、通常运算符 ( = + - * / ) 前后需要添加空格。

        3、函数也是有函数提升的(Hoisting),和变量提升一样。

    一、函数表达式

          ①函数表达式可以存储在变量中

    var x=function(a,b){return a*b};
            document.getElementById("demo").innerHTML=x;

          ===这样的x变量,可以直接传入参数的

    var x = function (a, b) {return a * b};
    var z = x(4, 3);

    以上直接把函数表达式给x这个变量的,实际上是一个 匿名函数 (函数没有名称)。

    函数存储在变量中,不需要函数名称,通常通过变量名来调用

          ②用Function()来构造函数

    <script>
    var myFunction = new Function("a", "b", "return a * b");
    document.getElementById("demo").innerHTML = myFunction(4, 3);
    </script>

    ======在 JavaScript 中,很多时候,你需要避免使用 new 关键字

          ③自调用函数(就是不用另外的调用,声明函数和执行函数放一起了)

            ====如果表达式后面紧跟 () ,则会自动调用

    1、效果:

    <p>函数可以自动调用:</p>
    <p id="demo"></p>
    <script>
    (function () {
        document.getElementById("demo").innerHTML = "Hello! 我是自己调用的";
    })();
    </script>

    ====以上函数实际上是一个 匿名自我调用的函数 (没有函数名)

    二、函数是一个对象

    ====JavaScript 中使用 typeof 操作符判断函数类型将返回 "function" ;;JavaScript 函数有 属性 和 方法

      ①arguments.length

       (其中arguments的意思就是参数的意思,打印出来的就是参数的长度,也就是参数的个数)

      <p>传入给函数的参数有多少个:</p>
        <p id="demo"></p>
        <script>
            function myFunction(a,b){
                return arguments.length;
            }
            document.getElementById("demo").innerHTML=myFunction(1);
        </script>

      ②toString()

    效果:

    <p> toString() 将函数作为一个字符串返回:</p>
    <p id="demo"></p>
    <script>
    function myFunction(a, b) {
        return a * b;
    }
    document.getElementById("demo").innerHTML = myFunction.toString();
    </script>

    三、箭头函数(箭头函数不需要使用 function、return 关键字及大括号 {   )

    ===ES6 新增了箭头函数

    ①不同的形式

    1、形式一:(参数1, 参数2, …, 参数N) => { 函数声明 }

    2、形式二:(参数1, 参数2, …, 参数N) => 表达式(单一)// 相当于:(参数1, 参数2, …, 参数N) =>{ return 表达式; }


    3、如果只有一个参数的话,圆括号可以不写:单一参数 => {函数声明}
    4、如果没有参数的函数就写出:() => {函数声明}

    ②实例
    <script>
    const x = (x, y) => { return x * y };
    document.getElementById("demo").innerHTML = x(5, 5);
    </script>
    但是如果函数部分只是一个语句,则可以省略 return 关键字和大括号 {},这样做是一个比较好的习惯,才有了下面这个
      <p id="demo"></p>
        <script>
            const x=(x,y)=>x*y;
            document.getElementById("demo").innerHTML = x(5, 5);
        </script>
    注意:箭头函数是不能提升的,所以需要在使用之前定义

    小扩展:
    1、如果是用箭头函数加自调用的话:
    (()=>{})()

    2、对于函数自调用,必须通过把函数表达式外面添加括号(来说明它是一个函数表达式)再调用,否则会报错

    3、自调用也可以通过如下的形式:(即使是没给自调用函数加上大括号,直接给a赋值过去了,但是还是可以直接对a进行调用的

    效果图:

    <script>
            var a = function () {
        document.write("Hello! 我是自己调用的" + "<br />");
        return '返回的东西';
    }();
    // 因为函数自调了,变量a不再指向一个函数,而是“返回的东西”这个字符串
    
    

     

    document.write(a); </script>
    //输出字符串

    四、函数参数

    ①ES6函数可以自带参数

    知识点:如果没传如这个参数,就用它自带的参数值,如果传了,自带的会被覆盖掉

    <script>
        function myFunction(x,y=10){
            return x+y;
        }
        // 输出 2
    document.getElementById("demo1").innerHTML = myFunction(0, 2) ;
    // 输出 15, y 参数的默认值
    document.getElementById("demo2").innerHTML = myFunction(5);
    </script>

    五、arguments对象

    这个argument就是传入这个函数的参数 数组、

    注意了(并不是只有这个函数是由实参的才由argument对象,只要传入了参数就有的,即使函数是一个不用传入参数的函数)

    ①实例1:(打印出参数数组中最大的那个)

    <script>
        x=findMax(1,4,2,1,5,2);
        function findMax(){
            var Max=arguments[0];
            var Length=arguments.length;
            if(Length<=1)
            return Max;
            for(var i=0;i<Length;i++){
                if(Max<arguments[i])
                Max=arguments[i];
            }
            return Max;
        }
        document.getElementById("demo").innerHTML=x;
    </script>

    六、函数调用(JavaScript 函数有 4 种调用方式。每种方式的不同在于 this 的初始化)

    ①myFunction() 和 window.myFunction() 是一样的:(由于都是匿名函数,就是全局变量了)

    function myFunction(a, b) {
        return a * b;
    }
    myFunction(10, 2);           // myFunction(10, 2) 返回 20
    
    
    function myFunction(a, b) {
        return a * b;
    }
    window.myFunction(10, 2);    // window.myFunction(10, 2) 返回 20
    
    尝试一下 »

    ②作为方法调用

    var myObject = {
        firstName:"John",
        lastName: "Doe",
        fullName: function () {
            return this.firstName + " " + this.lastName;
        }
    }
    myObject.fullName();  

    使用构造函数调用函数(构造函数的调用会创建一个新的对象。新对象会继承构造函数的属性和方法)

    // 构造函数:
    function myFunction(arg1, arg2) {
        this.firstName = arg1;
        this.lastName  = arg2;
    }
     
    // This    creates a new object
    var x = new myFunction("John","Doe");
    x.firstName;  

    作为函数方法调用函数

    在 JavaScript 中, 函数是对象。JavaScript 函数有它的属性和方法。

    call() 和 apply() 是预定义的函数方法。 两个方法可用于调用函数,两个方法的第一个参数必须是对象本身

    <script>
    var myObject;
    function myFunction(a, b) {
        return a * b;
    }
    myObject = myFunction.call(myObject, 10, 2);    // 返回 20
    document.getElementById("demo").innerHTML = myObject; 
    </script>

    或者用apply,直接把参数变成数组来传入

    function myFunction(a, b) {
        return a * b;
    }
    myArray = [10, 2];
    myObject = myFunction.apply(myObject, myArray);  // 返回 20

    小扩展:call和apply:

    在 JavaScript 严格模式(strict mode)下, 在调用函数时第一个参数会成为 this 的值, 即使该参数不是一个对象。

    在 JavaScript 非严格模式(non-strict mode)下, 如果第一个参数的值是 null 或 undefined, 它将使用全局对象替代

    注意:this指的是,调用函数的那个对象

  • 相关阅读:
    1052 Linked List Sorting (25 分)
    1051 Pop Sequence (25 分)
    1050 String Subtraction (20 分)
    1049 Counting Ones (30 分)
    1048 Find Coins (25 分)
    1047 Student List for Course (25 分)
    1046 Shortest Distance (20 分)
    1045 Favorite Color Stripe (30 分)
    1044 Shopping in Mars (25 分)
    1055 The World's Richest (25 分)
  • 原文地址:https://www.cnblogs.com/SCAU-gogocj/p/13112817.html
Copyright © 2011-2022 走看看