JavaScript-this指向解析_js function this.name-CSDN博客

本文链接：https://blog.csdn.net/tortoise666/article/details/104463930

本文深入探讨JavaScript中this关键字的指向规则，包括全局、函数与eval执行上下文，并介绍如何通过new、call/apply/bind及箭头函数等方式改变其默认指向。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

从执行上下文的角度解析this指向，因为this是与执行上下文绑定的，而执行上下文可分为：全局执行上下文、函数执行上下文、eval执行上下文，所以理所应当觉得this指向这三个方面，下面看看实例：

// 全局执行上下文
console.log(this, "全局")
// 函数执行上下文
function fun() {
    console.log(this, "函数")
}
fun()
// eval执行上下文
eval("console.log(this, 'eval')")
// 打印结果见下图1，从图中可见，打印结果与我们预期结果有很大的差异，三种执行上下文默认情况下均之上了window，那我们看一下怎样去改变this的指向

图1
在这里插入图片描述

改变this指向方式

1.使用关键字new
构造函数使用new实例化时this指向new出来的对象

function Fun(name) {
      this.name = name
  }
  var exm = new Fun("ann")
  console.log(exm.name) // ann   所以Fun中的this指向了exa

2.使用call,apply,bind
把函数绑定到一个对象上运行，函数this就指向目前绑定的对象

function Fun(name) {
	this.name = name
}
var obj = {}
Fun.call(obj, 'ann')
console.log(obj) // {name: "ann"}

3.变量赋值
把需要指向的this赋值给一个变量，调用变量指向需要的对象
4.箭头函数
箭头函数是es6新增的，箭头函数不会创建自己的执行上下文，他的this取决于外部函数

var a = 2
function fun() {
    this.a = 1
    return () => {
        console.log(this.a)
    }
}
fun()() // 打印结果为1