JavaScript基础笔记05 函数及对象

1.Arguments

• 在不确定有多少个参数传递的时候，用arguments来获取
• 在任意一个函数内部，都有一个看不见的 arguments，arguments展示形式是一个伪数组
• arguments的内部的元素就是函数的实参列表
• 伪数组并不是真正意义上的数组，它具有数组的length属性，能够按照索引的方式进行存储，有索引号，它没有真正数组的一些方法
• 案例：

		//3、利用函数对数组进行排序
        function sort(arr){
            for(var i = 0; i < arr.length - 1; i++){
                for(var j = 0; j < arr.length - 1 - i; j++){
                    if(arr[j] > arr[j + 1]){
                        var temp = arr[j];
                        arr[j] = arr[j + 1];
                        arr[j + 1] = temp;
                    }
                }
            }
            console.log(arr);
        }
        sort(1,3,4,5,2);

        //4、输入一个年份，判断是否是闰年（闰年：能被4整除并且不能被100整除，或者能被400整除）
        function getyear(year){
            //如果是闰年，返回true，否则返回false
            var flag = false;
            if(year % 4 == 0 && year % 100 != 0 || year % 400 == 0){
                flag = true;
            }
            return flag;
        }
        console.log(getyear(2020));
        console.log(getyear(2021));

2.函数之间的相互调用

• 代码解释

		//函数是可以相互调用的
        function fn1() {
            console.log(11);
            fn2(); //在 fn1 函数里面调用了 fn2 函数
        }
        fn1(); //先输出11，再输出22
        function fn2() {
            console.log(22);
        }

        function fn3() {
            console.log(111);//先输出111
            fn4();//调用 fn4 函数，输出222，再输出字符串fn2
            console.log('fn1');//最后输出字符串fn1
        }

        function fn4() {
            console.log(222);
            console.log('fn2');
        }
        fn3();

• 案例：

		//案例，用户输入年份，输出当前年份2月份的天数
        function getmonth(){
            var year = prompt('请输入一个年份：');
            if(getyear(year)){//调用判断闰年的函数，是闰年则返回true
                alert('当前年份是闰年，2月份有29天');
            }else{
                alert('当前年份是平年，2月份有28天');
            }
        }
        function getyear(year){//判断是否为闰年的函数
            var flag = false;
            if(year % 4 == 0 && year % 100 != 0 || year % 400 == 0){
                flag = true;
            }
            return flag;
        }

3.函数的两种声明方式

1. 利用函数关键字自定义函数（命名函数）

		 function fn() {
		//函数体代码
        }
        fn();

2. 函数表达式（匿名函数）

		//var 变量名 = function(){}
        var fun = function(aru){
            console.log('我是函数表达式');
            console.log(aru);
        }
        fun('啦啦啦');

3. 注意：
   1. fun是变量名，不是函数名
   2. 函数表达式声明方式跟声明变量差不多
   3. 函数表达式也可以进行传递参数

4.作用域

• JavaScript作用域：就是代码名字（变量）在某个范围内起作用和效果，目的是为了提高程序的可靠性，更重要的是减少命名冲突

4.1js的作用域

• js的作用域（es6前）：全局作用域 局部作用域 在es5之前，只有函数能限制作用域

1. 全局作用域：整个script标签，或者是一个单独的js文件
2. 局部作用域（函数作用域）：在函数内部就是局部作用域，这个代码的名字只在函数内部其作用和效果

4.2 变量作用域

• 变量作用域：根据作用域的不同，分为全局变量和局部变量

1. 全局变量：变量在全局作用下声明的，在全局下都可以使用
   • 全局变量的生命周期：浏览器运行了代码，变量就初始化了（出生）；浏览器的页面关闭，变量就结束了
   • 注意，如果在函数内部，没有声明直接赋值的变量也是全局变量（不建议使用，不准确）

		var num = 10;//num就是一个全局变量
        console.log(num);
        function fn(){
            console.log(num);
        }
        fn();//输出10

2. 局部变量（函数变量），变量在函数内部声明的
   • 局部变量的生命周期：函数调用了，局部变量就初始化了；当函数调用完毕后，局部变量就销毁了
   • 注意，函数的形参也可以看做是局部变量

		function fun(){
            var num1 = 10;
            num2 = 20;
        }
        fun();//输出10
        // console.log(num1);报错
        console.log(num2);//输出20，此时num2是全局变量

3. 从执行效率来看全局变量和局部变量
   • 全局变量只有浏览器关闭的时候才会销毁，比较占内存资源
   • 局部变量在函数执行完毕后就会销毁，比较节约内存资源

4.3 作用域链

