JavaScript中的this绑定

在日常的开发中，我们会经常使用JavaScript中的一个关键字：this，在常见的编程语言中，几乎都有this这个关键字，但是JavaScript中的this和常见的变成语言中的this不太一样，在常见的变成语言（java，c++等）中，this通常只会出现在类的方法中，而this指向它当前调用的对象，但是在JavaScript中，this是更加灵活的，无论是它出现的位置还是它代表的含义。

this全局作用下的指向

这个问题非常容易回答，在浏览器中，this的指向为全局对象window

console.log(this) // window 对象
varname="hhf"
console.log(this.name) // hhf
console.log(window.name) // hhf

但是，开发中很少直接在全局作用于下去使用this，通常都是在函数中使用的

this到底指向什么呢？

下面我们通过一段代码，代码中，我们定义一个函数，对他进行三种不同的方式进行调用，它产生了不同的结果

functionfoo() {
   console.log(this)
}
foo() // window对象
constobj= {
   name: "hhf",
   foo: foo
}
obj.foo() // obj1
constobj2= {}
foo.call(obj2) // obj2

从上面代码运行的结果我们得出：

1.函数在调用时，JavaScript会默认给this绑定一个值；2.this的绑定和定义的位置（编写的位置）没有关系；3.this的绑定和调用方式以及调用的位置有关系；4.this是在运行时被绑定的

在JavaScript中，this有四种绑定规则，分别是：1.默认绑定2.隐式绑定3.显式绑定4.new绑定

下面我们分别对这四种绑定规则进行学习

默认绑定

默认绑定通常是在独立函数进行调用时进行绑定，独立函数调用我们可以理解成没有被绑定到某个对象进行调用,默认绑定在浏览器中指向的是window，当为严格模式（use strict）的时候指向的是undefined

// 案例一
functionfoo() {
   console.log(this)
}
foo() // window对象
// 案例二
functionfoo(fn) {
   fn()
}
constobj= {
   name: "hhf",
   bar: function() {
    console.log(this)
   }
}
foo(obj.bar) // window

显示绑定

显示绑定通常是某个对象对它进行调用，通俗来讲：谁调用就指向谁

functionfoo() {
   console.log(this.name);
}
constobj= {
   name: "hhf",
   bar: foo
}
obj.bar() // hhf

隐示绑定的另一种情况：

当有多层对象嵌套调用某个函数的时候，如 对象.对象.函数 ,this 指向的是最后一层对象。

functionfoo() {
   console.log(this.name);
}
constperson= {
   name: "person"
}
person.foo=foo
constobj= {
   name: "hhf",
   bar: foo,
   person: person
}
obj.person.foo() // person

显式绑定

在JavaScript中，所有的函数都可以使用call、apply、bind三个方法对函数的this进行绑定使用方式的不同：call、apply在函数调用时对它进行调用，bind会返回一个新的函数

显示绑定的用途： 防抖、节流等

call函数的使用

call() 方法使用一个指定的 this 值和单独给出的一个或多个参数来调用一个函数。它接收的参数为：第一个为绑定的this，后面接上的为所调用的函数的参数具体使用方法如下

// 基本使用
functionfoo() {
   console.log(this.name);
}
constobj= {
   name: "hhf"
}
foo.call(obj) // hhf
// 传入参数
functionfoo(n, m) {
   console.log(this.name);
   console.log(n, m)
}
constobj= {
   name: "hhf"
}
foo.call(obj, "n", "m") // hhf n m

apply函数的使用

apply方法的语法和作用与 call() 方法类似，只有一个区别，就是 call() 方法接受的是一个参数列表，而 apply() 方法接受的是一个包含多个参数的数组。具体使用方法如下

functionfoo(n, m) {
   console.log(this.name);
   console.log(n, m)
}
constobj= {
   name: "hhf"
}
foo.call(obj, ["n", "m"]) // hhf, n m

bind函数的使用

bind函数它所接收的参数和call函数一样，但是它会返回一个新的函数，新的函数的this会指向传入的对象

functionfoo(n, m) {
   console.log(this.name);
   console.log(n, m)
}
constobj= {
   name: "hhf"
}
constnewFoo=foo.bind(obj, "n", "m")
newFoo() // hhf n m

new 绑定

new是JavaScript中的一个关键字，当进行new操作调用函数时，会执行如下的操作1.函数内部会创建一个新的对象2.创建的对象的原型（proto）会指向函数的prototype3.所创建的对象会绑定到该函数的this上4.如果函数没有其他返回值，会默认返回该对象

functionPersion() {
   console.log(this)
}
newPersion(); // Persion {}

规则优先级

上面我们学习了四种绑定规则，那么我们可能会思考，如果一个函数在调用的时候使用了多种绑定规则，谁的优先级最高呢？结果如下1.默认规则的优先级最低p毫无疑问，默认规则的优先级是最低的，因为存在其他规则时，就会通过其他规则的方式来绑定this2.显示绑定优先级高于隐式绑定

functionfoo() {
   console.log(this.name)
}
constobj1= {
   name: 'obj1',
   foo: foo
}
constobj2= {
   name: 'obj2',
}
obj1.foo.call(obj2) // obj2

3.new绑定优先级高于隐式绑定

functionfoo() {
   console.log(this)
}
constobj1= {
   name: 'obj1',
   foo: foo
}
constobj2= {
   name: 'obj2',
}
newobj1.foo() // foo {}

4.new绑定优先级高于bind   new绑定和call、apply是不允许同时使用的，所以不存在谁的优先级更高   new绑定可以和bind一起使用，new绑定优先级更高p代码测试

functionfoo() {
   console.log(this)
}
constobj1= {
   name: 'obj1',
   foo: foo
}
constnewFoo=foo.bind(obj1)
newnewFoo() // foo {}

箭头函数的this

箭头函数是ES6中新增的一种函数的写法，但是箭头函数是不绑定this的，当在箭头函数中使用this时，它会随着它的作用域网上找，使用最近的作用域的this来使用

// 使用普通函数
constobj1= {
   name: 'obj1',
   foo: function() {
    console.log(this)
   }
}
obj1.foo() // obj1
// 使用箭头函数
constobj1= {
   name: 'obj1',
   foo: ()=> {
    console.log(this)
   }
}
obj1.foo() // window foo的上层作用域为window
// setTimeout所传入的函数如果是普通函数，那么它绑定的是全局对象window，如果传入的是一个箭头函数，那么它的this执行是它的上层作用域的this指向
constobj1= {
   name: 'obj1',
   bar: function() {
    setTimeout(()=> {
      console.log(this)
    })
   }
}
obj1.bar() // obj1

下面我们通过一道题，对刚刚所学的进行一个小练习

varname="window"
functionPerson(name) {
   this.name=name
   this.obj= {
    name: "obj",
    foo1: function() { 
      returnfunction() {
        console.log(this.name)
      }
    },
    foo2: function() {
      return ()=>{
        console.log(this.name)
      }
    }
   }
}
varperson1=newPerson("person1")
varperson2=newPerson("person2")
person1.obj.foo1()()
person1.obj.foo1.call(person2)()
person1.obj.foo1().call(person2)
person1.obj.foo2()()
person1.obj.foo2.call(person2)()
person1.obj.foo2().call(person2)

输出结果为

/*
window
window
person2
obj
person2
obj
*/