JS改变函数内部this的指向问题

最新推荐文章于 2022-11-03 22:12:09 发布

-Ali

最新推荐文章于 2022-11-03 22:12:09 发布

阅读量280

点赞数 1

分类专栏： js

本文链接：https://blog.csdn.net/weixin_47492981/article/details/106001103

版权

js 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

处理函数内部this的指向问题，常用的有call()、apply()、bind()三种方法。

1、call方法
作用：可以调用函数和改变函数内的this指向，call的主要作用是可以实现继承。
语法：fun.call(thisArg,arg1,ag2,…)

var o = {
   name:"andy"
}
function fn(a,b) {
   console.log(this);//此时this指向o（一开始this指向window）
   console.log(a + b);
}
fn.call(o,1,2);

2、apply方法
作用：可以调用函数和改变函数内的this指向。
语法：fun.apply(thisArg,[argsArray])

var o = {
   name:"andy"
}
function fn(arr) {
   console.log(this);
   console.log(arr);
}
fn.apply(o,["pink"]);

3、bind方法
不会调用原来的函数，但是能改变原来函数内部的this指向。
语法：fun.bind(thisArg,arg1,ag2,…)

var o = {
   name:"andy"
}
function fn(a,b) {
   console.log(this);
   console.log(a + b);
}
var f = fn.bind(o,1,2);//返回一个新函数，此时f里面存的是一个函数
f();//调用新函数，此时this指向o

call、apply、bind总结

相同点：都可以改变函数内部this的指向。

不同点：
(1)call和apply会调用函数，并且改变函数内部this的指向；
(2)call和apply传递的参数不一样，call传递参数aru1,aru2,…形式，apply必须使用数组形式[arg];
(3)bind不会调用函数，可以改变函数内部this的指向。

主要应用场景：
(1)call经常做继承；

function Father(name,age){
    this.name = name;
    this.age = age;
}
function Son(name,age){
     Father.call(this,name,age);//调用父构造函数，把父构造函数中的this改成了子构造函数中的this，此时son可以继承father中的属性
}
var son = new Son("张三",18);
console.log(son.name,son.age);

(2)apply经常跟数组有关系，比如借助于数学对象实现数组最大值和最小值；

var arr = [34,98,16,7,25];
var max = Math.max.apply(Math,arr);//求最大值
var min = Math.min.apply(Math,arr);//求最小值
console.log(max,min);

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

<body>
  <button>点击</button>
  <script>
     var btn = document.querySelector("button");
     btn.onclick = function() {
         this.disabled = true; //this指向的是btn按钮，此时禁用了按钮
         setTimeout(function() {
            this.disabled = false; 
         }.bind(this),3000) //bind(this)此时是在btn函数内部，即this指向的是btn
     }
  </script>
</body>

此时当我们点击了按钮之后就禁用这个按钮，3秒钟之后再开启这个按钮。
bind里面的this指向也可以写成bind(btn)，但是如果有多个按钮的话最好写成bind(this)。

-Ali

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
JS改变函数内部this的指向问题

处理函数内部this的指向问题，常用的有call()、apply()、bind()三种方法。1、call方法作用：可以调用函数和改变函数内的this指向，call的主要作用是可以实现继承。语法：fun.call(thisArg,arg1,ag2,…)var o = { name:"andy"}function fn(a,b) { console.log(this);//此时...
复制链接

扫一扫