回调函数

参考网站： http://www.jb51.net/article/53027.htm

先看代码吧

栗子一：

(function () {

    function myFun(num1,num2,callback) {
        callback(num1+num2);
    }

   myFun(1,2,function (num) {
       document.querySelector("#box").innerHTML=num; //3
   })

})();

myFun里面传递了回调函数，该回调函数操作了其他的两个参数，返回了两个参数之和

从中可以看出回调函数做的事情是：

　　1，暂存操作，执行完相加操作后才输出的num

　　2，可以操作其他参数，并做相关处理。

　　3，可以把结果带出去。

流程解释，myFun中的callback操作其他两个参数相加，并把结果传到了应用myFun函数的实例上，顺便把结果也带了过去，（╮(╯▽╰)╭）

栗子二：

(function () {

    function outputName(callback) {
        callback('chenluomenggongzi');
    }

    function myName(n) {
        console.log(n);
    }

    outputName(myName);
})();

这个代码就简单了，这里贴出来，只是在说一下回调函数传参问题，这个例子貌似在说，我就是用回调函数的参数“替换”了应用函数的参数。也就是外部拿回调函数的参数去做处理

栗子三：

(function () {

    function Ting(name) {
        this.name=name;
    }

    Ting.prototype.do=function (callback) {
        callback.call(this);
    }

    function outputName() {
        console.log(this.name);
    }

    var t=new Ting('chenluomenggongzi');
    t.do(outputName);
    
})();

这是个高级点的回调函数，他的作用是，可以只想后期的一些功能，或者说后期添加的功能。

 

(function () {

   function Ting(name) {
       this.name=name;
   }
   
   Ting.prototype.do=function (callback,greetings) {
       callback.call(this,greetings);
   }
   
   function toGreet(greeting) {
       console.log(greeting+" "+this.name);
   }

   var sayHi=new Ting('chenluomenggongzi');
   sayHi.do(toGreet,"Hi"); //Hi chenluomenggongzi
})();

栗子同上，不同的是他更好的体现了添加功能这一项（我可以sayHi或者saHello）

 很好的分离了“做事”，“做什么事”

 

实际栗子：

一个功能为装填数组，并各项加1

槽糕代码：

(function () {

    function controlArray() {
        var arr=[];
        for (var i = 0; i < 10; i++) {
            arr.push(i);
        }
        for (var j = 0,length=arr.length; j < length; j++) {
           arr[j]++;
        }
        return arr;
    }
    var arr1=controlArray();
    console.log(arr1); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
})();

应用回调函数

(function () {

    function loadingArray(callback) {
        if(typeof callback != "function") return false;
        var arr=[];
        for (var i = 0; i < 10; i++) {
            if(callback){
                arr.push(callback(i));
            }
        }
        return arr;
    }

    function addNum(target) {
       return target += 1;
    }

    var arr1=loadingArray(addNum);
    console.log(arr1); //[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

})();

少了一次遍历有木有！

这个函数其实就是把功能分开了，装填数组，各项加一。

而且从这个函数还可以看出，如果后期，要改为，加2或者乘2，只需要在写个单独的加2或者乘2的函数就行了。貌似符合了“低耦合”的原则╮(╯▽╰)╭

 

说白了，回调函数的一种作用就是，传入一些其他方法去处理他的数据

 

总结：

　　1、回调函数可以实现”暂存“。数据处理好后再进行下一步处理

　　2、回调函数可以实现”添加“。实现功能改变，添加不同功能