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、效果:

Day3-JS-JavaScript 函数专题

<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()

效果:Day3-JS-JavaScript 函数专题

<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进行调用的

效果图:Day3-JS-JavaScript 函数专题

 

 

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

 

上一篇:mysql高级day3


下一篇:python学习笔记-day3