apply 与 call 详细深入理解

Hegel_Gu 发布于2019-08-23 17:12 / 3612人阅读

apply 与 call 介绍

function f1(x, y) {
    console.log("结果是：" + (x + y) + this);
}
f1(10, 20); //函数的调用
// 结果是：30[object Window]

// 此时的 f1 实际上是当作对象来使用的，对象可以调用方法
f1.apply();  // 结果是：NaN[object Window]
f1.call();   // 结果是：NaN[object Window]

f1.apply(null);  // 结果是：NaN[object Window]
f1.call(null);  // 结果是：NaN[object Window]

apply 和 call 方法中如果没有传入参数，或者传入的是null，那么调用该方法的函数对象中的 this 就是默认的 window

apply 和 call 都可以让函数或者方法来调用，传入参数和函数自己调用的写法不一样，但是效果是一样的。

f1.call(null,10,20);  // 结果是：30[object Window]
f1.apply(null,[10,20]);  // 结果是：30[object Window]

基本使用

function f2(x, y ){
    console.log("结果："+(x+y)+"  "+ this.age );
}
window.f2(10, 20);  //结果：30  undefined
// obj是一个对象
var obj = {
    age: 10,
    sex: "男"
};
window.f2.apply(obj,[10, 20]);  //结果：30  10
window.f2.call(obj,10,20);  //结果：30  10
console.dir(obj);  // age: 10 sex: "男"

apply与call的作用：改变this的指向

apply 和 call可以改变 this 的指向

例子1：用于方法

function Person(age, sex){
    this.age = age;
    this.sex = sex;
}
//通过原型添加方法
Person.prototype.sayHi=function(){
    console.log("您好呀："+this.sex);
}
var per = new Person(10,"男");
per.sayHi(); // 您好呀：男

function Student(name, sex){
    this.name = name;
    this.sex = sex;
}
var stu=new Student("小明", "女");
per.sayHi.apply(stu); // 您好呀：女
per.sayHi.call(stu);  // 您好呀：女
// stu 没有 sayHi()，但是通过apply或call可以让它调用per的sayHi().

例子2：用于函数

function f(x, y){
    console.log("结果是："+(x+y)+"  "+this);
    return "此时的this是"+this;
}
// apply和call调用
var r1=f.apply(null,[1,2]); // 此时f中的this是window
console.log(r1);
//结果是：3  [object Window]
// 此时的this是[object Window]
var r2=f.call(null,1,2); // 此时f中的this是window
console.log(r2);
 //结果是：3  [object Window]
// 此时的this是[object Window]

// 改变this的指向
var obj={
    sex: "男"
}
// 本来f函数是window对象的，但是传入obj之后，f函数就是obj对象的
var r3=f.apply(obj,[1,2]); // 此时f中的this是obj
console.log(r3);
// 结果是：3  [object Object]
// 此时的this是[object Object]
var r4=f.call(obj,1,2); // 此时f中的this是obj
console.log(r4);
// 结果是：3  [object Object]
// 此时的this是[object Object]

apply和call的使用方法总结 apply的使用方法：

函数名字.apply(对象，[参数1，参数2，...]);
方法名字.apply(对象，[参数1，参数2，...]);

call的使用方法：

函数名字.call(对象，参数1，参数2，...);
方法名字.call(对象，参数1，参数2，...);

apply与call的不同：

参数传递的方式是不一样的

使用场景

只要是想使用别的对象的方法，并且希望这个方法是当前对象的，那么就可以使用apply或者是call的方法改变this的指向。

apply和call方法实际上并不在函数这个实例对象中，而是在Function的prototye中。

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/103979.html

JS程序

摘要：设计模式是以面向对象编程为基础的，的面向对象编程和传统的的面向对象编程有些差别，这让我一开始接触的时候感到十分痛苦，但是这只能靠自己慢慢积累慢慢思考。想继续了解设计模式必须要先搞懂面向对象编程，否则只会让你自己更痛苦。 JavaScript 中的构造函数学习总结。知识只有分享才有存在的意义。是时候替换你的 for 循环大法了~ 《小分享》JavaScript中数组的那些迭代方法~ ...

melody_lql 2019-08-22 11:22 评论0 收藏0
从Ecma规范深入理解this

摘要：本文总结了的各种情况，并从规范的角度探讨了的具体实现，希望对大家理解有所帮助。规范规范里面详细介绍了的实现细节，通过阅读规范，我们可以更准确的理解上述四种情况到底是怎么回事。由于本人能力有限，如有理解错误的地方还望指出。 this是面向对象编程中的一个概念，它一般指向当前方法调用所在的对象，这一点在java、c++这类比较严格的面向对象编程语言里是非常明确的。但是在javascript...

rottengeek 2019-08-22 10:58 评论0 收藏0
深入浅出JavaScript之call()、apply()方法

摘要：的作用在中，方法和方法都是为了改变函数运行时上下文而存在的，换句话说就是为了改变函数体内部的指向。欢迎前端大牛纠正错误，如有错误我会及时改正。写在前面：隔了很长时间了，也不知道写点什么。最近一直在研究ES6，一直想写出来的文章能对初学者或者是在学习JS路上有所帮助的。这就是我的初衷。 call、apply的作用在JavaScript中，call()方法和apply()方法都是为了...

Cympros 2019-08-20 14:16 评论0 收藏0
学习JavaScript之this,call,apply

摘要：在全局对象中调用，自然读取的是全局对象的值构造器调用说明作为构造器调用时，指向返回的这个对象。最直观的表现就是，去看一些优秀框架的源代码时，不再是被绕的晕乎乎的。学习起因：在之前的JavaScript学习中，this,call,apply总是让我感到迷惑，但是他们的运用又非常的广泛。遂专门花了一天，来弄懂JavaScript的this,call,apply。中途参考的书籍也很多，以...

wenhai.he 2019-08-19 17:30 评论0 收藏0
JavaScript深入浅出

摘要：理解的函数基础要搞好深入浅出原型使用原型模型，虽然这经常被当作缺点提及，但是只要善于运用，其实基于原型的继承模型比传统的类继承还要强大。中文指南基本操作指南二继续熟悉的几对方法，包括，，。商业转载请联系作者获得授权，非商业转载请注明出处。怎样使用 this 因为本人属于伪前端，因此文中只看懂了 8 成左右，希望能够给大家带来帮助....（据说是阿里的前端妹子写的） this 的值到底...

blair 2019-08-21 18:26 评论0 收藏0