javascript为我们专门提供了一些函数方法来帮我们更优雅的处理函数内部this的指向问题，常用的有bind( )、call( )、apply( )三种方法。

相同点：

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

区别点：

1、call和apply传递的参数不一样，call传递参数aru1， aru2... 形式，apply必须数组形式[arg]

2、bind不会调用函数，可以改变函数内部this指向

主要应用场景：

1、call经常做继承。

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

3、bind不会调用函数，可以改变函数内部this指向。

call方法

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

应用场景：经常做继承。

  1. var o = {
  2.   name: 'andy'
  3. }
  4. function fn(a, b) {
  5.   console.log(a + b);
  6. }
  7. fn.call(o, 1, 2);
  8. // call 第一个可以调用函数 第二个可以改变函数内的this 指向
  9. // call 的主要作用：可以实现继承
  10. function Father(uname, age, sex) {
  11.   this.uname = uname;
  12.   this.age = age;
  13.   this.sex = sex;
  14. }
  15. function Son() {
  16.   Father.call(this, uname, age, sex);
  17. }
  18.  var son = new Son('刘德华', 18, '男');

apply( )方法

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

应用场景：经常跟数组有关系

  1. var o = {
  2.   name: 'andy'
  3. };
  4. function fn(arr) {
  5.   console.log(arr); // 'pink'
  6. };
  7. fn.apply(o, ['pink']);
  8. // 1. 也是调用函数 第二个可以改变函数内部的this指向
  9. // 2. 但是他的参数必须是数组(伪数组)
  10. // 3. apply 的主要应用 比如说我们可以利用 apply 借助于数学内置对象求数组最大值
  11. var arr = [1, 66, 3, 99, 4];
  12. var arr1 = ['red', 'pink'];
  13. var max = Math.max.apply(Math, arr);
  14. var min = Math.min.apply(Math, arr);
  15. console.log(max, min); // 99 1

bind方法

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

  1.  var o = {
  2.  name: 'andy'
  3.  };
  4.  
  5. function fn(a, b) {
  6.     console.log(this);
  7.     console.log(a + b);
  8. };
  9. var f = fn.bind(o, 1, 2);  // 此处的f是bind返回的新函数
  10. f(); // 调用新函数  this指向的是对象o 参数使用逗号隔开

案例：我们有一个按钮，当我们点击了之后，就禁用这个按钮，3秒钟之后开启这个按钮

  1. <body>
  2.   <button>点击</button>
  3.   <button>点击</button>
  4.   <button>点击</button>
  5.   <script>
  6.     var btns = document.querySelectorAll('button');
  7.     for (var i = 0; i < btns.length; i++ ) {
  8.       btns[i].onclick = function() {
  9.         this.disabled = true;
  10.         setTimeout(function() {
  11.           this.disabled = false;
  12.         }.bind(this), 2000);
  13.       }
  14.     }
  15.   </script>
  16. </body>

