JS高级学习:apply和call 的使用/bind方法/高阶函

apply和call 的使用

// apply和call都可以改变this的指向
            function f1(x, y) {
                console.log("结果是:" + (x + y) + this);
            }
            window.f1(10, 20); //this是window
            function f1(x, y) {
                console.log((x + y) + ":===>" + this);
                return "这是函数的返回值";
            }
            // apply 和call 调用
            var r1 = f1.apply(null, [1, 2]); //此时f1中的this就是window
            console.log(r1);
            var r2 = f1.call(null, 1, 2); //此时f1中的this也是window
            console.log(r2);

            // 改变this的指向
            var obj = {
                sex: "男"
            };
            var r3 = f1.apply(obj, [1, 2]);
            console.log(r3);
            var r4 = f1.call(obj, 1, 2);
            console.log(r4);

apply和call的使用方法

• apply的使用语法：
  函数名字.apply(对象,[参数1,参数2,...]);
方法名字.apply(对象,参数1,参数2,...);
• call的使用语法
  函数名字.call(对象,[参数1,参数2,...]);
方法名字.call(对象,参数1,参数2,...);
• 作用：改变this的指向
• 不同的地方：
  参数传递的方式不一样只要是想使用对象的方法，并且希望这个方法是当前对象的，那么就可以使用apply或call的方法改变this的指向
• apply和call方法实际上并不在函数这个实例对象中，而是在Function的prototype中

bind方法

bind方法是复制的意思,参数可以在复制的时候传进去,也可以在复制之后调用的时候传进去

• 使用的语法：
  函数名字.bind(对象,参数1,参数2,...); =========>返回值是复制之后的这个函数
方法名字.bind(对象,参数1,参数2,...);=========>返回值是复制之后的这个方法

<script type="text/javascript">
            function f1(x, y) {
                console.log((x + y) + "=========" + this);
            }
            // bind方法是复制的意思,参数可以在复制的时候传进去,
            // 也可以在复制之后调用的时候传进去
            var ff = f1.bind(null, 10, 20);
            ff(10, 30);

            function Person() {
                this.age = 1000;
            }
            Person.prototype.eat = function() {
                console.log("哇咔咔");
            };
            var per = new Person();
            var f2 = f1.bind(per, 10, 20);
            f2();

            Person.prototype.play = function() {
                console.log(this + "=====" + this.age);
            };

            function Student(age) {
                this.age = age;
            };

            var per = new Person(10);
            var stu = new Student(20);
            // 复制了一份
            var ff = per.play.bind(stu);
            ff();//20  是学生的
            // bind是用来复制一份

bind方法的使用

案例:

<script type="text/javascript">
            // 展示随机数
            function ShowRandom() {
                // 1-10的随机数
                this.number = parseInt(Math.random() * 10 + 1);
            }
            ShowRandom.prototype.show1 = function() {
                window.setInterval(this.show2.bind(this), 1000);
            };
            ShowRandom.prototype.show2 = function() {
                // 展示随机数
                console.log(this.number);
            }
            var sr = new ShowRandom();
            // 调用这个方法一次,可以不停的产生随机数
            sr.show1();
        </script>

函数中的几个成员

函数中的属性：

• name:函数的名字，name属性是只读的，不能修改
• arguments：实参的个数
• length：函数定义时候形参的个数
• caller：调用(f1函数是在f2中调用的)

function f1(x, y) {
                console.log(f1.name);
                console.log(f1.arguments.length);
                console.log(f1.length);
                console.log(f1.caller);
            }
            f1.name = "个个矮柜 ";
            f1(10, 20, 30, 40);
            console.dir(f1);

            function f2() {
                console.log("f2的函数");
                f1(1, 2);
            };
            f2();

高阶函数之作为参数使用

函数作为参数的时候,如果是命名函数, 那么只传入函数的名字,没有括号

<script type="text/javascript">
            function f1(fn) {
                console.log("f1的函数");
                fn();
            }
            // fn是函数,最后作为函数使用了,函数是可以作为参数使用
            // 传入匿名函数
            f1(function() {
                console.log("这是匿名函数");
            });
            // 命名函数
            function f2() {
                console.log("f2的函数");
            }
            f1(f2);
            // 函数作为参数的时候,如果是命名函数,
            // 那么只传入函数的名字,没有括号
        </script>

高阶函数之作为返回值使用

案例：

<script type="text/javascript">
            function f1() {
                console.log("f1函数开始");
                return function() {
                    console.log("这是函数，但是此时作为返回值使用")
                };
            }
            var ff = f1();
            ff();


            var num = 10;
            console.log(typeof num); //获取num这个变量的数据类型
            var obj = {};
            console.log(obj instanceof Object); //判断这个对象是不是某个类型的
            //此时输出的是Object的数据类型  [object Object]
            console.log(Object.prototype.toString());
            // 输出的数组的数据类型 [object Array]
            console.log(Object.prototype.toString.call([]));

            var arr = [10, 20, 30];
            console.log(Object.prototype.toString.call(arr));
            console.log(Object.prototype.toString.call(new Date()));

            // 获取某个对象的类型是不是你传入的类型
            // type:是变量,是参数,  "[object Array]"
            // obj: 是变量,是参数,   [10,20,30];
            function getFunc(type) {
                return function(obj) {
                    return Object.prototype.toString.call(obj) == type;
                }
            }
            var ff = getFunc("[object Array]");
            var result = ff([10, 20, 30]);
            console.log(result);
        </script>