当前位置:首页 > JS > JavaScript中的apply,call与this的区别

JavaScript中的apply,call与this的区别

我们都知道js是弱类型的语言,调试起来非常的不方便,今天给大家讲解下JavaScript中的apply,call与this的区别以及它们的一些用法。

javascript

1.apply定义

apply:调用函数,并用指定对象替换函数的 this 值,同时用指定数组替换函数的参数。
语法:apply([thisObj[,argArray]])
thisObj
可选。要用作 this 对象的对象。

argArray
可选。要传递到函数的一组参数。

2.call定义

call:调用一个对象的方法,用另一个对象替换当前对象。
语法:call([thisObj[, arg1[, arg2[, [, argN]]]]])
thisObj
可选。将作为当前对象使用的对象。

arg1, arg2, , argN
可选。将被传递到该方法的参数列表。

3.二者区别

call 的第二个参数可以是任意类型,而apply的第二个参数必须是数组,也可以是arguments。
定义也是有差别的。

4.实例分析

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
function callMe(arg1, arg2){
    var s = "";
 
    s += "this value: " + this;
    s += "<br />";
    for (i in callMe.arguments) {
        s += "arguments: " + callMe.arguments[i];
        s += "<br />";
    }
    return s;
}
 
document.write("Original function: <br/>");
document.write(callMe(1, 2));
document.write("<br/>");
 
document.write("Function called with apply: <br/>");
document.write(callMe.apply(3, [ 4, 5 ]));
document.write(callMe.call(3,  4, 5 ));
// Output: // Original function: // this value: [object Window] // arguments: 1 // arguments: 2 // Function called with apply: // this value: 3 // arguments: 4 // arguments: 5

第一个用apply的:定义:调用函数,并用指定对象替换函数的 this 值
调用函数callMe,使用指定的对象3替换callMe函数中的this,这时候这里的this就从之前的[object Window]变成了3。
第一个用call的:定义:调用一个对象的方法,用另一个对象替换当前对象。
调用对象callMe的方法,用另一个对象3替换callMe中的对象。
从这些结果分析中可以看出,这两者都是使用指定的对象中的对象或者指定的值改变了对象中的this。
也可以说:是一个函数中的对象(this)”劫持”了另一个要执行函数中的对象(this)。
其实这里引出了一个问题:this到底是啥?为何如此重要的一次次来费劲心思的来改变它的指向?

(2)实例:

1
2
3
4
5
6
7
8
9
10
11
function zqz(a,b){
    return alert(a+b);
}
 
function zqz_1(a,b){
 
    zqz.apply(zqz_1,[a,b])
}
 
 
zqz_1(1,2)    //->3

分析:根据定义:调用函数,并用指定对象替换函数的 this 值,
这里调用函数zqz,并用指定的对象zqz_1替换zqz函数的this值。

要注意js中的函数名其实是对象,因为函数名是对Funtion对象的引用!

1
2
3
4
5
6
7
8
9
function add(a, b)
{
  alert(a + b);
}
function sub(a, b)
{
  alert(a - b);
}
add.call(sub, 3, 1); // 4

分析:根据定义:调用一个对象的方法,用另一个对象替换当前对象。
这里就是调用对象add的方法,并用add对象替换当前对象sub;

再来一个例子:

1
2
3
4
5
6
7
8
9
10
11
12
13
function zqz(a,b){
    this.name=a;
    this.age=b;
    alert(this.name+" "+this.age);
}
 
function zqz_1(a,b){
 
    zqz.apply(this,[a,b])     //我们亦可以这么写    zqz.apply(this,arguments)  
}
 
 
zqz_1("Nic",12)    //Nic 12

分析:根据定义:调用函数,并用指定对象替换函数的 this 值,
这里调用函数zqz,使用指定的对象this替换函数zqz的this。

javascript

再来一个例子:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<input type="text" id="myText"   value="input text">
 
function Obj(){
    this.value="对象!";
}
 
var value="global 变量";
 
function Fun1(){
    alert(this.value);
}
 
 
Fun1();   //global 变量
 
Fun1.call(window);  //global 变量
 
Fun1.call(document.getElementById('myText'));  //input text
 
Fun1.call(new Obj());   //对象!
 
Fun1(); //global 变量

代码总结

分析:定义:调用一个对象的方法,用另一个对象替换当前对象。
调用Fun1对象的方法,用window对象替换当前Fun1中的对象。
调用Fun1对象的方法,用input中对象替换当前Fun1中的对象。
调用Fun1对象的方法,用新new出来的obj中的对象替换当前Fun1中的对象。

  • << C# Async/Await学习
  • 深入理解MVC和MVVM >>
  • 作者:
    除非注明,本文原创:知道91,欢迎转载!转载请以链接形式注明本文地址,谢谢。
    原文链接:http://www.zhidao91.com/javascript-this/

    相关文章 近期热评 最新文章

    • JSON与OC互相转换
      JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。它基于ECMAScript的一个子集。这些特性使JSON成为理想的数据交换语言。 易于人阅读和编写,同时也易于...
    • JavaScript之命名空间
      在JavaScript中,命名空间可以帮助我们防止与全局命名空间下的其他对象或变量产生冲突。命名空间也有助于组织代码,有更强的可维护性和可读性。
    • C#和js读取文件的MD5值
      现在网络上流行的加密方法有两种,一种是MD5一种就是sha1了,最火的还是MD5了,文件的md5是唯一的,怎么去获取文件的MD5的值呢?
    • JavaScript设计模式 - 策略模式
      策略模式定义了一系列的算法,并将每一个算法封装起来,而且使它们还可以相互替换。策略模式让算法独立于使用它的客户而独立变化。
    • 开发文档的重要性
      软件开发文档是软件开发使用和维护过程中的必备资料。它能提高软件开发的效率,保证软件的质量,而且在软件的使用过程中有指导,帮助,解惑的作用,尤其在维护工作中,...
    • 在WPF中使用PDF文件
      XAML提供了一种便于扩展和定位的语法来定义和程序逻辑分离的用户界面,而这种实现方式和ASP.NET中的"代码后置"模型非常类似。
    • oracle数据库相关操作注意事项
      修改Oracle SGA(共享内存) 很多网站说修改Oracle的内存通过命令 如果你这么做了,那么恭喜你,你的Oracle数据库无法启动了。如果你已经这么做了,恢复Oracle启动的方...
    • 使用微信JDK实现微信接口签名验证
      要使用微信的接口必须在绑定的域名下测试;签名必须先向微信请求到access_token,然后用access_token再去请求jsapi_ticket,最后用jsapi_ticket和相关的参数按照ASCII码...
    • ABP开发指南系列教程(2) – 多层架构...
      为了减少复杂性和提高代码的可重用性,采用分层架构是一种被广泛接受的技术。为了实现分层的体系结构,ABP遵循DDD(领域驱动设计)的原则,将工程分为四个层: 展现层(...
    • ABP开发指南系列教程(1) – 入...
      ABP是“ASP.NET Boilerplate Project (ASP.NET样板项目)”的简称。 ASP.NET Boilerplate是一个用最佳实践和流行技术开发现代WEB应用程序的新起点,它旨在成为一个通用的WE...
    • Windows下 JIRA + Agile + Mysql 破解...
      本文讲述了Windows下 JIRA + Agile + Mysql 破解安装示例教程
    • c#类的构造函数继承关系示例剖析
      本文通过示例代码讲解了c#子类的构造函数与父类的关系,子类怎样集成父类的构造函数的。