为什么需要this
在常见的编程语言中,几乎都有this这个关键字(Objective-C中使用的是self),但是JavaScript中的this和常见的面向对象语言中的this不太一样:
常见面向对象的编程语言中,比如Java、C++、Swift、Dart等等一系列语言中,this通常只会出现在类的方法中。
也就是你需要有一个类,类中的方法(特别是实例方法)中,this代表的是当前调用对象。但是JavaScript中的this更加灵活,无论是它出现的位置还是它代表的含义。
this指向什么呢?
我们先说一个最简单的,this在全局作用域下指向什么?
这个问题非常容易回答,在浏览器中测试就是指向window
在node环境中this在全局作用域下指向一个空对象
但是,开发中很少直接在全局作用域下去使用this,通常都是在函数中使用。所有的函数在被调用时,都会创建一个执行上下文:
这个上下文中记录着函数的调用栈、AO对象等;
this也是其中的一条记录;
我们先来看一个现象:
定义一个函数,我们采用三种不同的方式对它进行调用,它产生了三种不同的结果
这个案例说明什么呢?
1.函数在调用时,JavaScript会默认给this绑定一个值;
2.this的绑定和函数定义的位置(编写的位置)没有关系;
3.this的绑定和函数调用方式以及调用的位置有关系;
4.this是在运行时被绑定的;
那么this到底是怎么样的绑定规则呢?一起来学习一下吧
规则一:默认绑定;
规则二:隐式绑定;
规则三:显示绑定;
规则四:new绑定;
规则一:默认绑定
什么情况下使用默认绑定呢?独立函数调用
独立的函数调用我们可以理解成函数没有被绑定到某个对象上进行调用;
我们通过几个案例来看一下,常见的默认绑定
也就是说,当函数的调用没有调用主体的时候,函数中的this采用默认绑定,这时候函数中的this指向window
这里解释一下案例三:这里把obj.bar传入foo函数中,相当于foo函数中的func参数其实就是bar函数了,func()其实是在调用bar函数,而func()这里并没有调用主体,划重点:只跟函数调用的位置有关系,跟函数定义的位置没关系(虽然这里bar函数定义在obj里面,但是和定义的位置无关,和调用的位置func()有关)
规则二:隐式绑定
另外一种比较常见的调用方式是通过某个对象进行调用的:
也就是它的调用位置中,是通过某个对象发起的函数调用。
我们通过几个案例来看一下,常见的默认绑定
解释:这里的案例二中this是obj1,因为最后一行代码的foo函数是通过obj1给调起来的
案例三中的this是window,因为最后一行代码的bar调用时独立的函数调用
规则三:显示绑定
隐式绑定有一个前提条件:
必须在调用的对象内部有一个对函数的引用(比如一个属性);
如果没有这样的引用,在进行调用时,会报找不到该函数的错误;
正是通过这个引用,间接的将this绑定到了这个对象上;
如果我们不希望在 对象内部 包含这个函数的引用,同时又希望在这个对象上进行强制调用,该怎么做呢?
JavaScript所有的函数都可以使用call和apply方法(这个和Prototype有关)。
它们两个的区别这里先不展开;
其实非常简单,第一个参数是相同的,后面的参数,apply为数组,call为参数列表;
这两个函数的第一个参数都要求是一个对象,这个对象的作用是什么呢?就是给this准备的。
在调用这个函数时,会将this绑定到这个传入的对象上。
因为上面的过程,我们明确的绑定了this指向的对象,所以称之为 显示绑定
call、apply、bind
通过call或者apply绑定this对象
显示绑定后,this就会明确的指向绑定的对象
如果我们希望一个函数总是显示的绑定到一个对象上,可以怎么做呢?
规则四:new绑定
JavaScript中的函数可以当做一个类的构造函数来使用,也就是使用new关键字。
使用new关键字来调用函数时,会执行如下的操作:
1.创建一个全新的对象;
2.这个新对象会被执行prototype连接;
3.这个新对象会绑定到函数调用的this上(this的绑定在这个步骤完成);
4.如果函数没有返回其他对象,表达式会返回这个新对象;
内置函数绑定的思考
有些时候我们会调用一些JavaScript的内置函数,或者一些第三方的内置函数,这些函数要求我们传入另一个函数。我们自己并不会显示的调用这些函数,而是JavaScript内部或者第三方库内部会帮助我们执行。这些函数中的this又是如何绑定的呢?
setTimeout、数组的forEach、div的点击
规则优先级
学习了四条规则,接下来开发中我们只需要去查找函数的调用应用了哪条规则即可,但是如果一个函数调用位置应用了多条规则,优先级谁更高呢?
默认规则的优先级最低(也就是独立函数调用的this绑定)
毫无疑问,默认规则的优先级是最低的,因为存在其他规则时,就会通过其他规则的方式来绑定this
2.显示绑定优先级高于隐式绑定 3.new绑定优先级高于隐式绑定
4.new绑定优先级高于bind
new绑定和call、apply是不允许同时使用的,所以不存在谁的优先级更高
new绑定可以和bind一起使用,new绑定优先级更高
this规则之外 – 忽略显示绑定
我们讲到的规则已经足以应付平时的开发,但是总有一些语法,超出了我们的规则之外。
如果在显示绑定中,我们传入一个null或者undefined,那么这个显示绑定会被忽略,使用默认规则:
另外一种情况,创建一个函数的 间接引用,这种情况使用默认绑定规则
赋值(obj2.foo = obj1.foo)的结果是foo函数;
foo函数被直接调用,那么是默认绑定;
解释一下最后一行代码:这里前面小括号里的赋值操作是取出obj1里的foo函数赋值给obj2里的foo,完了之后会返回一个新的函数的,后面的括号实际上是对返回的新的函数进行调用了,所以是个独立的函数调用,所以结果是window了
this规则之外 - ES6箭头函数
在ES6中新增一个非常好用的函数类型:箭头函数
箭头函数不使用this的四种标准规则(也就是不绑定this),而是根据外层作用域来决定this。
可以看出来无论怎么调用,箭头函数都是不会应用绑定规则的,而是根据外层作用域来决定this。