前端this指向问题详解

文
章
目
录

• 前言
• this 的绑定规则
• 默认绑定
• 2. 隐式绑定
• 3. 隐式丢失
• 总结

本文重点讲解前端this指向问题，我们来一起学习下！

前言

相信很多小伙伴们都被this 的指向问题所折磨过，this 它到底指向哪啊？ 今天我们就来聊聊如何判断this 指向哪里，一盏茶的功夫让小伙伴们开心一整天！

文中所实例代码都运行在Chrome浏览器的Console控制台中。

先带大家了解一个概念，在浏览器中运行代码时，window对象就是全局，因此所有在全局作用域中声明的变量，函数都会变成window对象的属性和方法。

this 的绑定规则

默认绑定

默认绑定：函数在哪个词法作用域里生效，this就指向哪里

我们用通俗易懂的话来说：

在非严格模式下，当函数调用时无任何调用前缀的情景，也就是直接调用函数，（后面我们会介绍非直接调用的情况），this 指向全局，在浏览器中也就是window

我们来看一个简单的例子:

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

在此例子中，foo()就是直接调用，那么函数中的this就指向全局区，那么this.a输出1

再来看一个稍微复杂的例子：

var b = 2
function foo() {  // [[scope]]
  var b = 1

  function bar() {
    baz()
  }
  function baz() {
    console.log(this.b);
  }
  bar()
}

foo()

这个例子中无论函数声明在哪，在哪调用，由于函数调用时前面并未指定任何对象，而是直接调用，这种情况下this指向全局，输出2

2. 隐式绑定

隐式绑定：当函数被一个对象所拥有，再调用时，此时this会指向该对象

如果函数被一个对象作为方法所调用时，那么this就会指向该对象。我们来看一个例子：

function foo() {
    console.log(this.a);
  }
  var obj = {
    a: \'潘子夜个人博客www.panziye.com\',
    func: foo
}
obj.func()

foo函数体被对象obj所拥有，当obj调用时，this就会指向obj

输出结果：潘子夜个人博客www.panziye.com

3. 隐式丢失

隐式丢失：当函数被多个对象链式调用时，this指向引用函数的对象

通俗一点来说呢，比如有两个对象object 和 obj，例如这样调用一个函数，obj.object.func(),那么this会指向object(object所引用)，也可以说就近原则

我们来看一个例子:

function foo() {
    console.log(this.a);
  }

  
var obj2 = {
    a: \'哈哈\',
    obj: obj
}
var obj = {
  a: \'潘子夜个人博客www.panziye.com\',
  func: foo
}
obj2.obj.func()

当obj被obj2所拥有时，而函数被obj所拥有，当函数被这样调用时obj2.obj.func()，this指向所引用函数的obj

输出结果：潘子夜个人博客www.panziye.com

总结

以上就是前端this指向问题详解的全部内容，怎么样，是不是解决了你对this指向的问题的一大半疑惑呢，希望对有帮助！