1.call apply bind 的作用和区别

作用:

都可以改变函数内部的this指向。

区别点:

1.call和apply会调用函数,并且改变函数内部this指向。

2.call和apply传递的参数不一样,call传递参数arg1,arg2..形式apply必须数组形式[arg]

3.bind不回调用函数,可以改变函数内部this指向。

解析:

call方法

改变函数内部this指向

call()方法调用一个对象。简单理解为调用函数的方式,但是它可以改变函数的this指向。

写法:fun.call(thisArg,arg1,arg3,...)//thisArg为想要指向的对象,arg1,arg3为参数

call的主要作用页可以实现继承

function Person(uname,age){
    this.uname = uname
    this.age = age
}
function Son(uname,age){
    Person.call(this,uname,age)
}
var son = new Son("zhang",12)
console.log(son)
apply()方法

apply()方法调用一个函数。简单理解为调用函数的方法,但是它可以改变函数的this指向

写法:fun.apply(thisArg,[argsArray])

thisArg:在fun函数允许时指定的this值
argsArray:传递的值,必须包含数组里面
返回值就说函数的返回值,因为他就说调用函数
apply的主要应用,比如可以利用apply可以求得数组中最大值

const arr = [1,22,3,44,5,66,7,88,9]
const max = Math.max.apply(Math,arr)
console.log(max)
bind()方法

bind()方法不回调用函数,但是能改变函数内部this指向

写法:fun.bind(thisArg,arg1,arg2,...)

thisArg:在fun函数运行时指定的this值

arg1,arg2:传递的其他参数

返回由指定的this值和初始化参数改造的原函数拷贝

var o = {
    name:"lisa"
};
function fn(){
    console.log(this)
}
var f = fn.bind(o)
f()
 bind应用

如果有的函数我们不需要立即调用,但是又需要改变这个函数的this指向,此时用bind再合适不过了

const btns = docment.querySelectorAll("button");
for(let i = 0;i<btns.length;i++){
    btns[i}.onclick = function(){
        this.disabled = true;
        setTimeout(
            function(){
                this.disabled = false
            }.bind(this),
            2000
        )
    }
}
 扩展:

主要应用场景:

1.call经常做继承。

2.apply经常跟数组有关系,比如借助于数学对象实现数组最大值最小值。

3.bind不调用函数,但是海想改变this指向,比如改变定时器内部的this指向。

call apply bind 的作用和区别相关推荐

  1. call(),apply(),bind()的用法及举例

    通过学习call(),apply(),bind()的用法和区别,我们能更好的理解this及作用域的含义,为后面的编程打下基础. call()的用法: 调用一个函数,使其具有一个指定的this值和分别地 ...

  2. call,apply,bind的用法与区别

    1.call/apply/bind方法的来源 首先,在使用call,apply,bind方法时,我们有必要知道这三个方法究竟是来自哪里?为什么可以使用的到这三个方法? call,apply,bind这 ...

  3. JavaScript中的call,apply,bind区别及应用(包含手写call/apply/bind)

    目录 一.使用目的 二.三者分别是如何定义的及区别(摘自MDN) 三.在程序中收获 四.三者的具体应用 四.手写bind,apply,call 今天在读程序题的时候,遇到call,apply,bind ...

  4. JavaScript的call,apply和bind方法之间的区别

    by Rajat Saxena 通过拉贾特·萨克森纳(Rajat Saxena) JavaScript的call,apply和bind方法之间的区别 (The difference between J ...

  5. JavaScript中的call,apply,bind学习总结

    JavaScript 中的 call, apply, bind 这三个函数的作用和区别在各大论坛都被讨论了很多次了,但是我一直都还没来得及好好总结,这次正好看到了一个很不错的关于JavaScript ...

  6. call apply bind 深入了解

    不知其理,何以谈用 众所周知 call.apply.bind 的作用都是'改变'作用域,但是网上对这这'改变'说得含糊其辞,并未做详细说明,'改变'是直接替换作用域?谁替换谁?怎么产生效果?这些问题如 ...

  7. call,apply,bind,new实现原理

    在实际开发过程中,对于函数封装时,不确定外部是谁调用的,调用函数内部方法时,有可能是window调用这时就会报错,常使用call,apply,bind来绑定this指向. Function.proto ...

  8. bind函数作用、应用场景以及模拟实现

    bind函数 bind 函数挂在 Function 的原型上 Function.prototype.bind 创建的函数都可以直接调用 bind,使用: function func(){console ...

  9. JavaScript内置一些方法的实现原理--new关键字,call/apply/bind方法--前戏

    new关键字,call/apply/bind方法都和this的绑定有关,在学习之前,首先要理解this. 一起来学习一下this吧 首先.this是一个对象. 对象很好理解,引用类型值,可以实现如th ...

最新文章

  1. win7访问不了服务器共享文件夹权限设置,win7系统开启共享文件夹访问权限的操作方法...
  2. 华为轮值主席鸿蒙,鸿蒙2.0已开源 华为轮值董事长:今年至少3亿设备搭载鸿蒙系统...
  3. Java 并发——多线程基础
  4. c语言socket发送excel,socket文件传输功能的实现
  5. 关于Java中try-catch-finally-return语句的思考
  6. AttributeError: module 'networkx' has no attribute 'draw_graphviz'解决方案
  7. jvm gc垃圾回收机制和参数说明amp;amp;Java JVM 垃圾回收(GC 在什么时候,对什么东西,做了什么事情)
  8. drool 7.x 属性 : lock-on-active
  9. 程序员总被坑?这是GitHub上的一篇防骗指南
  10. 最简单DIY基于ESP8266的国产WS2812智能彩灯④(在网页用按钮点亮)
  11. 有道词典【输入式翻页】
  12. 让 macbook 外接键盘支持 HOME 键
  13. Blue Coat:2015年数据安全趋势七大预测
  14. 孢子社群:今日推荐人工智能微信群:粤、沪、鄂人工智能产业化集群1
  15. 一个屌丝程序猿的人生(一百零八)
  16. 水星pppoe连接服务器无响应,利用水星路由器系统日志解决PPPOE拨号故障
  17. 芯片的本质是什么?(4)物质与数字世界接口
  18. [转]高精度乘法计算
  19. Element-UI 表格自定义序号列
  20. 吴恩达ML WEEK7 机器学习

热门文章

  1. regl fake-3d 静态图变动态图, 使用深度信息图片
  2. Java之XML解析-使用dom(org.w3c.dom)解析XML
  3. PowerBI把日期戳格式转换成常见日期格式
  4. 卷积神经网络初步(零):从原始汤到细胞
  5. 计蒜客信息学入门赛 #17--B
  6. 云原生时代的业务流程编排
  7. 人行征信报告学习经验
  8. [生存志] 第15节 历代大事件概览 东汉
  9. 世界第一台民用计算机,世界上第一台计算机
  10. SqlDataReader转换为DataTable