改变函数内this指向方法——call、apply、bind的更多相关文章

  1. 函数内this指向+排序+找出数组大小项+Math类

    解决函数内this指向: 1,可以在函数外提前声明变量 _this/that = this 2,通过apply()和call()来修改函数内的this指向 二者区别: 用法是一样的,参数形式不一样 f ...

  2. mathAge.call(btn) 函数call 改变函数内 this #js

    mathAge.call(btn) 函数call 改变函数内 this

  3. this指向与call,apply,bind

    this指向与call,apply,bind ❝ 「this」问题对于每个前端同学来说相信都不陌生,在平时开发中也经常能碰到,有时候因为「this」还踩过不少坑,并且「this」问题在面试题中出现的概 ...

  4. this的指向问题 call apply bind 中的this

    在函数中this指向谁:     函数中的this指向谁,是由函数被调用的那一刻就确定下来的 平时确定一个函数中的this是谁,我们需要通过调用模式来确定 1. 函数调用模式 this ---> ...

  5. 函数的属性和方法， apply和call的区别及bind的使用

    ==>我的新博客中 http://www.suanliutudousi.com/2017/08/27/%E5%87%BD%E6%95%B0%E7%9A%84%E5%B1%9E%E6%80%A7% ...

  6. 作用域链和函数内部this指向问题以及bind、call、apply方法

    作用域链和函数内部this指向问题以及bind.call.apply方法 作用域链 作用域是相对于变量而言的, 其意义就在与查找变量(确定变量的来处, 变量是否可以访问到, 确定变量在当前位置是否可以 ...

  7. 函数高阶（函数，改变函数this指向，高阶函数，闭包，递归）

    一.函数的定义方式 1.函数声明方式 function  关键字(命名函数) 2.函数表达式(匿名函数) 3.new  Function( ) var  fn = new  Function(‘参数1 ...

  8. 如何改变函数内部 this 的指向

    一.函数内 this 的指向 1. this 的指向是当调用函数时确定的,调用的方式不同,this 的指向也就不同. 1.1 this 一般是指向调用者. 函数类型 this 的指向 普通函数 Win ...

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

    先学习下new操作符吧 new关键字调用函数的心路历程: 1.创建一个新对象 2.将函数的作用域赋给新对象(this就指向这个对象) 3.执行函数中的代码 4.返回这个对象 根据这个的思路,来实现一个 ...

  10. 2018/12.21：函数this的指向

    1.     解决函数内this指向 1.        可以在函数外提前声明变量 _this/that=this 2.        通过apply和call 来修改函数内的this指向 (1)   ...

随机推荐

  1. lua完整学习笔记

    lua注释 -- 单行注释 --[[ 多行注释 ]]-- lua数据结构 nil          无效值与Java的Null类似,但是在条件表示中是false boolean      布尔值,tu ...

  2. MySQL 分组排序后 → 如何取前N条或倒数N条

    开心一刻 晚上,老婆辅导女儿写语文作业 填空题:春天来了,__绿了 女儿:春天来了,爸爸绿了 老婆一脸不悦地问道:你再说一遍,春天来了,什么玩意绿了? 女儿:春天来了,爸爸绿了呀 老婆很生气,但依旧温 ...

  3. storeToRefs()的作用和使用

    store 是一个用 reactive 包装的对象,这意味着不需要在 getters 后面写 .value,就像 setup 中的 props 一样,如果你写了,我们也不能解构它: <scrip ...

  4. 混合专家模型 (MoE) 详解

    随着 Mixtral 8x7B (announcement, model card) 的推出,一种称为混合专家模型 (Mixed Expert Models,简称 MoEs) 的 Transforme ...

  5. 春秋云镜 - CVE-2022-32991

    靶标介绍: 该CMS的welcome.php中存在SQL注入攻击. 访问页面,先注册,使用邮箱加密码登录. bp抓包,后台挂上sqlipy然后去测welcome.php,常用的语句都没成功但过一会就有 ...

  6. ubuntu安装mysql8，debian安装mysql8，linux安装mysql8，x86_64架构，deb包

    作者主页:https://www.cnblogs.com/milkbox 参考: 修改大小写:MySQL8.0安装后更改不区分大小写!包你必生效!_mysql8.0不区分大小写-CSDN博客 整个安装 ...

  7. 文心一言 VS 讯飞星火 VS chatgpt （48）-- 算法导论6.1 6题

    值为<23,17,14,6,13,10,1,5,7,12>的数组是一个最大堆吗? 文心一言: 是的,这个数组是一个最大堆. 最大堆是一种特殊的二叉树,它满足以下性质:对于任意节点 x,其子 ...

  8. 实例讲解基于Sermant快速开发服务治理插件

    本文分享自华为云社区<Sermant框架下的服务治理插件快速开发及使用指南>,作者: 华为云开源 . Sermant是基于Java字节码增强技术的云原生无代理服务网格,它具有非侵入.插件化 ...

  9. 数据库的两个好帮手：pagehack和pg_xlogdump

    摘要:pagehack和pg_xlogdump可以帮助我们在数据库故障定位中,解析各种文件的页面头和xlog日志. 随着技术的演进,数据也发生了巨大的变化,数据规模越来愈大.数据种类呈现多样性,数据处 ...

  10. 8种桌面IDE CodeArts智能代码补全类型

    摘要:代码补全可以有效的提升开发效率.减少拼写错误和输入代码量.CodeArts 依赖于 codearts.smartassist-java-ls 插件实现代码补全功能. 本文分享自华为云社区< ...