JavaScript中this的全面解析及常见实例

关于JavaScript中this的全面及常见实例的学习资料

前言：

在JavaScript中，this关键字的使用非常普遍，但其行为却常常令人困惑。很多开发者对this的理解仅限于函数自身，实际上，this的绑定是在运行时确定的，而不是在编写时。其上下文取决于函数调用的方式。深入理解this的工作机制对于编写高效、可维护的JavaScript代码至关重要。

一、this的绑定规则

在JavaScript中，this的绑定遵循以下四种规则：默认绑定、隐式绑定、显式绑定和new绑定。接下来，我们将详细介绍每种规则的含义和优先级。

1. 默认绑定

当函数作为独立函数调用时，使用默认绑定规则。在默认绑定规则下，this指向全局对象（在浏览器中为window）。在严格模式下，this会绑定到undefined。

示例：

```javascript

function foo() {

console.log(this.a);

}

var a = 2;

foo(); // 2

```

注意，即使在对象内部定义的函数，如果作为独立函数调用，仍然遵循默认绑定规则。

2. 隐式绑定

当函数引用有上下文对象时（例如：obj.foo），隐式绑定规则会把函数中的this绑定到这个上下文对象。对象属性引用链中只有上一层在调用中起作用。

示例：

```javascript

var obj = {

name: "heyushuo",

foo: function() {

console.log(this.name); // "heyushuo"

}

};

obj.foo();

```

需要注意的是，如果被隐式绑定的函数丢失绑定对象，将会应用默认绑定规则，把this绑定到全局对象或undefined（严格模式）。

3. 显式绑定

通过调用函数的方法call、apply或bind，可以显式地指定函数的this值。call和apply接收一个参数作为函数执行时的this对象，bind返回一个新的函数，调用这个新函数时指定的this值生效。

示例：

```javascript

function foo() {

console.log(this.name);

}

var obj = {name: "heyushuo"};

foo.call(obj); // "heyushuo"

```

4. new绑定

JavaScript中函数调用的上下文与绑定关系

在JavaScript中，函数调用的上下文和绑定关系是理解函数行为的关键。让我们深入一下这个问题。

一、函数调用与绑定关系

在JavaScript中，函数的调用方式会影响其内部的this指向。以下是四种常见的绑定方式：默认绑定、传入回调函数时的绑定、显示绑定以及new绑定。让我们逐一。

第一种是默认绑定。当我们直接调用一个函数时，它的this会指向全局对象或者undefined（在严格模式下）。例如：

```javascript

var a = "global";

var obj = {

a: 2,

foo: function() {

console.log(this.a); // 输出 "global" 或 undefined（严格模式下）

}

};

var bar = obj.foo; // 函数别名！

bar(); // 默认绑定，输出 "global" 或 undefined（严格模式下）

```

第二种是在传入回调函数时的绑定。当我们把函数作为回调函数传递时，它的this会指向调用它的上下文对象。例如：

```javascript

function doFoo(fn) {

fn(); // 在这里调用函数，其this指向调用它的上下文对象。

}

doFoo(obj.foo); // 输出 "global"，因为obj.foo被作为回调函数传递并调用。

```

第三种是显示绑定，我们可以通过call()或apply()方法显示地指定函数的this值。例如：

```javascript

function foo() { console.log(this.a); } // 输出绑定的对象中的a的值。

var obj = { a: 2 };

foo.call(obj); // 输出 "2"，这里我们显式地将函数的this绑定到obj对象上。

```

还有一种硬绑定，是一种特殊的显示绑定，它将函数的this永久地绑定到一个对象上，无论函数在哪里被调用。这在ES5中可以使用Function.prototype.bind方法实现。例如：

```javascript

var bar = foo.bind(obj); // bar函数无论在哪里调用，都会将this绑定到obj上。

bar(); // 输出 "2"，即使bar是在全局环境下调用，其this仍然指向obj对象。

``` 第四种是new绑定，使用new关键字创建新对象时，会自动执行一些操作，并将新对象的this值绑定到构造函数中。例如：

```javascript

function foo() { this.name = "heyushuo"; this.age = 25 }

var bar = new foo(); // 创建新对象并自动绑定到foo的构造函数中。

console.log(bar); // 输出新创建的对象。 此时的this指向新创建的对象bar。

``` 这样就完成了对象的创建和属性的赋值操作。 我们可以使用bar对象的属性进行后续操作。 接下来我们来看一下四种绑定关系的优先级如何判断？判断this的指向可以按照四种绑定的顺序来进行判断：是否在new中调用（new绑定）、是否通过call/apply/bind等方式显示绑定、是否作为回调函数使用（默认绑定）、普通函数调用（默认全局对象或者严格模式下的undefined）。在实际开发中，我们需要根据具体的场景和需求来判断函数的绑定方式以及this的指向问题。希望这篇文章能帮助你更好地理解和掌握JavaScript中的函数调用与绑定关系！深入理解JavaScript中的this关键字绑定机制

当我们创建一个新的对象或调用一个函数时，this关键字在JavaScript中的绑定方式是一个重要的概念。以下是关于this的四种主要绑定方式及其在实际代码中的应用。

一、显式绑定

当我们使用call或apply方法调用一个函数时，我们可以为this指定一个对象。在这种情况下，this将绑定到我们指定的对象。例如：

```javascript

var obj2 = {};

var bar = foo.call(obj2); // this绑定到obj2

```

在这个例子中，无论foo函数原本期望的this指向何处，它都将被绑定到obj2。这就是所谓的显式绑定。

二、隐式绑定

当一个函数被某个对象调用时（即作为对象的方法），该函数中的this将隐式地绑定到那个对象。例如：

```javascript

var obj1 = {foo: function() {}};

var bar = obj1.foo(); // this绑定到obj1

```

在这个例子中，无论foo函数在哪里定义，当它被obj1调用时，其内部的this都将指向obj1。这就是所谓的隐式绑定。

三、构造函数绑定（新创建的对象）

当我们使用new关键字创建一个新的对象时，构造函数的this将绑定到新创建的对象上。例如：

```javascript

function foo() {}

var bar = new foo(); // this绑定到新创建的对象

```

在这个例子中，foo函数内部的this将指向新创建的空对象。这就是所谓的构造函数绑定。对于构造函数来说，这也是一种特殊的隐式绑定方式。这种方式在创建新的实例或对象时非常有用。如果构造函数中有一些属性和方法需要被实例化出来供后续使用，就可以通过this关键字来实现。在JavaScript中，new关键字与构造函数一起使用是非常常见的。这种方式也常用于创建类和方法等面向对象编程的结构。这种方式对于理解JavaScript的面向对象编程非常重要。在JavaScript中，理解this关键字的绑定机制是非常重要的，因为它决定了函数内部使用的变量和属性的上下文环境。正确理解和使用this可以帮助我们更好地编写清晰、高效的代码。四、默认绑定如果在严格模式下调用函数并未显式或隐式地绑定this，那么它将绑定到undefined；否则，它将绑定到全局对象。例如：

```javascript

var foo = function() {};