JavaScript--this的指向及call、apply的区别

川长思鸟来 2022-05-17 02:08 132阅读 0赞

## 判断函数中this的指向 ##

我们在使用函数时，常常用到this，判断不同场景下this的指向是非常重要的。在此做一个总结，方便大家学习。

函数的使用场景，基本包含如下几种场景。

*  普通函数中的this-------window
 *  对象，方法中this------当前实例对象
 *  定时器函数中的this----window
 *  构造函数中的this------实例对象
 *  原型对象方法中的this-----实例对象

这个结果的分析其实非常简单，函数要想执行一定需要对象来调用（普通函数也一样）。

普通方法和定时器中的方法，看似没有对象来调用，他们都默认是window的方法，大家也知道在使用时，window又可以省略。

其余几种情况，不管是在对象的创建过程中，还是在对象中。这些方法最终都需要对象去调用，所以这些方法中的this都是指所在或者创建的对象。

## call（）、apply（）的作用及区别 ##

上边我们已经分析过函数中this的指向，也就是函数在执行时this代表的是谁。而call和apply的作用就是改变函数执行过程中this的指向，他们两个的作用完全一样，只是在使用方式上稍有差别。

### 以普通方法为例来分析call（）的作用： ###

var name = "小明";
    			function text(){
    				console.log(this.name);
    			}
    			text();//小明

根据上边的分析，我们知道普通方法在执行时，默认为window在调用，那么在方法中this就是window。

this.name===window.name,所以输出的小明。

var name = "小明";
    			function text(){
    				console.log(this.name);
    			}
    			text();//小明
    			var person = {
    				name:"小红"
    			}
    			text.call(person);//小红

当要执行text方法时，我们使用了text.call(person)的方式，这时函数还是正常执行，只是此时函数中的this不管原来是谁，都变成了person，所以输出this.name就是输出person.name;

### call()和apply（）的区别： ###

函数有带参函数，call和apply的差别就是在传入参数时的方式不同。call是一个一个的传，而apply是将参数以数组为单位传入函数。还是上边的例子，我们把它改为带参函数。

var name = "小明";
    			function text(age){
    				console.log(this.name);
    				console.log(age)
    			}
    			text(18);//小明 18
    			var person = {
    				name:"小红"
    			}
    			text.call(person,18);//小红 18

var name = "小明";
    			function text(age){
    				console.log(this.name);
    				console.log(age)
    			}
    			text(18);//小明 18
    			var person = {
    				name:"小红"
    			}
    			text.apply(person,[18]);//小红 18

这就是call 和apply的区别，只是在传参方式不同。