改变函数内this指向方法——call、apply、bind

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>
复制代码
posted @   鼓舞飞扬  阅读(288)  评论(0)  编辑  收藏  举报
编辑推荐：
· AI与.NET技术实操系列：基于图像分类模型对图像进行分类
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
阅读排行：
· 25岁的心里话
· 闲置电脑爆改个人服务器（超详细） #公网映射 #Vmware虚拟网络编辑器
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· 零经验选手，Compose 一天开发一款小游戏！
· 一起来玩mcp_server_sqlite，让AI帮你做增删改查！！
点击右上角即可分享
微信分享提示