js基础知识---call,apply,bind的用法

call,apply详解

javascript中,call和apply方法的用途是为了扩充函数赖以生存的作用域,通俗点来说,就是为了动态改变函数体内部this的指向。
用途: 扩充函数赖以生存的作用域。
好处: 对象与方法之间不需要任何的耦合关系。
javascript的一大特点是,函数存在定义时上下文运行时上下文,和上下文是可变的,这样的概念。

先上一个例子:

function showColor(){
    console.log("my color is:" + this.color);
}
window.color = "red";

showColor.call(window);    //my color is:red

上面的例子中,shouwColor函数并没有对外部调用自己传入的参数进行接收,那么调用者是怎么样通过调用该函数来得到想要的结果呢?
先来解释下,上面这段代码。代码中,定义了一个showColor函数,以及一个挂载在window下的一个全局对象color,showColor.call(this)执行了shouwColor函数,并且改变了shouwColor函数中this的指向,call方法传入的第一个参数,始终代表着this的指向。当传入的第一个参数是window的时候,shouwColor函数中的this就指向了window,那么this.color就相当于window.colorl了,打印出来的结果就自然是window.color的值了。

var colorObj = {"color":"blue"};
showColor.call(colorObj);    //my color is:blue

那么我们再来定义一个colorObj 对象,对象中,有一个属性color,call方法中第一个参数是colorObj 对象,那么一样的道理,shouwColor函数中的this就指向了**colorObj **对象了。这就是call方法的简单运用了。

call,apply方法的定义

call方法:
语法:call([thisObj[,arg1[, arg2[, [,.argN]]]]])
定义:调用一个对象的一个方法,以另一个对象替换当前对象。
说明:
call 方法可以用来代替另一个对象调用一个方法。call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。
如果没有提供 thisObj 参数,那么 window 对象被用作 thisObj。

apply方法:
语法:apply([thisObj[,argArray]])
定义:应用某一对象的一个方法,用另一个对象替换当前对象。
说明:
如果 argArray 不是一个有效的数组或者不是 arguments 对象,那么将导致一个 TypeError。
如果没有提供 argArray 和 thisObj 任何一个参数,那么 window 对象将被用作 thisObj, 并且无法被传递任何参数。

call,apply方法的区别

对于 apply、call 二者而言,作用完全一样,只是接受参数的方式不太一样。例如,有一个函数定义如下:

function test(arg1,arg2){
    ......
}

就可以通过以下方式调用了

test.call(this,arg1,arg2);
test.apply(this,[arg1,arg2]);

其中 this 是你想指定的上下文,可以是任何一个 JavaScript 对象(JavaScript 中一切皆对象),call 需要把参数按顺序传递进去,而 apply 则是把参数放在数组里。

call,apply方法的示例

1.数组的合并

var facebookImg = ["fb1.jpg","fb2.jpg","fb3.jpg"];
var youtubeImg = ["yt1.jpg","yt2.jpg","yt3.jpg"];
Array.prototype.push.apply(facebookImg,youtubeImg); //返回值为合并后的facebookImg数组的长度

facebookImg的值为: ["fb1.jpg","fb2.jpg","fb3.jpg","yt1.jpg","yt2.jpg","yt3.jpg"]
或者合并后赋值给一个新数组(不改变原数组的值)

var facebookImg = ["fb1.jpg","fb2.jpg","fb3.jpg"];
var youtubeImg = ["yt1.jpg","yt2.jpg","yt3.jpg"];
var allImg = [];
allImg.push.apply(allImg,facebookImg);
allImg.push.apply(allImg,youtubeImg);

2.获取数组中的最大值和最小值
js获取数组中的最大值和最小值,有多种方法,比如冒泡排序等,使用apply和call方法也是可以达到相同的效果的。

var  numbers = [5, 458 , 120 , -215 ]; 
var applyMaxInNumbers = Math.max.apply(Math, numbers);   //458
var applyMinInNumbers = Math.min.apply(Math,numbers); //-215

number 本身没有 max 方法,但是 Math 有,我们就可以借助 call 或者 apply 使用其方法。

