搜索
您的当前位置:首页JavaScript之call和apply

JavaScript之call和apply

时间:2020-11-27 来源:乌哈旅游
要想深入的去学习JavaScript语言,有一个很重要的知识点,就是对“call()”和“apply()”的理解,有时候我们在看别人、或者是一些开源框架的源代码的时候,也是大量出现这两个方法,那这两个方法是干嘛的,到底有什么作用?本文主要内容就是对这两个方法的深入探讨。在讲这两个方法之前,我们还是有必要去回顾一下JavaScript中一个必须要掌握的知识点,那就是“this”,因为“call”和“apply”与“this”有着密切的联系。

一、this是什么

在面向对象中,比如说Java,this代表的是当前对象的引用。而在JavaScript中,this不是固定不变的,而是随着它的执行环境的改变而改变。总结一句:this总是指向调用它所在方法的对象。this的用法一般有以下几种,我分别列出来:

1、 this 在函数里面

在这种方式中,我也称之为“全局性的函数调用”。代码如下:

JavaScript高级之call和apply的使用

图1:this之全局性函数调用

通过结果可以看出来,函数test()内部的this指向的是全局对象,在本例中,全局对象是window。为了更能充分的证明本例中this就是window,把代码稍作调整如下:

JavaScript高级之call和apply的使用

图2:this之全局性函数调用改进

通过结果可以更加证明了全局的name在函数内部被修改了,因为这个函数内部的this指的就是window。

总结:对于全局性函数调用,函数内部的this就是指的全局对象window,即是:this是调用函数所在的对象。实际上这个test()函数是由全局对象window来去调用的,那么函数内部的this当然就指的是window。

2、this 在构造函数里

下面通过代码分析:

JavaScript高级之call和apply的使用

图3:this之构造函数调用

分析:我们通过new关键字创建一个对象的实例,可以发现new关键字改变了this的指向,将这个this指向了对象person。在构造函数内部,我们对this.name=“HelloWorld”进行重新赋值,并没有改变全局变量name的值。

总结:声明一个构造函数的实例对象时,构造函数内部的this都会指向新的实例对象,或者说,构造函数内部的this指向的是新创建的对象本身。

3、在对象的方法中调用

下面通过代码分析:

JavaScript高级之call和apply的使用

图4:this之对象方法的调用

总结:当person对象调用info()函数时,info函数内部的this指向的就是person对象。即,当this出现在对象的方法中时,那么该方法内部的this指向的就是这个对象本身,也就是说this指向的调用函数的对象。

Top