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指的是，调用函数的那个对象