背景:今天群里有 妹子(我就不指名道姓喽)说:百度了一圈calll()函数和apply()函数,感觉还是糊里糊涂
然后群里热闹了,各种表情包,各种殷勤,你懂的!正好我前几天刚又重新翻了一遍 那本 600多页 的圣经书,我习惯时不时的去打下基础,只是为了用来装逼,给人讲解。。。。(我是有多蛋疼)!
好了下面针对这个问题,我看好多小朋友 都不理解或者很迷惑,确实容易绕晕,毕竟是js独有的面向对象
嘛,你要一下理解了 才是不正常。开始: 先说call 这个东西
NO 1:我们先看一个简单的例子 1+1 = 2 你应该会吧
function add(a,b)
{
alert(a+b);
}
function sub(a,b)
{
alert(a-b);
}
add.call(sub,1,1); // 结果是? ‘2’ 还是 ‘0’ 呢
这里写代码片有人说是 1+1 =2; 有人说明显变成 1-1 = 0 了嘛!
其实 add.call(sub,1,1); 等价于add(1,1) = 2 。。。。。
那你这不是脑残吗?非要多此一举 弄个该死的call ,搞毛? 直接 add(1,1) 不行了吗?
我不太懂了,add.call(sub)了,肯定是add直接sub里面的减法了呀,不然弄个call干嘛呀?
1、那你这不是脑残吗?非要多此一举 弄个该死的call ,搞毛? 直接 add(1,1)
答:其实 这个写法就是再举个例子 ,大家不要被迷惑 正常写这种加减法功能 谁会脑残这样多此一举? 嘿嘿 我偷笑!
2、我不太懂了,add.call(sub)了,肯定是add直接sub里面的减法了呀,不然弄个call干嘛呀?
答:call的用法和意义:call和apply可以用来重新定义函数的执行环境,也就是this的指向; call 和 apply 都是为了改变某个函数运行时的
context 即上下文而存在的 换句话说,就是为了改变函数体内部 this 的指向。因为 JavaScript 的函数存在「定义时上下文」和「运行时上下文」以及「上下文是可以改变的」这样的概念。call():
- 语法:call(Obj,[arg1][arg1])
我的白话文:
call 就是中间牵线的,sub说 我需要 add 你的方法 和技能, 比如:add会飞天 ,但sub 不会飞,现在sub想飞,但add不让它飞,所以sub就叫来了 call 这个东西, call直接把add爆菊 加上一个 点 然后把sub抱到括号里,然后 sub 就直接把add 的“飞天”技能学会了,回到函数
function add(a,b)
{
alert(a+b);
}
function sub(a,b)
{
alert(a-b);
}
add.call(sub,1,1);
// 结果是 sub直接集成了 add 的“飞天”技能 sub alert里面 直接变成了 “a+b”!主角还是sub,并不是add ,你要搞清楚!
3. 什么场景下会用到call, apply 这种装逼的写法呢;
function changeStyle(attr, value){
this.style[attr] = value;
}
var box = document.getElementById('box');
window.changeStyle.call(box, "height", "200px");
在这里,changeStyle函数将被box对象调用,this指向了box对象,如果不用call的话,程序报错,因为
window对象中没有style属性。apply的用法:
window.changeStyle.apply(box, [‘height’, ‘200px’]);
现在 window对象 “box” 这个div 的高 直接变成200px了,
window.changeStyle.call(box, “height”, “200px”)
等价于 box.style.height=”200px”;
看到这里应该明白了吧 没如果还没明白
window.changeStyle.apply(box, [‘height’, ‘200px’]);
看了这个写法 你应该明白了把, 啊哈其实 就是写法 和形式不同而已,本质是一样的,apply(),是推进到
数组里而已,也是为了改变this、
这个,也是为了偷 add 的飞天技能哈!
总结一句话:call() 就是用来让括号里的对象 来集成括号外的函数的属性!可以称之为继承!
深入理解请和使用场景请查考:深入理解Javascript中apply、call、bind方法的总结。
js中有三个改变this指针的方法,分别是 apply,call,bind。很多人只知道能改变的this,但是具体的适用场景不是太清楚。我也是遇到坑后不断的实践发现了区别。call ,apply方法:
call 方法是Function.prototype原型上天生自带的方法,所有的函数都可以调用的。它改变了call方法(Function.prototype原型上的call)的this指向。
首先介绍下call和apply两个方法,这两个方法都是挂载在函数的原型上的,所以所有的函数都可以调用这两个方法。call()方法的作用和 apply() 方法类似,区别就是call()方法接受的是参数列表
call定义:调用一个对象的一个方法,以另一个对象替换当前对象,传递多个参数,apply定义:应用某一对象的一个方法,用另一个对象替换当前对象,apply传递多个参数的时候第二个参数需要传递一个数组
ECMAScript 规范给所有函数都定义了 call 与 apply 两个方法,它们的应用非常广泛,它们的作用也是一模一样,只是传参的形式有区别而已。
这是 JS 原生方法原理探究系列的第一篇文章。本文会介绍如何实现 call、apply 和 bind 方法。关于这几个方法的具体用法,MDN 以及网上的文章已经描述得很清楚,这里不再赘述。
本文将全面的,详细解析call方法的实现原理,并手写出自己的call方法,相信看完本文的小伙伴都能从中有所收获。
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!