JavaScript高级-1

1.JavaScript 函数

函数就是完成某一具体功能的代码块

使用关键字function定义函数

函数声明后不会立马执行，会在我们需要时调用，

因为函数声明后不会立马执行，所以不以分号结束

       语法格式：

        function test1(参数列表) {

            要执行的代码

        }

 使用关键字function定义函数

        function test2() {
            alert("关键字function定义");
        }
        alert(test2());

1.1函数表达式

JavaScript 函数可以通过一个表达式定义。

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

函数存储在变量名中， 不需要函数名称、 通常用变量名称调取

        var test3 =
            //匿名函数
            function() {
                return "beijing";
            };
        alert(test3); //输出函数本身
        alert(test3()); //输出返回值北京

1.2Function() 构造函数

创建函数的方式1：

使用关键字 function 定义函数

        // 有参数
        function test4(name, age) {
            return name + "," + age;
        }
        alert(test4); //输出函数本身
        alert(test4("wangxiao", 20)); //输出返回值

创建函数的方式2:

通过内置的 JavaScript 函数构造器（Function()）定义

        var test5 = new Function("return'hello';");
        alert(test5());
        var test6 = new Function("name", "age", "return name+','+age;");
        alert(test6("wangxiao", 20));

实际上，不必使用构造函数

1.3函数提升（Hoisting）

函数提升（Hoisting）--- 先用后定义声明

提升（Hoisting）是 JavaScript 默认将当前作用域提升到前面去的的行为。

提升（Hoisting）应用在变量的声明与函数的声明。

使用表达式定义函数时无法提升

因此，函数可以在声明之前调用：

        //    后定义
        var res1 = test7("dada", 23);
        alert(res1);
        // 先用
        function test7(name, age) {
            return name + "," + age;
        }

1.4自调用函数

自调用表达式会自动调用。

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

不能自调用声明的函数。

通过添加括号，来说明它是一个函数表达式

        // 添加括号，来说明它是一个函数表达式
        (function fun1() {
            alert("自调用函数")
        })(); //表达式后面紧跟 () ，则会自动调用

1.5函数可作为一个值使用

        // 函数可作为一个值使用
        function fun2(x, y) {
            return x * y;
        }
        var z = fun2(3, 7);
        alert(z);

1.6函数是对象

JavaScript 中的 typeof 运算符会为函数返回 "function"。

但是最好是把 JavaScript 函数描述为对象。

函数都有属性和方法。

arguments.length 属性返回函数被调用时收到的参数数目：

toString() 方法将函数作为一个字符串返回

        function myFun(a, b, c) {
            return arguments.length; //属性返回函数调用过程接收到的参数个数
        }
        alert(myFun(1, 20, 10));//参数为3
        alert(myFun.toString()); //方法将函数作为一个字符串返回

2.JavaScript 函数参数

显式参数（parameter）指的是在函数定义中列出的名称。

隐式参数（argument）指的是传递到函数或由函数接收到的真实值。

函数显式参数在函数定义时列出。

函数隐式参数在函数调用时传递给函数真正的值

参数规则

JavaScript 函数定义显式参数时没有指定数据类型。

JavaScript 函数对隐式参数没有进行类型检测。

JavaScript 函数对隐式参数的个数没有进行检测。

显式参数（parameter）

指的是在函数定义中列出的名称。

        function test1(name, age) {
            return name + "," + age;
        }
        // name,age--显式参数

 隐式参数（argument）

arguments 是JavaScript 中内置对象--是一个数组--保存参数值

        function test2() {
            return arguments[0] + "," + arguments[1]; //数组
        }
        alert(test2("wangxiao", 20));

通过值传递参数

在函数中调用的参数是函数的隐式参数。

JavaScript 隐式参数通过值来传递：函数仅仅只是获取值。

如果函数修改参数的值，不会修改显式参数的初始值（在函数外定义）。

隐式参数的改变在函数外是不可见的。

通过对象传递参数

在JavaScript中，可以引用对象的值。

因此我们在函数内部修改对象的属性就会修改其初始的值。

修改对象属性可作用于函数外部（全局变量）。

修改对象属性在函数外是可见的。

        function test3(name, age) {
            return name + "," + age;
        }
        //"lisi",24---参数的具体值【值传递】
        //var  res1=test3("lisi",24);
        var canshu1 = "王五"; //类型string
        var canshu2 = 25; //类型number
        alert(canshu1.charAt(0)); //canshu1变量就是对象
        //canshu1,canshu2---参数是变量--对象【对象传递】
        var res1 = test3(canshu1, canshu2);
        //alert(res1);

3.JavaScript 函数调用

JavaScript 函数有 4 种调用方式

3.1作为一个函数调用

        function test1(x, y) {
            return x * y;
        }
        var test2 = test1(10, 100);
        alert(test2);
        var test2 = window.test1(10, 100);
        alert(test2);

以上函数不属于任何对象。但是在 JavaScript 中它始终是默认的全局对象。

在 HTML 中默认的全局对象是 HTML 页面本身，所以函数是属于 HTML 页面。

在浏览器中的页面对象是浏览器窗口(window 对象)。以上函数会自动变为 window 对象的函数

 this 关键词

在 JavaScript 中，被称为 this 的事物，指的是“拥有”当前代码的对象。

this 的值，在函数中使用时，是“拥有”该函数的对象。

请注意 this 并不是变量。它属于关键词。您无法改变 this 的值

3.2函数作为方法调用

在 JavaScript 中可以将函数定义为对象的方法

        var obj1 = { //在对象中{}
            // 属性
            shuxing1: "wangxiao",
            shuxing2: "30",
            //方法
            fangfa1: function() {
                return this.shuxing1 + "," + this.shuxing2; //this表示在当前对象
            }
        }
        var test3 = obj1.fangfa1();
        alert(test3);

函数作为对象方法调用，会使得 this 的值成为对象本身

3.3使用构造函数调用函数

如果函数调用前使用了 new 关键字, 则是调用了构造函数。

这看起来就像创建了新的函数，但实际上 JavaScript 函数是重新创建的对象.

构造器调用会创建新对象。新对象会从其构造器继承属性和方法

        function fun1(x, y) {
            this.numx = x;
            this.numy = y;
        }
        // 新的对象会从函数中继承属性和方法
        var res2 = new fun1(10, 100); //创建一个构造函数-新对象(new)
        alert(res2); //object对象
        alert(res2.numx); //10
        alert(res2.numy); //100

3.4通过javascript的内置函数调用函数

call() 和 apply() 是预定义的函数方法

call()

        function test1(x, y) {
            return x * y;
        }
        var mytest1
        mytest1 = test1.call(mytest1, 10, 100);
        alert(mytest1); //1000

apply() 

        function test2(x, y) {
            return x * y;
        }
        var mytest2, num1;
        num1 = [10, 5];
        mytest2 = test2.apply(mytest2, num1);
        alert(mytest2); //50

 call() 和 apply()内置函数的区别

 call() 和 apply()都可以访问自定义函数

 两个方法都使用了对象本身[this]作为第一个参数。 

两者的区别在于第二个参数： 

call()的第二个参数开始是当前函数的具体所需的参数值

 apply()的第二个参数传入的是一个参数数组，也就是将当前函数的具体所需的参数值组合成为一个数组传入