JS笔记3.1--函数和对象

1.函数声明

<script type="text/javascript">
	/*
	* 函数function
	* 函数声明的语法：
	* 1.function 函数名（[形参1，形参2，形参3...])
	* {
		语句...
	  }
	  2. var 函数名= function([形参1，形参2，形参3...])
	  {
		  语句...
	  }
	* 函数中的代码会在函数调用时执行 
	* 函数调用的语法： 函数名()
	*/
	function fun1()
	{
		console.log("这是我的第一个函数");
	}
	fun1(); //执行函数体中的代码块,输出结果
	
	var fun2 = function()
	{
		console.log("这是我的第二个函数");
	}
	fun2();
</script>

2. 函数中的参数

<script type="text/javascript">
	/*
	* 在定义函数时，在()中可定义多个形参，形参之间用逗号(,)隔开
	* 在调用函数时，在()中指定实参，但是解析器不会检查实参的类型，也不会检查实参的数量
	* 多余的实参不会被赋值
	*/
	function sum(a,b)
	{
		console.log(a+b);
	}
	sum(1,11); //输出是 12
	sum("hello","world");//解析器不会检查实参类型,输出是字符串
	sum(1,2,3,4);//解析器不会检查实参的个数,多余的实参不会被调用,输出是3
	sum(1);//如果实参的数量少于形参,则没有对应实参的形参是undefined,输出是NaN
</script>

3.函数的返回值

<script type="text/javascript">
	/*
	* 返回值return
	* return的值作为函数的执行结果返回，可以定义一个变量来接收该结果
	* 在函数return以后的语句都不会执行
	* 如果return后不跟任何值，相当于返回undefined
	* 如果函数不写return语句，也会返回undefined
	*/
	function sum(a,b,c)
	{
		var d = a + b + c;
		return d;
	}
	//调用函数
	//变量result的值就是函数的执行结果,函数返回什么,result的结果就是什么
	var result = sum(1,2,3);
	console.log(result); //输出是 6
</script>

4. 实参的类型任意

<script type="text/javascript">
	/*
	* 实参的类型任意，也可以是一个对象，也可以是一个函数
	* 当函数的参数过多时，可以将参数封装到一个对象中，然后通过对象传递
	*/
	function message(o)
	{
		console.log("name:"+o.name+","+"age:"+o.age+","+"gender:"+o.gender);
	}
	var obj = {
		name : "孙悟空",
		age : 400,
		gender : "猴子"
	};
	message(obj); //name:孙悟空,age:400,gender:猴子
	
	//将函数作为参数传递
	function fun(mess)
	{
		mess(obj);
	}
	fun(message); //name:孙悟空,age:400,gender:猴子
</script>

注：

函数名（） vs 函数名（不加括号）的区别：

函数名（）：调用函数，使用的是函数的返回值

函数名：直接使用函数对象 

5.在函数内部再声明一个函数

        function test() {
            let say = function () {
                console.log("hello world");
            }
            return say;
        }
        let fn = test(); // let fn = say;
        fn();// hello world

	function fun1()
	{
		function fun2()
		{
			alert("我是fun2");
		}
		return fun2;
	}
	var a = fun1();
	console.log(a);
	//输出是:
	function fun2()
		{
			alert("我是fun2");
		}

<script type="text/javascript">	
	function fun3()
	{
		function fun4()
		{
			alert("我是fun4");
		}
		return fun4();
	}
	var b = fun3();
	console.log(b);//输出是 undefined
</script>

6. arguments

伪数组：保存所有传递给函数的实参。

arguments[i]：传递给函数的第i个实参

arguments.length：实参的个数

<script type="text/javascript">
	/*
	* arguments:
	*  函数调用时，会传递两个隐含参数：1.函数的上下文对象this; 2. 封装实参的对象arguments
	* arguments是一个实参类对象，可以通过索引来操作数据，也可以获取长度
	* 在调用函数时，传递的实参都会在arguments中保存
	* arguments.length 表示获取的实参的长度（有几个实参）
	* 即使不定义形参，也可以通过arguments来使用实参
	* arguments.callee 指向当前函数
	* 
	*/
        function fun()
	{
		console.log(arguments.length);
		console.log(arguments[0]);//arguments[index]表示传递的第index个实参的值
		//arguments[0] = 1
		console.log(arguments.callee == fun); // true
	}
        fun(1,2,3,4,5);//传递5个实参,arguments.length的结果是5
</script>

        function getArgu(){
            for(let i = 0; i < arguments.length ; i++){
                console.log(arguments[i])
            }
        }
        getArgu(1,2,3,4)

输出结果：

7.函数中的扩展运算符

在函数的形参列表的最后，使用扩展运算符，能将函数的实参打包在一个数组中

    <script>
        function getArgu(...values){
            for(let i = 0; i < arguments.length ; i++){
                console.log(arguments[i])
            }
            console.log(values)
        }
        getArgu(1,2,3,4)
    </script>
    === 等价于 ===
        <script>
        function getArgu(...values){
            for(let i = 0; i < values.length ; i++){
                console.log(values[i])
            }
            console.log(values)
        }
        getArgu(1,2,3,4)
    </script>

此时values中保存的是函数的实参数组：

8.函数的形参默认值

ES6之前，给函数的参数指定默认值的形式：逻辑运算符
格式：条件A || 条件B
如果条件A成立, 那么就返回条件A。
如果条件A不成立, 无论条件B是否成立, 都会返回条件B

    <script>
        function func(a,b) {
            a = a || 'aaa';
            b = b || 'bbb';
            console.log(a,b)
        }
        func();
        //没有传递实参，此时形参a和b的值是undifined，转换为布尔值是false，条件A不成立。调用条件B，输出结果是aaa和bbb
    </script>

ES6之后，可以通过 形参名=默认形参值 的形式指定：

    <script>
        function func(a='aaa',b='bbb') {
             console.log(a,b)
        }
        func();// aaa bbb
    </script>

默认的形参值还可以通过其他函数获取：

    <script>
        function func(a='aaa',b=getDefault()) {
             console.log(a,b)
        }
        function getDefault(){
            return 'bbb'
        }
        func();// aaa bbb
    </script>

9.匿名函数

匿名函数不能只定义不使用

9.1匿名函数作为函数的参数使用

    <script>
        function  test(fn) {
            fn();
        }
        test(function () {
            console.log('ccc')
        })
    </script>

9.2匿名函数作为函数的返回值使用

    <script>
        function  test() {
            return function () {
                console.log('bbb')
            }
        }
        let func = test();
        func();// bbb
    </script>

9.3匿名函数作为立即执行函数使用

将匿名函数放在一对（）中，再调用：

       (
            function () {
                console.log('aaaaaa')
            }
        )();

10.箭头函数

ES6定义函数的形式：

        let 函数名称 = (形参列表) =>{
            需要封装的代码;
        }
        如果只有一个形参, 那么()可以省略
        如果{}中只有一句代码, 那么{}也可以省略
            
        function say(name) {
            console.log("hello  " + name);
        }
        === 等价于 ===
        let say = name => console.log(name);
    </script>