JavaScript中call,apply,bind方法的区别

最新推荐文章于 2022-05-30 22:15:34 发布

杏黄的三叶草

最新推荐文章于 2022-05-30 22:15:34 发布

阅读量79

点赞数

分类专栏： Web前端JavaScript

本文链接：https://blog.csdn.net/dwjdj/article/details/104504645

版权

Web前端JavaScript 专栏收录该内容

40 篇文章 0 订阅

订阅专栏

相同点
- 在JavaScript中，这三个方法都是用来改变this的指向的
- 传入的第一个参数都是用来改变this的指向，将this指向该对象
- 都可以用后续参数传参
- 既可以被函数调用，也可以被方法调用
不同点
- 传入参数的方法不一样
  - apply的使用方法:
    - 函数名字.apply(对象,[参数1,参数2…]);
    - 对象.方法名字.apply(对象,[参数1,参数2…]);
  - call的使用方法:
    - 函数名字.call(对象,参数1,参数2…);
    - 对象.方法名字.call(对象,参数1,参数2…);
  - bind的使用方法:
    - 函数名字.bind(对象,参数1,参数2…);返回值是复制之后的这个函数
    - 对象.方法.bind(对象,参数1,参数2…);返回值是复制之后的这个方法

  // 函数指向改变
    function f1(x,y) {
        console.log((x+y)+":===>"+this);
        return "这是函数的返回值";
    }
    //apply和call调用
    var r1=f1.apply(null,[1,2]);//此时f1中的this是window
    console.log(r1);
    var r2=f1.call(null,1,2);//此时f1中的this是window
    console.log(r2);
    console.log("=============>");
    //改变this的指向
    var obj={
        sex:"男"
    };
    //本来f1函数是window对象的,但是传入obj之后,f1函数此时就是obj对象的
    var r3=f1.apply(obj,[1,2]);//此时f1中的this是obj
    console.log(r3);
    var r4=f1.call(obj,1,2);//此时f1中的this是obj
    console.log(r4);

 //方法指向改变
    function Person(age) {
        this.age = age;
    }
    Person.prototype.sayHi = function (x, y) {
        console.log((x + y) + ":====>" + this.age);//是实例对象
    };

    function Student(age) {
        this.age = age;
    }
    var per = new Person(10);//实例对象
    var stu = new Student(100);//实例对象
    //sayHi方法是per实例对象的
    per.sayHi.apply(stu, [10, 20]);//30:====>100
    per.sayHi.call(stu, 10, 20);//30:====>100
    per.sayHi(10,20);//30:====>10

调用的方式不同
- apply和call方法是在调用的时候改变this的指向
- bind方法是在复制的时候改变this的指向
- bind方法是将函数复制一份返回，参数可以在复制的时候传进去，也可以在复制之后调用的时候传进去

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    function f1(x, y) {
        console.log((x + y) + ":=====>" + this.age);
    }
    var ff=f1.bind(null);
    ff(12,23);

    function Person(age) {
        this.age=age;
    }
    Person.prototype.play=function () {
        console.log(this+"========>"+this.age);
    };
    function Student(age) {
        this.age=age;
    }
    var per=new Person(20);
    var stu=new Person(18);
    //复制了一份
    var fy=per.play.bind(per);
    fy();//20
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    function MathRandom() {

    }
    MathRandom.prototype.random=function () {
        console.log(parseInt(Math.random()*10+1));
    };
    MathRandom.prototype.show=function () {
        // window.setInterval(function () {
        //     this.random();
        // }.bind(this),1000);
        setInterval(this.random.bind(this),1000)
    };
    var show=new MathRandom();
    show.show();
</script>
</body>
</html>

在定时器setInterval方法中，如果要改变this的指向，就只能用bind了，因为定时器方法中的第一个参数是一个回调函数，也只有使用bind方法才返回一个函数，而apply和call方法使用时，这个函数就已经执行了，不再返回参数了。

杏黄的三叶草

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript中call,apply,bind方法的区别

相同点在JavaScript中，这三个方法都是用来改变this的指向的传入的第一个参数都是用来改变this的指向，将this指向该对象都可以用后续参数传参既可以被函数调用，也可以被方法调用不同点传入参数的方法不一样apply的使用方法:函数名字.apply(对象,[参数1,参数2…]);对象.方法名字.apply(对象,[参数1,参数2…]);call的使用方...
复制链接

扫一扫

专栏目录