针对JavaScript中this指向的简单理解

深入理解JavaScript中this的指向

在JavaScript中，this的指向是一个深入且常常令人困惑的话题。实际上，this的指向在函数定义时是无法确定的，只有在函数被执行，被调用的时候，才能确定this指向谁。但深入，我们可以发现一些规律。

为什么要学习this？如果你学过函数式编程和面向对象编程，那么你会明白this在JavaScript中的重要作用。如果你对这部分内容感兴趣，那么理解this的指向就非常重要。

让我们通过几个例子来深入理解。

例子1：

```javascript

function a() {

var user = "小J";

console.log(this.user); // undefined

console.log(this); // Window

}

a();

```

在这个例子中，函数a实际上是被Window对象所调用的。this指向了Window对象。这就是为什么console.log(this)输出的是Window。

例子2：

```javascript

var o = {

user: "追梦子",

fn: function() {

console.log(this.user); // 追梦子

}

}

o.fn();

```

在这里，this指向的是对象o，因为函数fn是通过o对象调用的。当我们在函数内部使用this.user时，我们获取的是对象o的user属性。

如果我们这样调用：`window.o.fn()`，情况就不同了。这里的this仍然指向o对象，而不是window对象。这是因为，尽管我们通过window对象调用了o的fn方法，但fn方法内部的this仍然指向其被定义时的上下文对象，也就是o对象。这就是JavaScript中this的一个特殊性质。

情况1：如果一个函数中有this，它没有被上一级的对象所调用，那么this指向的就是window。这里需要注意的是，在JavaScript的严格模式下，this并不指向window。关于严格模式的具体内容，你可以自行查找相关资料。

情况2：如果一个函数中有this，这个函数有被上一级的对象所调用，那么this指向的就是上一级的对象。这是因为在JavaScript中，函数的调用会创建一个新的执行环境（也称为执行上下文），这个执行环境中的this会指向调用这个函数的对象。这就是所谓的“谁调用就指向谁”。

关于`this`的那些事儿

在JavaScript中，当我们谈论`this`关键字时，意味着我们正在一个函数或方法的执行上下文。在一个函数里，`this`始终指向调用该函数的对象。为了更好地理解这个概念，让我们看几个例子。

例子情境3：当一个函数中有`this`，且这个函数被多个对象所引用时，`this`的指向可能会令人困惑。但实际上，`this`总是指向调用它的上一级对象。看下面的例子：

```javascript

var o = {

a: 10,

b: {

fn: function() {

console.log(this.a); // 输出：undefined，因为这里的this指向的是对象b，而对象b中没有属性a。

}

}

}

o.b.fn(); // 尽管对象b中没有属性a，但this仍然指向对象b。

```

接下来是一个特殊的情况：

例子情境4：当函数被单独引用或赋值给另一个变量时，`this`的指向可能会发生变化。例如：

```javascript

var o = {

a: 10,

b: {

a: 12,

fn: function() {

console.log(this.a); // 输出：undefined，因为这里的上下文没有明确的对象调用，所以this指向全局对象（通常是window）。console.log(this)会输出window。

}

}

}

var j = o.b.fn; // 这里只是引用了函数，并没有执行。当j被调用时，它的上下文是全局的，因此this指向window。这与例子情境3不同，因为例子情境3中函数是直接被调用的。

```

再来看一个关于构造函数和`this`的例子：

构造函数版this：在构造函数中，使用`new`关键字创建新的对象实例时，`this`会指向这个新创建的对象实例。看下面的例子：

```javascript

function Fn() {

this.user = "小J"; // 使用new关键字创建新的对象实例时，这里的this指向新创建的对象实例。

}

var a = new Fn(); // 创建Fn的一个新实例。对象a中就包含了user属性。

想象一下有一个名为`fn`的函数，它有一个属性`user`并赋值为'小J'。当我们使用`new`关键字创建这个函数的实例时，会发生什么呢？

代码示例：

```javascript

function fn() {

this.user = '小J';

}

var a = new fn();

console.log(a); // 输出：fn {user: "小J"}

```

在这个例子中，当我们使用`new`关键字创建`fn`的实例时，JavaScript会为我们创建一个新的空对象，并自动调用函数内部的`this`指向这个新对象。于是，在这个新对象中，我们为其添加了一个属性`user`并赋值为'小J'。这就是我们在控制台看到的输出。

尽管null在JavaScript中是一个特殊的存在，表示一个空的对象，但在使用`new`关键字时，函数的`this`仍然指向新创建的对象实例。这就是为什么在上述代码中，即使函数返回的是null，当我们访问对象实例时，仍然可以获取到`user`属性的值。

关于严格模式中的`this`：在严格模式下，如果函数没有被明确调用（即没有使用`call`、`apply`或`bind`方法），那么函数的`this`将不再是全局对象（在浏览器中是window），而是`undefined`。这是一个重要的改变，提醒开发者更加注意函数的使用方式。

那为什么在创建新对象时，函数的`this`会指向这个新对象呢？这是因为`new`关键字背后的机制。当我们使用`new`关键字创建一个新的函数实例时，JavaScript会为我们创建一个新的空对象，并自动调用函数的原型方法（如果存在的话）。在这个过程中，函数的`this`会被自动绑定到这个新创建的对象上。这就是为什么在上述例子中，函数的`this`指向了我们创建的对象实例a。这样的设计使得我们可以方便地为新对象添加属性和方法。

理解JavaScript中的`this`关键字以及它是如何在`new`操作符下工作的，对于编写高效、清晰的代码至关重要。希望这篇文章能帮助大家更好地理解这一重要的编程概念。也希望大家能多多支持我们的博客和SEO工作。谢谢大家！