js的call() ,apply() 两种方法的区别和用法,最白话文的解释,让枯燥滚粗!
百度了一圈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干嘛呀?
什么场景下会用到call, apply 这种装逼的写法呢;
好了,下面我们针对,群里的小伙伴提出的疑问一一解答:
那你这不是脑残吗?非要多此一举 弄个该死的call ,搞毛? 直接 add(1,1)
答:其实 这个写法就是再举个例子 ,大家不要被迷惑 正常写这种加减法功能 谁会脑残这样多此一举? 嘿嘿 我偷笑!
- 1
- 2
- 3
- 4
我不太懂了,add.call(sub)了,肯定是add直接sub里面的减法了呀,不然弄个call干嘛呀?
答:call的用法和意义: 官方解释:
- 1
- 2
- 3
- 4
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”;
看到这里应该明白了吧 没如果还没明白
apply() 这个用法
window.changeStyle.apply(box, [‘height’, ‘200px’]);
看了这个写法 你应该明白了把, 啊哈其实 就是写法 和形式不同而已,本质是一样的,apply(),是推进到
数组里而已,也是为了改变this、
这个,也是为了偷 add 的飞天技能哈!
总结一句话:call() 就是用来让括号里的对象 来集成括号外的函数的属性!可以称之为继承!
js的call() ,apply() 两种方法的区别和用法,最白话文的解释,让枯燥滚粗!的更多相关文章
- PHP中数组合并的两种方法及区别介绍
PHP数组合并两种方法及区别 如果是关联数组,如下: 复制代码代码如下: $a = array( 'where' => 'uid=1', 'order' => 'uid', ); $b = ...
- Js 字符串拼接的两种方法
字符串拼接的两种方法 用数组的方法的好处是:避免变量重新定义.赋值 <!DOCTYPE html> <html lang="en"> <head> ...
- 使用express创建node服务器的两种方法及区别
使用express创建node服务器有两种方法,如下所示: 方法一: var express = require('express'); var app = express(); app.listen ...
- Phonegap通过JS访问本地接口的两种方法
Phonegap为跨设备的应用开发提供了一个解决方案.如果某个应用只有js和html,则可以通过Phonegap的在线build工具,编译出多个平台的app安装包.当然通过Phonegap提供的js可 ...
- js循环遍历的两种方法for循环和for ... in 循环
JS数组的遍历方法有两种: 第一种:一般的for循环,例如: var a = new Array("first", "second", "third& ...
- js中字符串转换为数值的两种方法的区别
在js中字符串转换为数值的方法有三种:转换函数,强制类型转换,隐式转换 1.转换函数 parseInt() //将字符串转换为整型 parseFloat() //将字符串转换为浮点型 转换函数在 ...
- HTML中禁用表中控件的两种方法与区别
在网页的制作过程中,我们会经常使用到表单.但是有时候我们会希望表单上的控件是不可修改的,比如在修改密码的网页中,显示用户名的文本框就应该是不可修改状态的. 在html中有两种禁用的方法,他们分别是: ...
- javascript获取属性的两种方法及区别
javascript获取属性有两种方式,点或者中括号: var obj={} obj.x=1 console.log(obj.x)//1 第一种方式,x是字面量 try{ console.log(ob ...
- js 数组去重复两种方法一看就懂
var arr=[1,1,2,2,3,5,2];function uniqueArr(arr){ var data=[]; for(var i=0;i<arr.length;i++){ if(d ...
随机推荐
- jQuery插件:Ajax将Json数据自动绑定到Form表单
jQuery注册方法的两种常用方式: //jQuery静态方法注册 //调用方法$.a1() $.extend({ a1: function () { console.log("a1&quo ...
- 【转】python time模块详解
python 的内嵌time模板翻译及说明 一.简介 time模块提供各种操作时间的函数 说明:一般有两种表示时间的方式: 第一种是时间戳的方式(相对于1970.1.1 00:00:0 ...
- C#设计模式之七适配器模式(Adapter)【结构型】
一.引言 从今天开始我们开始讲[结构型]设计模式,[结构型]设计模式有如下几种:适配器模式.桥接模式.装饰模式.组合模式.外观模式.享元模式.代理模式.[创建型]的设计模式解决的是对象创建的问题, ...
- AJAX学习前奏----JS基础加强
AJAX学习前奏----JS基础加强 知识概要: 1.js类&属性&方法的定义 2.静态属性与方法 3.构造方法 4.原型的使用 5.Object对象直接加属性和方法 6.JSO ...
- c# 图片转二进制/字符串 二进制/字符串反转成图片
protected void Button1_Click(object sender, EventArgs e) { //图片转二进制 byte[] imageByte = GetPictureDat ...
- win10 uwp 访问解决方案文件
本文讲如何访问解决方案的资源. 我们经常会把一些图片资源放在我们的解决方案,那么从这里拿出来很简单. 我在 Assets 放了图片 1.jpg 那么我要把他拿出来可以 <Image Source ...
- ARM总线方面知识
AMBA简介 随着深亚微米工艺技术日益成熟,集成电路芯片的规模越来越大.数字IC从基于时序驱动的设计方法,发展到基于IP复用的设计方法,并在SOC设计中得到了广泛应用.在基于IP复用的SoC设计中,片 ...
- 63、django之模版层(template)
上篇主要介绍了django的MTV模型,主要介绍了视图层之路由配置系统url分发和视图层之视图函数view,本篇主要讲解MTV模型中的模版层template. 模版层(template) 一.模版简介 ...
- JavaScript中的比较规则之“==”运算符
"=="运算符(两个操作数的类型不相同时) 如果一个值是null,另一个值是undefined,则它们相等 如果一个值是数字,另一个值是字符串,先将字符串转换为数学,然后使用转换后 ...
- 【Jquery系列】详解Jquery对象和Dom对象
问题描述 本篇文章主要讲解Jquery对象和DOM对象,主要围绕如下五个方面来介绍: Jquery对象和dom对象定义 Jquery对象与dom对象区别 Jquery对象及运用举例 dom对象及运用举 ...