call、apply、bind三者为改变this指向的方法。

LinMeng 等级 530 0 1

共同点:

第一个参数都为改变this的指针。若第一参数为null/undefined,this默认指向window

差异点如下:

1.call(无数个参数)

第一个参数:改变this指向 第二个参数:实参 使用之后会自动执行该函数

function fn(a,b,c){
   console.log(this,a+b+c); // this指向window
}
fn();
fn.call(document,1,2,3);//call改变之后this指向document  
    //输出 #document 6   1,2,3是实参 结果相加为6
2.apply(两个参数)

第 一个参数:改变this指向 第二个参数:数组(里面为实参) 使用时候会自动执行函数

  function fn(a,b,c){
    console.log(this,a+b+c); 
  }
  fn();
  fn.apply(document,[1,2,3]); 
3.bind(无数个参数)

第一个参数:改变this指向 第二个参数之后:实参 返回值为一个新的函数 使用的时候需要手动调用下返回 的新函数(不会自动执行)

  function fn(a,b,c){
    console.log(this,a+b+c); //window
  }
  let aa = fn.bind('小明',1,2,3); //手动调用一下
  aa();

注意:

call、apply与bind区别:前两个可以自动执行,bind不会自动执行,需要手动调用

call、bind与apply区别:前两个都有无数个参数,apply只有两个参数,而且第二个参数为数组

收藏
评论区

相关推荐

Netty之旅三:Netty服务端启动源码分析,一梭子带走!
Netty服务端启动流程源码分析 前记 哈喽,自从上篇《Netty之旅二:口口相传的高性能Netty到底是什么?》后,迟迟两周才开启
Go Mmap 文件内存映射简明教程
1 mmap 简介 In computing, mmap is a POSIXcompliant Unix system call t
call、apply、bind三者为改变this指向的方法。
共同点: 第一个参数都为改变this的指针。若第一参数为null/undefined,this默认指向window 差异点如下: 1.call(无数个参数) 第一个参数:改变this指向 第二个参数:实参 使用之后会自动执行该函数 function fn(a,b,c){ console.log(this,abc); // this指
bind、call、apply 区别?如何实现一个bind?
一、作用 call、apply、bind作用是改变函数执行时的上下文,简而言之就是改变函数运行时的this指向 那么什么情况下需要改变this的指向呢?下面举个例子 var name"lucy"; const obj{     name:"martin",     say:function () {         co
vue 自定义指令-----文字提示气泡
实现一个简单的 鼠标滑过出现文字提示。啥也不说 上代码 包括了 指令类容更新 import Vue from 'vue' Vue.directive('mouse', { // 初始化 bind: function(el, binding, vnode) { }, // 被插入 inserted:function(el,
干掉nginx 403 forbidden报错
目录问题解决1. 设置启动用户owner2. 切换管理员模式3. 开放访问目录权限4. 明确index索引文件 问题按照网上的教程,我们顺利启动了默认80端口的nginx服务。具体安装教程可以参考:https://liuzhen.blog.csdn.net/article/details/83898155接下来,我们开始将它修改成自己的静态服务,但是遇到
JS 手撕-经典面试题
引言首先出这篇文章,一方面是为了记录巩固我所学的知识,明白面试的高频考点。不鼓励大家背题的,初衷是希望总结的一些面试题能帮助你查漏补缺,温故知新。这些题并不是全部,如果你还想看得更多,可以访问,目前已经有552道大厂真题了,涵盖各类前端的真题,欢迎加入我们一起来讨论~函数 call 语法:fn.call(obj,...args) 功
新手学习 React 迷惑的点
网上各种言论说 React 上手比 Vue 难,可能难就难不能深刻理解 JSX,或者对 ES6 的一些特性理解得不够深刻,导致觉得有些点难以理解,然后说 React 比较难上手,还反人类啥的,所以我打算写两篇文章来讲新手学习 React 的时候容易迷惑的点写出来,如果你还以其他的对于学习 React 很迷惑的点,可以在留言区里给我留言。为什么要引入 Reac
Binder Driver缺陷导致定屏的案例
本文讲解异步binder call是如何阻塞整个系统的,通过ramdump信息以及binder通信协议来演绎并还原定屏现场。 一、背景知识点解决此问题所涉及到的基础知识点有:Trace、CPU调度、Ramdump推导、Crash工具、GDB工具、Ftrace, 尤其深入理解binder IPC机制。 1.1 工具简介 Trace:分析死锁
Vue.js——60分钟快速入门
是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的。相比于Angular.js,Vue.js提供了更加简洁、更易于理解的API,使得我们能够快速地上手并使用Vue.js。
日常必备的JS工具函数大全
为元素添加on方法 Element.prototype.on Element.prototype.addEventListener; NodeList.prototype.on function (event, fn) 、 []['forEach'].call(this, function (el) el.on(ev
这样构建的用户画像!想不懂你的用户都难
导读: 产品研发团队犯的常见错误之一是对用户没有足够的了解,就开始提需求或设计产品。在收集到大量用户信息后,产品研发团队需要通过这些信息创建目标用户的画像,以便更深入地了解用户,进而实现以用户为中心设计产品。 在用户研究领域,用户画像的对应英文单词有两个,分别是User Profile和Persona。为了便于区分,我们将User Profile翻译成用户
搬迁声明
我的博客即将同步至 OSCHINA 社区,这是我的 OSCHINA ID:helloworld开发者社区,邀请大家一同入驻:https://www.oschina.net/sharingplan/apply
React事件绑定的几种方式
一、React事件是什么在react应用中,事件名都是用小驼峰格式进行书写,例如onclick要改写成onClick最简单的事件绑定如下:class ShowAlert extends React.Component   showAlert()      console.log("Hello World");      render()   
JAVA回调机制(CallBack)之小红是怎样买到房子的??
JAVA回调机制CallBack 序言最近学习java,接触到了回调机制(CallBack)。初识时感觉比较混乱,而且在网上搜索到的相关的讲解,要么一言带过,要么说的比较单纯的像是给CallBack做了一个定义。当然了,我在理解了回调之后,再去看网上的各种讲解,确实没什么问题。但是,对于初学的我来说,缺了一个循序渐进的过程。此处,将我对回调机制的个人理解,按