• 内部函数访问外部函数的变量，采取的是链式查找的方式来决定取哪个值 就近原则
• 案例：

		//案例1,结果是几
        function f1() {
            var num = 123;
            function f2() {
                console.log(num);//站在目标出发，一层一层的往外找
            }
            f2();//执行num，离f2最近的是f1内的num的值
        }
        var num = 456;
        f1();//输出123

        //2、案例：结果是几
        var a = 1;
        function fn1() {
            var a = 2;
            var b = '22';
            fn2();
            function fn2() {
                var a = 3;
                fn3();
                function fn3() {
                    var a = 4;
                    console.log(a); //最近的是fn3中a的值
                    console.log(b); //最近的是fn1中b的值
                    }
            }
        }
        fn1();//输出a的值为数值4，输出b的值为字符串22

5.预解析

• js引擎运行js分为两步：预解析 代码执行
  1. 预解析，js引擎会把js里面所有的var 还有function 提升到当前作用域的最前面
  2. 代码执行，按照代码书写的顺序从上往下执行
• 预解析分为 ：变量预解析（变量提升）和函数预解析（函数提升）
  1. 变量提升，就是把所有的变量声明提升到当前作用域的最前面，不提升赋值操作
  2. 函数提升，就是把所有的函数声明提升到当前作用域的最前面，不调用函数
• 相关案例：

		// 案例2,结果是几
        /* var num = 10;
        function fn() {
            console.log(num);
            var num = 20;
            console.log(num);
        }
        fn(); */
        //执行
        var num;
        function fn() {
            var num;
            console.log(num);//就近原则，执行的是var num，未赋值
            num = 20;
            console.log(num);//就近原则，执行的是num = 20
        }
        num = 10;
        fn();//先输出第一个num，未赋值undefined，再输出第二个num，值为20

		// 案例3,结果是几
        /* var a = 18;
        f1();
        function f1() {
            var b = 9;
            console.log(a);
            console.log(b);
            var a = '123';
        } */
        //执行
        var a;
        function f1() {
            var b;
            var a;
            b = 8;
            console.log(a);//就近原则，执行的是var a，未赋值
            console.log(b);//就近原则，执行的是var b
            a = '123';
        }
        a = 18;
        f1();//先输出a，未赋值undefined，再输出b，值为8

6.对象

• 现实生活中，万物皆对象 在js中，一切皆对象
• 对象：无序的集合，由“属性”与“方法”构成

6.1创建及调用对象

1. 创建对象：利用对象字面量创建一个对象

		var obj = {
            usename: '小丁',
            age: '27',
            sex:'男',
            eat:function(){
                console.log('小丁超能吃');
            }
        }
        //（1）里面的属性或者方法采用的是键值对的形式   键（属性名）：值（属性值）
        //（2）键和值之间用冒号分开，方法的冒号后面跟的是一个匿名函数
        //（3）多个属性或方法用逗号隔开

2. 调用对象

		//（1）调用对象的属性，采取  对象名.属性名  .我们理解为‘的’
        console.log(obj.usename);
        //（2）调用属性还有一种方法  对象名['属性名']  关联数组的语法
        console.log(obj['age']);
        // var abc = 'age';
        // console.log(obj[abc]);
        //（3）调用对象的方法  对象名.方法名（）   一定要加小括号
        obj.eat();

3. 利用new Object创建对象

		var person = new Object();
        person.name = '鸣人';
        person.age = '19岁';
        person.gender = '男';
        person.skill = function(){
            console.log('我会影分身术');
        }
        console.log(person.name);
        console.log(person['age']);
        person.skill();
        //调用方法与1一致

4. 利用构造函数创建对象

		//function 构造函数名（）{
            //this.属性 = 值;
            //this.方法 = function(){}
        // }
        //new 构造函数名（）;

• 注意：
  1. 构造函数名字首字母要大写
  2. 构造函数不需要return就可以返回结果，但是本质上返回的是return this
  3. 构造函数调用时要用关键词 new
• 案例：

		var lianpo = new Hero('廉颇','力量型','500血量');
        console.log(lianpo.name);
        console.log(lianpo.type);
        console.log(lianpo.blood);
        lianpo.skill('近战');
        var houyi = new Hero('后裔','射手型','100血量');
        console.log(houyi);
        // console.log(houyi.name);
        // console.log(houyi.type);
        // console.log(houyi.blood);
        houyi.skill('远程');

6.2构造函数的返回值

• 构造函数本身的返回值是看不见的this
  1. 如果有return，并且返回值是基本数据类型时，忽略这个基本数据类型，还是返回的是this
  2. 如果有return，并且返回值是复杂数据类型时，忽略this，返回的是该复杂数据类型的值

		function Animal(name){
            this.name = name;
            // return this; 输出tom
            // return true; 输出tom
            return {}//输出该值
        }
        var a1 = new Animal('tom')
        console.log(a1);

6.3遍历对象

• for…in 语句用于对数组或者对象的属性进行循环操作

		/* for (k/key in 对象名字) {
            在此执行代码
        } */
        var obj = {
            name: 'jack',
            age: 18,
            gender: 'male',
            fn: function () {}
        }
        for (var k in obj) {
            console.log(k);//这里的k是属性名
            console.log(obj[k]);//这里的obj[k]是属性值
        }