原生JS之this绑定规则，再也不用担心this指向问题了

前言

首先我们来看一个示例。定义一个函数，用三种不同的方式调用，会产生三种不同的结果

function foo(){console.log(this);
}
foo() //window
let obj ={ name:'sss', foo:foo
}
obj.foo()//{name:'sss',foo:function}
foo.call("abc")// 生成包装类型对象,String {'abc'} 

一个函数调用方式不同this指向也不尽相同，为什么会出现这么令人费解的现象呢？是因为在JavaScript中函数的this是动态绑定的（箭头函数除外）。经过一段时间对this的研究，得出了以下几个结论：

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

this绑定与调用方式和调用位置有关，那么根据调用方式和调用位置，我们该怎么确定this指向呢？

最近这段时间阅读了《你不知道的JavaScript》这本书，让我对js有了更深刻的理解，里面也说到了this绑定问题，如果有兴趣推荐大家去看看这本书，这里我就不过多介绍了，下面来聊聊怎么确定this指向吧，这是我从这本书还有网上的一些资料总结出来的，也是自己的理解，再也不用担心搞不清this指向了，嘿嘿！

this四大绑定规则

一.默认绑定

独立函数调用的就是默认绑定，简单说就是函数没有绑定到某个对象上进行调用，默认返回window（注意：严格模式返回undefined）

举例：

function foo(){console.log(this); 
}
foo()// 独立函数调用 
let obj ={name:'sss', bar:function(){ console.log(this);}
}
let ff = obj.bar
ff() // 函数在对象中，但是独立函数独立函数调用
// 高阶函数
function test(fn){ fn()
}
test(obj.bar) //相当于fn=obj.bar fn() 所以还是独立函数调用 

结果都是window

二.隐式绑定

在调用位置中，通过对象来发起的调用会返回调用它的那个对象

举例：

let obj ={name:'sss', bar:function(){ console.log(this);}
}
obj.bar() // 通过对象调用，结果是 obj 

有一种更微妙但是又更常见的情况发生在传入回调函数时：

function foo(){console.log(this);
}
setTimeout(foo,1000) //Window
let btn = document.querySelector('button')
btn.addEventListener('click',foo) //button
let ar = [1,2,3,4]
ar.forEach(item=>console.log(this)) //Window 

setTimeout内部绑定的this是window ，btn的this指向按钮，forEach方法指向Window

三.new绑定

JavaScript中的函数也可以当作一个构造函数来使用，也就是通过new关键字

我们先来回忆一下new关键字做了什么：

1.创建（构造）一个全新的对象
2.这个新对象执行[[prototype]]连接
3.将这个新对象绑定在this上
4.没有显示返回其他对象时，即返回这个新对象

代码示例：

function person(name) {this.name =nameconsole.log(this);
}
new person('sss') // person{name:'sss'} 

四.显示绑定

相当于强制绑定，使用call,bind,apply等一系列方法进行强制绑定；

显示绑定简单来说就是通过一些方法来进行强制绑定，this就是强制绑定的那个对象；代码示例：

// 显示绑定
function foo(){console.log(this);
}
let obj ={name:'sss'
}
// 此时我们希望this指向obj 如果是正常情况下该这么指向呢
// 1
obj.foo = foo
obj.foo() // obj
// 但是我们希望直接绑定 就可以通过call 来进行显示绑定
foo.call(obj) //obj
foo.call("123") //"123"
foo.call(123) //123
foo.call(undefine) // 特例：window 

call,apply,bind简单介绍：

相同点：

• 都是改变this指向的；
• 第一个参数都是this要指向的对象；
• 都可以利用后续参数传参；

区别：

• call和bind的参数是依次传参，一一对应的；
• 但apply只有两个参数，第二个参数为数组；
• call和apply都是对函数进行直接调用，而bind方法返回的仍是一个函数；

绑定规则优先级

知道了this的四种绑定规则，那么，这四种规则该怎么用呢？

就像运算符有优先级规则一样，this四种绑定规则也有优先级 ，下面来介绍一下它的优先级规则

直接上结论吧，我们可以按照下面这个顺序来判断this：

1. 函数是否在new中调用（new绑定）？如果是的话this绑定的就是新创建的对象；
   2.函数是否通过call、apply、bind调用（显示绑定）？如果是的话，this绑定的是指定的对象；
   3.函数是否在某个上下文对象中调用（隐式绑定）？如果是的话，this绑定的是那个上下文对象；
   4.如果都不是的话，使用默认绑定，绑定到全局对象（严格模式绑定到undefined）

代码示例：

//优先级
function foo(){console.log(this);
}
let obj = {name:'ss',foo:foo
}
obj.foo.call('nn')// 结果是 包装对象nn
// 显然显示大于隐形绑定
new obj.foo() // 结果是foo实例对象
// new绑定大于隐式绑定
 
