js高级补充

<script>
        //typeof instanceof
        var arr=[1,2,3,4,5];
        // console.log(typeof arr); //object
        // console.log(typeof {});  //object
        // console.log(arr instanceof Array); //true
        // console.log({} instanceof Object); //true
        // console.log(arr instanceof Object); //true
        
        //call  apply bind返回函数的拷贝
        // *console.log(Object.prototype.toString.call(arr)); 
        // *console.log(Object.prototype.toString.bind(arr)());

        //高阶函数
        // function f(){
        //     console.log("f()");
        // }
        // f();
        // function f(){ 函数作为参数
        //     return function(){
        //         console.log("f()");
        //     }
        // }
        // f()(); //先返回再调用

        function f(fun){
            fun();
        }
        function sum(){
            console.log("sum");
        }
        sum();
        f(sum);

        //函数回调
        function f(fun,fun2){
            //arguments
            btn.click=function(){
                fun();
                fun2();
            }
        }
        //回调地狱 可读性差，需要费很长时间
        function f(fun){
            fun();
        }
        f(f(f(f())));
</script>

回调函数的两个重点：

1. 函数可以作为一个参数在传递到另一个函数中。

2. JS是异步编程语言。

回调函数是一段可执行的代码段，它作为一个参数传递给其他的代码，其作用是在需要的时候方便调用这段（回调函数）代码。

在JavaScript中函数也是对象的一种，同样对象可以作为参数传递给函数，因此函数也可以作为参数传递给另外一个函数，这个作为参数的函数就是回调函数。

回调函数

function add(num1, num2, callback){
    var sum = num1 + num2;
    callback(sum);
}

function print(num){
    console.log(num);
}

add(1, 2, print); //=>3

匿名回调函数

function add(num1, num2, callback){
    var sum = num1 + num2;
    callback(sum);
}

add(1, 2, function(sum){
    console.log(sum);        //=>3
});

jQuery中大量的使用了回调函数

$("#btn").click(function() {
  alert("button clicked");
});

this的使用
注意在回调函数调用时this的执行上下文并不是回调函数定义时的那个上下文，而是调用它的函数所在的上下文。

var obj = {
    sum: 0,
    add: function(num1, num2){
        this.sum = num1 + num2;
    }
};

function add(num1, num2, callback){
    callback(num1, num2);
};

add(1,2, obj.add);
console.log(obj.sum);            //=>0
console.log(window.sum);        //=>3

上述代码调用回调函数的时候是在全局环境下，因此this指向的是window，所以sum的值是赋值给windows的。

关于this执行上下文的问题可以通过apply方法解决。

var obj = {
    sum: 0,
    add: function(num1, num2){
        this.sum = num1 + num2;
    }
};

function add(num1, num2, callbackObj, callback){
    callback.apply(callbackObj, [ num1, num2 ]);
};

add(1,2, obj, obj.add);
console.log(obj.sum);            //=>3
console.log(window.sum);        //=>undefined