在说this的指向性问题之前,咱们先说一下函数的调用位置,调用位置就是函数在代码中被调用的位置。
1、下面我们来看看什么是调用位置和调用栈:
因此调用的位置决定了this的绑定。
2、绑定的规则
2.1默认绑定
在代码中,foo()是直接使用不带任何修饰的函数引用进行调用的,因此只能使用默认绑定,如上图
上图是在调用的时候有修饰的函数引用,所以没有找到this的指向,那么我们怎么改能找到this的指向呢?这个时候需要用到call()或者apply来改变this的指向,在for循环中调用的时候改成foo.call(foo,i);来指定this是指向foo函数的。
以上是非严格模式下的this的指向性问题,那在严格模式下,全局对象将无法使用默认绑定,因此this会绑定到undefined.
2.2隐式绑定
调用位置是否有上下文对象,或者说是否被某个对象拥有或者包含。
当foo()被调用的时候,它的落脚点确实是指obj对象。当函数引用有上下万文对象时,隐式绑定规则会把函数调用中的this绑定到这个上下文对象,因为调用foo()时this被绑定到obj,因此this.a和obj.a是一样的。
对象属性引用连中只有最顶层或者说是最后一层会影响调用位置。
隐式丢失
一个最常见的this绑定问题就是被隐式绑定的函数会丢失绑定对象,也就是说他它会应用默认绑定,从而把this绑定到全局对象或者undefined上,取决于是否是严格模式。
bar()其实是一个不带任何修饰的函数调用,因此引用了默认绑定,他的输出是全局的a变量中的值,不是2.
还有一种更微妙的情况就是传入回调函数时。
回调函数丢失this绑定是非常常见的,调用回调函数的函数可能会修改this,this的改变都是意想不到的,实际上你无法控制回调函数的执行方式,因此就没有办法控制会影响绑定的位置。
2.3显示绑定
this的显示绑定可以使用call()和apply()方法,他们的第一个参数是对象,他们会把这个对象绑定到this,接着在调用函数时指向这个this,因为可以直接指向this所以的绑定对象,所以称之为显示绑定。
1、硬绑定
显示绑定的一个变种可以解决丢失绑定的问题。
foo的this绑定到了obj,无论之后如何调用函数bar,它总会手动在obj上调用foo,这种绑定是一种显示的强制绑定,因此我们称之为硬绑定。
硬绑定的典型就是应用场景就是创建一个包裹函数,传入所有的参数并返回接收到的所有值。
由于硬绑定是一种非常很常用的模式,所以es5中提供了内置的方法FUN抽屉on。prototype.bind
bind()会返回一个硬编码的新函数,它会把参数设置为this的上下文并调用原始函数。
2api调用的“上下文”
第三方的许多的函数,以及javascript的语言和宿主环境中许多新的内置函数,都提供了有个可选的参数,通常称为上下文,其作用和bind(...)一样,确保你的回调函数使用指定的this。
2.4new绑定
在JavaScript中构造函数只是一些使用new操作符时被调用的函数。他们并不会属于某个类,也不会实例化一个类,实际上他们甚至都不能说是一种特殊的函数类型,他们只是被new操作符调用的普通函数。
实际上并不存在所谓的“构造函数”只有对函数的‘构造调用’
使用new来调用函数,或者发生构造函数调用时,会自动执行下面的操作
1、创建一个全新的对象
2、这个新对象会被执行[[原型]]链接
3、这个新对象会绑定到函数调用的this
4、如果函数没有返回其他对象,那么new表达式中的函数调用会自动返回这个新对象
使用new时来调用foo()时,我们会构造一个新对象并把它绑定到foo()调用中的this上。
判断this的绑定
判断顺序:
1、函数是否在new中调用(new绑定)? 如果是的话this绑定的是新创建的对象。
var bar = new foo();
2、函数是否通过call、apply(显示绑定)或者硬绑定?如果是的话,this绑定的是指定的对象。
var bar = foo.call(obj2)
3、函数是否在某个上下文对象中调用(隐式绑定)
var bar = obj1.foo();
4、如果都是不是的话,使用默认绑定,如果在严格模式下,就绑定到undefined,否则绑定到全局对象。
var bar = foo();
但是也有例外