嗨喽，各位小伙伴们，你们好呀~
又来到了源码时代知识大讲堂，本期的内容可是干货满满。赶快跟着源妹儿一起探索探索。
本文主要讲解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的方法，并替换
总结:
以上为本期给大家分享的文章内容,如果有什么不理解的地方,可以和小编联系,进行深度技术交流,感谢大家的查阅!后期还会分享更多有深度的文章,请多多关注!
