JavaScript中的this绑定

本文链接：https://blog.csdn.net/mall4j/article/details/122300879

本文详细探讨了JavaScript中的this绑定，包括全局作用下this的指向、四种绑定规则（默认、隐式、显示、new绑定）及其优先级。还介绍了call、apply、bind函数的使用方法，以及箭头函数的this特点。通过对示例代码的分析，帮助读者深入理解this的动态绑定特性。

摘要由CSDN通过智能技术生成

springboot实战电商项目mall4j （https://gitee.com/gz-yami/mall4j)

java商城系统源码

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

this全局作用下的指向

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

console.log(this) // window 对象

var name = "hhf"

console.log(this.name) // hhf
console.log(window.name) // hhf

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

this到底指向什么呢？

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

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

foo() // window对象

const obj = {
   
  name: "hhf",
  foo: foo
}

obj.foo() // obj1

const obj2 = {
   }

foo.call(obj2) // obj2

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

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

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

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

默认绑定

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

// 案例一
function foo() {
   
  console.log(this)
}

foo() // window对象

// 案例二
function foo(fn) {
   
  fn()
}

const obj = {
   
  name: "hhf",
  bar: function() {
   
    console.log(this)
  }
}


foo(obj.bar) // window