once丶owned
同事因为this指向的问题卡住的bug，vue2的this指向问题，使用了箭头函数，导致拿不到对应的props。当我给他介绍的时候他竟然不知道，随后也刻意的看了一下前端交流群，至今最起码还有70%以上的前端程序员搞不明白，今天给大家分享一下this指向，如果啥都没学会，请给我一个大嘴巴子。
1. 调用位置
作用域跟在哪里定义有关，与在哪里执行无关
this指向跟在哪里定义无关，跟如何调用，通过什么样的形式调用有关this(这个) 这个函数如何被调用(方便记忆)为了方便理解，默认情况下不开启严格模式
2. 绑定规则
??上面我们介绍了，this的指向主要跟通过什么样的形式调用有关。接下来我就给大家介绍一下调用规则，没有规矩不成方圆，大家把这几种调用规则牢记于心就行了，没有什么难的地方。
你必须找到调用位置，然后判断是下面四种的哪一种绑定规则
其次你要也要晓得，这四种绑定规则的优先顺序
这两点你都知道了 知道this的指向对于你来说 易如反掌
2.1 默认绑定
?? 函数最常用的调用方式，调用函数的类型：**函数调用
function bar() {
console.log(this) // window
}bar是不带任何修饰符的直接调用 所以为默认绑定 为
window在严格模式下 这里的
this为undefined
2.2 隐式绑定
??用最通俗的话表示就是：对象拥有某个方法，通过这个对象访问方法且直接调用（注:箭头函数特殊，下面会讲解）
const info = {
fullname: 'ice',
getname: function() {
console.log(this.fullname)
}
}
info.getname() // 'ice'这个函数被
info发起调用，进行了隐式绑定，所以当前的this为info，通过this.fullname毫无疑问的就访问值为ice
隐式丢失 普通
??有些情况下会进行隐式丢失，被隐式绑定的函数会丢失绑定对象，也就是说它为变为默认绑定，默认绑定的this值，为window还是undefined取决于您当前所处的环境，是否为严格模式。
const info = {
fullname: 'ice',
getname: function() {
console.log(this.fullname)
}
}
const fn = info.getname
fn() //undefined??这种情况下就进行了隐式丢失，丢失了绑定的对象，为什么会产生这样的问题呢？如果熟悉内存的小伙伴，就会很容易理解。
这里并没有直接调用，而是通过
info找到了对应getname的内存地址，赋值给变量fn然后通过
fn直接进行了调用其实这里的本质 就是独立函数调用 也就是为
window，从window中取出fullname属性，必定为undefined
隐式丢失 进阶
这里大家首先要理解什么是回调函数。其实可以这样理解，就是我现在不调用它，把他通过参数的形式传入到其他地方，在别的地方调用它。
//申明变量关键字必须为var
var fullname = 'panpan'
const info = {
fullname: 'ice',
getname: function() {
console.log(this.fullname)
}
}
function bar(fn) {
//fn = info.getname
fn() // panpan
}
bar(info.getname)首先
bar中的fn为一个回调函数fn = info.getname参数传递就是一种隐式赋值，其实跟上面的隐式丢失是一个意思，他们都是指向的fn = info.getname引用，也就是它们的内存地址因为他们的
this丢失，也就是函数**调用，默认绑定规则，this为全局的window对象注意: 为什么申明必须为
var呢？因为只有
var申明的变量才会加入到全局window对象上如果采用
let\const则不是，具体的后续介绍一下这两个申明变量的关键字但是有些场景，我不想让隐式丢失怎么办，下面就来给大家介绍一下显示绑定，也就是固定调用。
2.3 显示绑定
??但是在某些场景下，this的改变都是意想不到的，实际上我们无法控制回调函数的执行方式，因此没有办法控制调用位置已得到期望的绑定即this指向。
接下来的显示绑定就可以用来解决这一隐式丢失问题。
2.3.1 call/apply/bind
??js中的 ”所有“函数都有一些有用的特性，这个跟它的原型链有关系，后续我会在原型介绍，通过原型链js中变相实现继承的方法，其中call/apply/bind这三个方法就是函数原型链上的方法，可以在函数中调用它们。
2.3.2 call
call()方法使用一个指定的this值和单独给出的一个或多个参数来调用一个函数。第一个参数为固定绑定的
this对象第二个参数以及二以后的参数，都是作为参数进行传递给所调用的函数
备注
该方法的语法和作用与
apply()方法类似，只有一个区别，就是call()方法接受的是一个参数列表，而apply()方法接受的是一个包含多个参数的数组。
var fullname = 'panpan'
const info = {
fullname: 'ice',
getname: function(age, height) {
console.log(this.fullname, age, height)
}
}
function bar(fn) {
fn.call(info, 20, 1.88) //ice 20 1.88
}
bar(info.getname)2.3.3 apply
与
call的方法类似，只是参数列表有所不同call参数为单个传递apply参数为数组传递参数
var fullname = 'panpan'
const info = {
fullname: 'ice',
getname: function(age, height) {
console.log(this.fullname, age, height)
}
}
function bar(fn) {
fn.apply(info, [20, 1.88]) //ice 20 1.88
}
bar(info.getname)2.3.4 bind
bind与apply/call之间有所不同，bind传入this，则是返回一个this绑定后的函数，调用返回后的函数，就可以拿到期望的this。参数传递则是
调用
bind时，可以传入参数调用
bind返回的参数也可以进行传参
var fullname = 'panpan'
const info = {
fullname: 'ice',
getname: function(age, height) {
console.log(this.fullname, age, height) //ice 20 1.88
}
}
function bar(fn) {
let newfn = fn.bind(info, 20)
newfn(1.88)
}
bar(info.getname)2.4 new绑定
??谈到new关键字，就不得不谈构造函数，也就是js中的 "类"，后续原型篇章在跟大家继续探讨这个new关键字，首先要明白以下几点，new fn()的时候发生了什么，有利于我们理解this的指向。
创建了一个空对象
将this指向所创建出来的对象
把这个对象的[[prototype]] 指向了构造函数的prototype属性
执行代码块代码
如果没有明确返回一个非空对象，那么返回的对象就是这个创建出来的对象
function person(name, age) {
this.name = name
this.age = age
}
const p1 = new person('ice', 20)
console.log(p1) // {name:'ice', age:20}当我调用
new person()的时候，那个this所指向的其实就是p1对象
3. 绑定优先级
3.1 隐式绑定 > 默认绑定
function bar() {
console.log(this) //info
}
const info = {
bar: bar
}
info.bar()虽然这边比较有些勉强，有些开发者会认为这是默认绑定的规则不能直接的显示谁的优先级高
但是从另外一个角度来看，隐式绑定，的this丢失以后this才会指向
widonw或者undefined，变相的可以认为隐式绑定 > 默认绑定
3.2 显示绑定 > 隐式绑定
var fullname = 'global ice'
const info = {
fullname: 'ice',
getname: function() {
console.log(this.fullname)
}
}
info.getname.call(this) //global ice
info.getname.apply(this) //global ice
info.getname.bind(this)() //global ice通过隐式绑定和显示绑定的一起使用很明显 显示绑定 > 隐式绑定
3.3 bind(硬绑定) > apply/call
function bar() {
console.log(this) //123
}
const newfn = bar.bind(123)
newfn.call(456)3.4 new绑定 > bind绑定
首先我们来说一下，为什么是和bind比较，而不能对call和apply比较，思考下面代码
const info = {
height: 1.88
}
function person(name, age) {
this.name = name
this.age = age
}
const p1 = new person.call('ice', 20)
//报错: uncaught typeerror: person.call is not a constructornew绑定和bind绑定比较
const info = {
height: 1.88
}
function person(name, age) {
this.name = name
this.age = age
}
const hasbindperson = person.bind(info)
const p1 = new hasbindperson('ice', 20)
console.log(info) //{height: 1.88}我们通过
bind对person进行了一次劫持，硬绑定了this为info对象new返回的固定this的函数但是我们发现 并不能干预this的指向
3.5 总结
new关键字 > bind > apply/call > 隐式绑定 > 默认绑定
4. 箭头函数 (arrow function)
首先箭头函数是es6新增的语法
const foo = () => {}4.1 箭头函数this
var fullname = 'global ice'
const info = {
fullname: 'ice',
getname: () => {
console.log(this.fullname)
}
}
info.getname() //global ice你会神奇的发现？ 为什么不是默认绑定，打印结果为
ice其实这是
es6的新特性，箭头函数不绑定this，它的this是上一层作用域，上一层作用域为window所以打印的结果是
global ice
4.2 箭头函数的应用场景 进阶
需求: 在
getobjname通过this拿到info中的fullname(值为ice的fullname)
const info = {
fullname: 'ice',
getname: function() {
let _this = this
return {
fullname: 'panpan',
getobjname: function() {
console.log(this) // obj
console.log(_this.fullname)
}
}
}
}
const obj = info.getname()
obj.getobjname()当我调用
info.getname()返回了一个新对象当我调用返回对象的
getobjname方法时，我想拿到最外层的fullname，我通过，getobjname的this访问，拿到的this却是obj，不是我想要的结果我需要在调用
info.getname()把this保存下来，info.getname()是通过隐式调用，所以它内部的this就是info对象getobjname是obj对象，因为也是隐式绑定，this必定是obj对象，绕了一大圈我只是想拿到上层作用域的this而已，恰好箭头函数解决了这一问题
const info = {
fullname: 'ice',
getname: function() {
return {
fullname: 'panpan',
getobjname: () => {
console.log(this.fullname)
}
}
}
}
const obj = info.getname()
obj.getobjname()5. 总结
5.1 this的四种绑定规则
默认绑定
隐式绑定
显示绑定 apply/call/bind(也称硬绑定)
new绑定
5.2 this的优先级 从高到低
new绑定
bind
call/apply
隐式绑定
默认绑定
6. 结语
当一切都看起来不起作用的时候，我就会像个石匠一样去敲打石头，可能敲100次，石头没有任何反应，但是101次，石头可能就会裂为两半 我知道并不是第101次起了作用，而是前面积累所致。
