百度了一圈calll()函数和apply()函数,感觉还是糊里糊涂

正好我前几天刚又重新翻了一遍 那本 600多页 的圣经书,我习惯时不时的去打下基础,只是为了用来装逼,给人讲解。。。。(我是有多蛋疼)!

好了下面针对这个问题,我看好多小朋友 都不理解或者很迷惑,确实容易绕晕,毕竟是js独有的面向对象

嘛,你要一下理解了 才是不正常。开始: 先说call 这个东西

NO 1:我们先看一个简单的例子 1+1 = 2 你应该会吧


  1. function add(a,b)
  2. {
  3. alert(a+b);
  4. }
  5. function sub(a,b)
  6. {
  7. alert(a-b);
  8. }
  9. 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 这种装逼的写法呢;


好了,下面我们针对,群里的小伙伴提出的疑问一一解答:


  1. 那你这不是脑残吗?非要多此一举 弄个该死的call ,搞毛? 直接 add(1,1)

    1. 答:其实 这个写法就是再举个例子 ,大家不要被迷惑
    2. 正常写这种加减法功能 谁会脑残这样多此一举? 嘿嘿 我偷笑!
    • 1
    • 2
    • 3
    • 4
  2. 我不太懂了,add.call(sub)了,肯定是add直接sub里面的减法了呀,不然弄个call干嘛呀?

    1. 答:call的用法和意义:
    2. 官方解释:
    • 1
    • 2
    • 3
    • 4

    call和apply可以用来重新定义函数的执行环境,也就是this的指向; call 和 apply 都是为了改变某个函数运行时的 
    context 即上下文而存在的 换句话说,就是为了改变函数体内部 this 的指向。因为 JavaScript 
    的函数存在「定义时上下文」和「运行时上下文」以及「上下文是可以改变的」这样的概念。

    call():

    • 语法:call(Obj,[arg1][arg1])

我的白话文:


  1. call 就是中间牵线的,sub 我需要 add 你的方法 和技能,
  2. 比如:add会飞天 ,但sub 不会飞,现在sub想飞,但add不让它飞,所以sub就叫来了 call 这个东西, call直接把add爆菊
  3. 加上一个 然后把sub抱到括号里,然后 sub 就直接把add 的“飞天”技能学会了,回到函数
  1. ----------
  2. function add(a,b)
  3. {
  4. alert(a+b);
  5. }
  6. function sub(a,b)
  7. {
  8. alert(a-b);
  9. }
  10. add.call(sub,1,1);
  11. // 结果是 sub直接集成了 add 的“飞天”技能 sub alert里面 直接变成了 “a+b”!主角还是sub,并不是add ,你要搞清楚!
  1. 3. 什么场景下会用到call apply 这种装逼的写法呢;
  2. 答:看例子
  1. function changeStyle(attr, value)
  2. {
  3. this.style[attr] = value;
  4. }
  5. var box = document.getElementById('box');
  6. 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() 两种方法的区别和用法,最白话文的解释,让枯燥滚粗!的更多相关文章

  1. PHP中数组合并的两种方法及区别介绍

    PHP数组合并两种方法及区别 如果是关联数组,如下: 复制代码代码如下: $a = array( 'where' => 'uid=1', 'order' => 'uid', ); $b = ...

  2. Js 字符串拼接的两种方法

    字符串拼接的两种方法 用数组的方法的好处是:避免变量重新定义.赋值 <!DOCTYPE html> <html lang="en"> <head> ...

  3. 使用express创建node服务器的两种方法及区别

    使用express创建node服务器有两种方法,如下所示: 方法一: var express = require('express'); var app = express(); app.listen ...

  4. Phonegap通过JS访问本地接口的两种方法

    Phonegap为跨设备的应用开发提供了一个解决方案.如果某个应用只有js和html,则可以通过Phonegap的在线build工具,编译出多个平台的app安装包.当然通过Phonegap提供的js可 ...

  5. js循环遍历的两种方法for循环和for ... in 循环

    JS数组的遍历方法有两种: 第一种:一般的for循环,例如: var a = new Array("first", "second", "third& ...

  6. js中字符串转换为数值的两种方法的区别

    在js中字符串转换为数值的方法有三种:转换函数,强制类型转换,隐式转换 1.转换函数 parseInt()   //将字符串转换为整型 parseFloat()  //将字符串转换为浮点型 转换函数在 ...

  7. HTML中禁用表中控件的两种方法与区别

    在网页的制作过程中,我们会经常使用到表单.但是有时候我们会希望表单上的控件是不可修改的,比如在修改密码的网页中,显示用户名的文本框就应该是不可修改状态的. 在html中有两种禁用的方法,他们分别是: ...

  8. javascript获取属性的两种方法及区别

    javascript获取属性有两种方式,点或者中括号: var obj={} obj.x=1 console.log(obj.x)//1 第一种方式,x是字面量 try{ console.log(ob ...

  9. 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 ...

随机推荐

  1. java启动监听错误: org.springframework.web.context.ContextLoaderListener

    项目启动会报以下错误: 解决方案如下: 感谢好心人的提示“其实可能是你的jar文件没有同步发布到自己项目的lib目录中(如果你是用Maven进行构建的话) 可以试试 下面的办法 项目点击右键 点击 P ...

  2. fiddler 监听HttpClient发送的请求

    用HttpClient模拟浏览器发送请求,设置一下代理httpClient.getHostConfiguration().setProxy("127.0.0.1", 8888);

  3. web前端面试官挖的那些坑(js)

    题目1: function Foo() { getName = function () { alert (1); }; return this; } Foo.getName = function () ...

  4. ASP.NET没有魔法——ASP.NET MVC 与数据库之ORM

    什么是ORM 对象关系映射(Object Relational Mapping,简称ORM,或O/RM,或O/R mapping),是一种程序技术,用于实现面向对象编程语言里不同类型系统的数据之间的转 ...

  5. MVVM命令绑定原理

    跟据网上前辈们的资料.了解到命令在MVVM绑定有三种行式. 1.DelegateCommand 2.RelayCommand 3.AttachbehaviorCommand /// <summa ...

  6. 【转载】CSS3的calc()使用

    文章转载自 w3cplus http://www.w3cplus.com/ 原文链接:http://www.w3cplus.com/css3/how-to-use-css3-calc-function ...

  7. 【Spring】浅谈spring推荐构造器注入

    一.前言 ​ Spring框架对Java开发的重要性不言而喻,其核心特性就是IOC(Inversion of Control, 控制反转)和AOP,平时使用最多的就是其中的IOC,我们通过将组件交由S ...

  8. Java8系列之初识

    前言:终于有机会在工作中使用高版本的Java8,但是一直没有对java8中添加的新特性进一步了解过,所以趁着这个机会学习一下,能够在编程中熟练的使用. 一.接口的改变 我们知道,在java8版本以前, ...

  9. react-native绑定优酷SDK播放视频-附效果和git源码

    ReactNative绑定优酷SDK需要用到两部分知识: 优酷本身的sdk绑定: RN与原生界面的交互: 效果: RN版本:0.49.3 代码更新日期:2017.10.26 下文也根据绑定优酷需要的两 ...

  10. 使用Git与Github创建自己的远程仓库

    原因 早就想创建一个自己的远程仓库,方便发布到Nuget上,自己用也好,项目组用也好,都方便. 今天抽了个时间建了个仓库,随便记下溜方便后来的人. 流程 1,创建自己的GitHub仓库 首先需要到 G ...