// new 和显示绑定绑定不能一起使用
let f = foo.bind(obj)
new f()// 结果依然是foo实例对象new绑定>显示绑定
let f2 = foo.bind(obj)
 
f2.call('ss') // 结果是obj对象 bind>call 

输出：

这个判断顺序几乎适用所有情况，当然也有例外，我们需要注意这些例外：

1.显示绑定传入null和undefine

function foo(){
    console.log(this);
}
foo.apply("ss") //"ss"
foo.apply(null) //Window
foo.apply(undefined) //Window 

说明在我们传入null和undefined时，会忽略显示绑定，使用默认规则

另外，在严格模式下则是会返回基本的数据类型

"use strict"
function foo(){
    console.log(this);
}
foo.apply("ss") //"ss"
foo.apply(null) //null
foo.apply(undefined) //undefine 

2.创建一个函数的 间接引用，这种情况也是使用默认绑定规则

function foo(){
    console.log(this);
}
let obj = {
    foo:foo
}
(a = obj.foo)() // Window 

a =obj.foo 会默认返回foo() 相当于独立调用，使用默认规则3.箭头函数

箭头函数中是没有this的，所以它会去不断去上一层的作用域查找this并使用

面试题

现在你已经掌握了如何判断this指向了，来几个面试题试试手吧

题1

let name = 'Window';
let Person = {name:'person',say:function(){console.log(this);}
};
let ss = Person.say;
ss(); // Window
Person.say(); // Person
(Person.say)(); // Person
(b = Person.say)(); // Window 

题2

var name = 'window'
 
 
// {} -> 对象
// {} -> 代码块
var person1 = {name: 'person1',foo1: function () {console.log(this.name)},foo2: () => console.log(this.name),foo3: function () {return function () {console.log(this.name)}},foo4: function () {// console.log(this) // 第一个表达式this -> person1// console.log(this) // 第二个表达式this -> person2// console.log(this) // 第三个表达式this -> person1return () => {console.log(this.name)}}
}
 
var person2 = { name: 'person2' }
 
 
// 开始题目:
person1.foo1(); // 隐式绑定: person1
person1.foo1.call(person2); // 显式绑定: person2
 
person1.foo2(); // 上层作用域: window
person1.foo2.call(person2); // 上层作用域: window
 
person1.foo3()(); // 默认绑定: window
person1.foo3.call(person2)(); // 默认绑定: window
person1.foo3().call(person2); // 显式绑定: person2
 
person1.foo4()(); // person1
person1.foo4.call(person2)(); // person2
person1.foo4().call(person2); // person1 

题3

var name = 'window'
 
/*1.创建一个空的对象2.将这个空的对象赋值给this3.执行函数体中代码4.将这个新的对象默认返回
*/
function Person(name) {this.name = namethis.foo1 = function () {console.log(this.name)},this.foo2 = () => console.log(this.name),this.foo3 = function () {return function () {console.log(this.name)}},this.foo4 = function () {return () => {console.log(this.name)}}
}
 
// person1/person都是对象(实例instance)
var person1 = new Person('person1')
var person2 = new Person('person2')
 
 
// 面试题目:
person1.foo1() // 隐式绑定: person1
person1.foo1.call(person2) // 显式绑定: person2
 
person1.foo2() // 上层作用域查找: person1
person1.foo2.call(person2) // 上层作用域查找: person1
 
person1.foo3()() // 默认绑定: window
person1.foo3.call(person2)() // 默认绑定: window
person1.foo3().call(person2) // 显式绑定: person2
 
person1.foo4()() // 上层作用域查找: person1(隐式绑定)
person1.foo4.call(person2)() //上层作用域查找: person2(显式绑定)
person1.foo4().call(person2) // 上层作用域查找: person1(隐式绑定) 

题4

var name = 'window'
 
/*1.创建一个空的对象2.将这个空的对象赋值给this3.执行函数体中代码4.将这个新的对象默认返回
*/
function Person(name) {this.name = namethis.obj = {name: 'obj',foo1: function () {return function () {console.log(this.name)}},foo2: function () {return () => {console.log(this.name)}}}
}
 
var person1 = new Person('person1')
var person2 = new Person('person2')
 
person1.obj.foo1()() // 默认绑定: window
person1.obj.foo1.call(person2)() // 默认绑定: window
person1.obj.foo1().call(person2) // 显式绑定: person2
 
person1.obj.foo2()() // 上层作用域查找: obj(隐式绑定)
person1.obj.foo2.call(person2)() // 上层作用域查找: person2(显式绑定)
person1.obj.foo2().call(person2) // 上层作用域查找: obj(隐式绑定) 

最后

最近找到一个VUE的文档，它将VUE的各个知识点进行了总结，整理成了《Vue 开发必须知道的36个技巧》。内容比较详实，对各个知识点的讲解也十分到位。

有需要的小伙伴，可以点击下方卡片领取，无偿分享