3.类(伪)数组使用数组方法
Javascript中存在一种名为伪数组的对象结构。比较特别的是 arguments 对象,还有像调用 getElementsByTagName , document.childNodes 之类的,它们返回NodeList对象都属于伪数组。不能应用 Array下的 push , pop 等方法。
但是我们能通过 Array.prototype.slice.call 转换为真正的数组的带有 length 属性的对象,这样 domNodes 就可以应用 Array 下的所有方法了。

4.定义一个 log 方法,让它可以代理 console.log 方法
一般我们都会去这样的实现:

function log(msg){
    console.log(msg);
}
log("testData1");          //testData1
log("data1","data2");      //data1

上面的这种实现的方式在传入一个参数的时候是满足要求的,但是当传入的参数是多个的话,就失效了,因为log方法只接受了第一个且唯一一个参数。那么如果要在传入多个参数的情况下也能够实现,就可以用到call和apply方法了,注意,当不清楚参数的具体个数时,建议最好运用apply方法。

function log(){
    console.log.apply(window,arguments);
}
log("testData1");          //testData1
log("data1","data2","data3");      //data1,data2,data3

接下来的要求是给每一个 log 消息添加一个"(doView)"的前辍,比如:

log("hello world");    //(doView)hello world

那么就可以利用伪数组转为标准数组的方式,然后再使用unshift方法操作数组

function log(){
  var argsData = Array.prototype.slice.call(arguments);
  argsData.unshift('(doView)');
  console.log.apply(window, args);
};

5.借用构造函数继承的实现
javascript中的继承方式实现由多种,包括原型继承,借用构造函数继承与组合继承等。那么现在就用call和apply方法来简单实现下javascript中的构造函数的继承吧。

function superType(name){
    this.name = name;
}
function subType(name,age){
    this.age = age;
    superType.call(this,name);
}
var types1 = new subType("yqxcn", 30);
console.log("age:" + types1.age);        //age:30
console.log("name:" + types1.name);      //name:yqxcn,继承自superType属性值

var types2 = new subType("wx272252", 18);
console.log("age:" + types2.age);        //age:18
console.log("name:" + types2.name);      //name:wx272252,继承自superType属性值

bind的用法

bind方法虽然与call,apply的用法有点不同,但是其作用也是一样的,也是可以改变函数体内this的指向。
MDN的解释是:bind()方法会创建一个新函数,称为绑定函数,当调用这个绑定函数时,绑定函数会以创建它时传入 bind()方法的第一个参数作为 this,传入 bind() 方法的第二个以及以后的参数加上绑定函数运行时本身的参数按照顺序作为原函数的参数来调用原函数。

以最开始的例子为例:

function showColor(){
    console.log("my color is:" + this.color);
}
window.color = "red";
showColor.bind(window);      //这里并不会打印出想要的结果

这个例子就可以很好的证明了上面MDN的解释了,当浏览器执行"showColor.bind(window); "这一句代码的时候,bind()创建了一个绑定函数,也就是说这句代码只是创建了一个函数,却并没有调用执行该函数,就像我们自己定义了一个普通函数而没有调用它,所以这句代码需要改成如下:

showColor.bind(window)();    //my color is:red

这也是apply、call、bind的不同之处。bind方法是创建一个函数,然后可以在需要调用的时候再执行函数,并非是立即执行函数;而call,apply是在改变了上下文中的this指向后并立即执行函数。

总结

  • call,apply,bind都是可以改变函数体内this的指向。
  • call,apply,bind使用时,传入的第一个参数都是用来传递this的指向的,也就是对上下文的指定。
  • call,apply,bind都是可以传入多个参数,不同的是,call和bind的后续参数都是按照顺序传参,而apply的传参类型是数组;bind的参数可以在函数执行的时候再次添加。

原创文章,站在前辈们的经验上的总结,文中如有不正之处,还望指正!

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,456评论 5 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,370评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,337评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,583评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,596评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,572评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,936评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,595评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,850评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,601评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,685评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,371评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,951评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,934评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,167评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 43,636评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,411评论 2 342

推荐阅读更多精彩内容