js深入浅出3种回调函数用法

本文主要讲解js中重点3种回调函数的使用方法,深入浅出的诠释了回调函数的作用,有一定经验的小伙伴都知道,如果能把回调函数合理使用起来的话,可以大大减少代码的冗余度,增强代码的可读性,同时也方便了后期的维护,让你有更多的时间去处理那些当务之急.

其实回调函数大体上可以分为以下三类用法:

1. 直接回调
2. call回调
3. apply回调

有些小伙伴又会问道:你说这么好用的回调函数,我怎么使用呢?它的运用场景又是什么呢?

其实使用回调主要还是解决,当很多地方都需要调用同一个函数,并且这个函数根据不同的需求,作不同的事件处理时,此时使用回调函数就非常适应了.

那接下来,让我们看一看具体的实例,让大家对回调函数有更深入的理解应用场景

方式一: 直接使用回调函数

        function boy() {

            alert('我是小明,晚上有空');

        }

        function girl() {

            alert('哈哈...');

        }

//公共函数

        function father(callback) {   

            callback();

            callback.call();

        }

        father(boy);      //传boy，回调boy函数  

        father(girl);     //传girl函数，回调girl函数

注意:此时如果不传参数,callback()和callback.call()功能一样哦

方式二: 使用call和apply回调

在使用之前,让我们先来看一下call和apply之间的区别吧!帮助大家更容易理解

call(this,参数1,参数2,参数3,...)

       apply(this,[参数1,参数2,参数3,...])

其实从上面的使用方法来看,call和apply都差不多,只不过是语法有所不同,参数部分,一个是直接写参数,一个是数组列表.其中两个方法都可以改变this的指向为目标对象,具体细节,我们使用示例来演示.

示例一: 方法类中的回调

    function son(name) {

        this.sonName = name;

        this.showSonName = function () {

            alert(this.sonName);       //弹出 小雕蚕  

            alert(this.fatherName);    //弹出father,这是父级中的属性，有没有php extends的感觉  

        }

    }

    function father(name) {

        this.fatherName = 'father';

        this.showFatherName = function (_callback) {

            _callback = eval(_callback);

            _callback.call(this, name);

            //_callback.apply(this,Array(name));  

        }

    }

    var ff = new father("小雕蚕");

    ff.showFatherName('boy');     //传字符串的时候，使用回调的时候，要用eval转换一下  

    ff.showSonName();

当使用call进行回调的时候，call中的this方法，会改变this指向,会继承son的方法，并替换

示例二: 域中回调

    var son = {

        name: "张三疯",

        getname: function (name) {

            this.fathername();    //弹出 陆小凤  

            this.name = name;

            alert(this.name);     //弹出 小明

        }

    }

    var father = {

        init: function (_callback, name) {

            _callback = eval(_callback);

            _callback.apply(this, Array('小明'));

        },

        fathername: function () {

            alert('陆小凤');

        }

}

father.init('son.getname');

当使用apply进行回调的时候，apply中的this方法，会改变this指向,会继承son的方法，并替换

总结:

以上为本期给大家分享的文章内容,如果有什么不理解的地方,可以和小编联系,进行深度技术交流,感谢大家的查阅!后期还会分享更多有深度的文章,请多多关注!