一篇文章完全搞懂this

2017-12-24 本文已影响199人 mytac

函数中this的指向

先测一下你是否真的明白了this的指向

foo.count=0
function foo(num){
    this.count++
}

for(let i=0;i<10;i++){
    if(i>5){
        foo(i)
    }
}

console.log(foo.count) //0

你可能一脸茫然道：这不是应该输出4吗？？咋输出0捏。（尼克杨脸）

foo是执行了4次没错。但this在任何情况下都不指向函数的词法作用域！！foo中的this指向全局，这是因为this是在运行时绑定的，并不是在编写时绑定的。它的上下文取决于函数调用时的各种条件。this的绑定和函数声明的位置没有关系，它只取决于函数的调用方式。当一个函数被调用时，会创建一个执行上下文，它包含函数在哪里被调用、函数的调用方式、传入的参数等信息，this就是这个记录的一个属性，在函数执行的过程中会用到。

那我们回到上面的程序，要想让控制台正确打印foo被调用的次数，只要把this.count++改为foo.count++就好啦~

总的来说呢，就是函数中的this指向什么，取决于这个函数在哪里被调用。

this的绑定规则

1.默认绑定

这是最常用的函数调用类型：独立函数调用，可以把这条规则看作是无法应用其他规则时的默认规则。思考一下下面的代码：

function foo(){
    console.log(this.a)
}
var a=1
foo() // 1

因为在全局环境中调用了foo，this.a被解析为全局对象a。这时没有使用任何修饰的函数进行调用，所以实现了this的默认绑定，指向全局对象。

2.隐式绑定

调用位置是否有上下文，换句话说是否被某个对象拥有或包含。思考下面的代码：

var a=1
function foo(){
    console.log(this.a)
}
const obj={a:2,foo}
obj.foo() // 2

当函数引用由上下文对象时，隐式绑定规则会把函数调用中的this绑定到这个上下文对象。对象属性的引用链只有最后一层在调用位置中起作用。如：

function foo(){
    console.log(this.a)
}
const obj1={a:1,foo}
const obj2={a:2,obj1}

obj2.obj1.foo() //1

隐式丢失

还是看上面那段代码，如果后面加一句：

const bar=obj1.foo
bar() //undefined

这就是隐式丢失，const bar=obj1.foo这句其实是一个引用，它引用的是foo函数本身。此时的bar其实是一个不带任何修饰的函数调用，因此进行了默认绑定，this指向全局。所以为undefined。

更常见的一种状况发生在传入回调函数时：

function doFoo(fn){
    fn()
}
const obj={a:1,foo}
doFoo(obj.foo) //undefined

参数传递也是一种隐式赋值，我们传入函数时fn也是引用的foo函数本身，原理同上个例子。

3.显式绑定

显示绑定一般是通过call和apply来实现。我们还是用foo函数来说明。

foo.call(obj1)
foo() //1

1.硬绑定

const bar=function (){
    foo.call(obj1)
}
bar() //1

这里强制把foo的this绑定到obj上，无论之后如何调用bar，它总会手动在obj上调用foo。这种绑定是一种显式的强制绑定，称之为硬绑定。

硬绑定是一种非常常用的模式，es5提供了内置方法Function.prototype.bind，它的用法如下：

function foo(something){
    return this.a+something
}
const obj={a:1}
const bar=foo.bind(obj)

const b=bar(3)
console.log(b) // 4

2.API调用的上下文

第三方库的许多函数，以及js语言和宿主环境中许多新的内置函数，都提供了可选的参数，通常被称为上下文，其作用和bind一样。

举个例子：

function foo(el){
    console.log(el,this.id)
}
const obj={id:'awesome'}
// 调用foo时把this绑定到obj
[1,2,3].forEach(foo,obj)
// 1 awesome 2 awesome 3 awesome

4.new绑定

内置对象函数在内的所有函数都可以用new来调用，这种函数调用被称为构造函数调用。使用new来调用函数，会自动执行下面的操作：

创建一个全新的对象
这个新对象会被执行prototype连接
这个新对象会绑定到函数调用的this
如果函数没有返回其他对象，那么new表达式中的函数调用会自动返回这个新对象。

思考下面的代码：

function foo(a){
    this.a=a
}
const bar=new foo(2)
console.log(bar.a) // 2

使用new来调用foo时，我们会构造一个新对象并把它绑定到foo调用中的this上。

优先级

new绑定 > 显式绑定 > 隐式绑定 > 默认绑定

在new中使用硬绑定，主要是预先设置函数的一些参数，这样在new初始化时，可以传入其余的参数。bind的功能之一就是把除了第一个参数（用于绑定this）之外的其他参数都传给下层的参数，这种技术称为柯里化。举个例子：

function foo(p1,p2){
    this.val=p1+p2
}
const bar=foo.bind(null,"hello")
const baz=new bar("world")

console.log(baz.val) // helloworld

绑定例外

1. 当我们把null、undefined作为this传入call、apply或bind，这些值在调用时会被忽略，实际应用的是默认绑定规则。

2. 间接引用的情况下会应用默认绑定规则。