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指向。

应用场景：经常做继承。

var o = {

  name: 'andy'

}

function fn(a, b) {

  console.log(a + b);

}

fn.call(o, 1, 2);

// call 第一个可以调用函数 第二个可以改变函数内的this 指向

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

function Father(uname, age, sex) {

  this.uname = uname;

  this.age = age;

  this.sex = sex;

}

function Son() {

  Father.call(this, uname, age, sex);

}

 var son = new Son('刘德华', 18, '男');

apply( )方法

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

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

var o = {

  name: 'andy'

};

function fn(arr) {

  console.log(arr); // 'pink'

};

fn.apply(o, ['pink']);

// 1. 也是调用函数 第二个可以改变函数内部的this指向

// 2. 但是他的参数必须是数组(伪数组)

// 3. apply 的主要应用 比如说我们可以利用 apply 借助于数学内置对象求数组最大值

var arr = [1, 66, 3, 99, 4];

var arr1 = ['red', 'pink'];

var max = Math.max.apply(Math, arr);

var min = Math.min.apply(Math, arr);

console.log(max, min); // 99 1

bind方法

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

 var o = {

 name: 'andy'

 };

function fn(a, b) {

    console.log(this);

    console.log(a + b);

};

var f = fn.bind(o, 1, 2);  // 此处的f是bind返回的新函数

f(); // 调用新函数  this指向的是对象o 参数使用逗号隔开

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

<body>

  <button>点击</button>

  <button>点击</button>

  <button>点击</button>

  <script>

    var btns = document.querySelectorAll('button');

    for (var i = 0; i < btns.length; i++ ) {

      btns[i].onclick = function() {

        this.disabled = true;

        setTimeout(function() {

          this.disabled = false;

        }.bind(this), 2000);

      }

    }

  </script>

</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. 使用 Taro 开发鸿蒙原生应用 —— 当 Taro 遇到纯血鸿蒙

    纯血鸿蒙即将到来 在今年 8 月的「2023年华为开发者大会(HDC.Together)」上,华为正式官宣「鸿蒙Next」,这个更新的版本将移除所有的 AOSP 代码,彻底与 Android 切割,使 ...

  2. uniapp的下载

    简介 - HBuilderX 文档 (dcloud.net.cn) 下载Hbuiler 直接打开HbuilderX.exe就可以直接使用 可以通过他来创建模板 目录

  3. 14、Map

    1.Map的定义 map是Go中的内置类型,它将一个值与一个键关联起来.可以使用相应的键检索值.Map 是一种无序的键值对的集合.Map 最重要的一点是通过 key 来快速检索数据,key 类似于索引 ...

  4. Mybatis|MybatisPlus批量插入

    创建一个SpringBoot工程 <?xml version="1.0" encoding="UTF-8"?> <project xmlns= ...

  5. 使用代码生成工具快速开发应用-结合后端Web API提供接口和前端页面快速生成，实现通用的业务编码规则管理

    在前面随笔<在Winform应用中增加通用的业务编码规则生成>,我介绍了基于Winform和WPF的一个通用的业务编码规则的管理功能,本篇随笔介绍基于后端Web API接口,实现快速的Vu ...

  6. 华企盾DSC手机app注册保存成功登录时一直转圈

    可能是花生壳等映射软件不稳定,重启一下花生壳等工具

  7. 华企盾DSC防泄密系统造成应用程序卡慢、编译卡问题

    1.先看看个人模式是否正常,正常则跟进程有关加密nofile.不启用进程水印.不启用文件夹大小缓存(源码文件去掉需慎重)都关掉.允许进程间访问(procmon排查是否有其它进程访问) 2.检查是否与H ...

  8. 【Python】【OpenCV】视频帧和摄像头帧操作 and 窗口显示

    一.读取写入视频文件 1 import cv2 2 3 # 创建一个视屏捕获对象 4 videoCapture = cv2.VideoCapture('AVI.avi') 5 6 # 获取视频的属性值 ...

  9. 春秋云镜 - CVE-2022-28060

    Victor CMS v1.0 /includes/login.php 存在sql注入 找到页面的登录框,看介绍应该是post类型的表单注入. 上sqlmap用原本的梭发现ctf的那个表是空的,换用- ...

  10. DVWA File Inclusion（文件包含）全等级

    File Inclusion(文件包含) 目录: File Inclusion(文件包含) 前言 PHP伪协议 1.Low get webshell 本地文件包含 远程文件包含 2.Medium 3. ...