JavaScript中apply和call方法的使用

最新推荐文章于 2023-02-13 19:21:43 发布

杏黄的三叶草

最新推荐文章于 2023-02-13 19:21:43 发布

阅读量179

点赞数

分类专栏： Web前端JavaScript

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

版权

Web前端JavaScript 专栏收录该内容

40 篇文章 0 订阅

订阅专栏

    * apply和call方法的作用:用来改变this的指向
    * apply和call方法中如果没有传入参数，或者传入的是null，那么调用该方法的函数对象中this的指向为window(默认)
    * apply和call都可以让函数或者方法来调用，传入的参数和函数调用的写法不同，但是效果是一样的
    * 如果传入的不是null，而是其他对象，那么就将this指向了该传入的非null对象

<!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);
        return "10000";
    }
    f1(10, 20);//函数的调用
    console.log("========");
    // 此时的f1实际上是当成对象来使用的,对象可以调用方法
    // apply和call方法也是函数的调用的方式
    f1.apply();
    f1.call();
    console.log("==========");
    f1.apply(null);
    f1.call(null);

    f1.apply(null, [100, 200]);
    f1.call(null, 100, 200);

    // 函数调用改变this的指向
    function f1(x, y) {
        console.log("这个函数是window对象的一个方法:" + (x + y) + this.sex);
    }
    window.f1(10, 20);
    //obj是一个对象
    var obj = {
        age: 10,
        sex: "男"
    };
    window.f1.apply(obj, [10, 20]);
    window.f1.call(obj, 10, 20);
    console.dir(obj);

    //对象的方法调用改变this的指向
    function Person(age, sex) {
        this.age = age;
        this.sex = sex;
    }

    //通过原型添加方法
    Person.prototype.sayHi = function (x, y) {
        console.log("您好啊:" + this.sex);
        return 1000;
    };
    console.log(Person.prototype);
    var per = new Person(10, "男");
    per.sayHi();
    console.log("==============");

    function Student(name, sex) {
        this.name = name;
        this.sex = sex;
    }

    var stu = new Student("小明", "人妖");
    var r1 = per.sayHi.apply(stu, [10, 20]);
    var r2 = per.sayHi.call(stu, 10, 20);
    console.log(r1);
    console.log(r2);
</script>
</body>
</html>

apply和call方法的总结

  * apply和call的使用方法
    * apply的使用方法:
    *     函数名字.apply(对象,[参数1,参数2...]);
    *     对象.方法名字.apply(对象,[参数1,参数2...]);
    * call的使用方法:
    *     函数名字.call(对象,参数1,参数2...);
    *     对象.方法名字.call(对象,参数1,参数2...);
    * 作用:改变this的指向
    * 使用场景:
    *     只要是想用别的对象的方法，并且希望这个方法是当前对象的，那么就可以使用apply或者call方法改变this的指向

apply和call方法到底是谁的

* 所有的函数但是Function构造函数的实例对象
* 所以call和apply方法是Functionn中的prototype中的方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    function f1() {
        console.log(this+":====>调用了");
    }
    //f1是函数,f1也是对象
    console.dir(f1);
    //对象调用方法,说明,该对象中有这个方法
    f1.apply();
    f1.call();
    //说明所有的函数但是Function的实例对象
    console.log(f1.__proto__==Function.prototype);
    console.log(Function.prototype);//ƒ () { [native code] }
    console.dir(Function);//该构造函数的原型方法中有apply和call方法
    //apply和call方法实际上并不在函数这个实例对象中,而是在Function的prototype中
    //实例对象调用方法，要么是在实例对象中，要么是在构造函数的原型对象中
</script>
</body>
</html>

杏黄的三叶草

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript中apply和call方法的使用

* apply和call方法的作用:用来改变this的指向 * apply和call方法中如果没有传入参数，或者传入的是null，那么调用该方法的函数对象中this的指向为window(默认) * apply和call都可以让函数或者方法来调用，传入的参数和函数调用的写法不同，但是效果是一样的 * 如果传入的不是null，而是其他对象，那么就将this指向了该传入的...
复制链接

扫一扫

专栏目录