21xrx.com
2024-11-10 00:32:25 Sunday
登录
文章检索 我的文章 写文章
深入理解JavaScript的this关键字
2023-06-18 20:37:36 深夜i     --     --
JavaScript this 全局作用域 函数 对象

JavaScript中的this关键字经常让开发者感到困惑和不确定，因为它的指向非常灵活且容易受到上下文的影响。在本文中，我们将深入探讨JavaScript中的this关键字，并为您提供一些示例来帮助您更好地理解其工作原理。

首先，让我们来了解一下this关键字的基本概念。在JavaScript中，this是一个引用当前执行代码的对象，可以是全局对象或函数/方法的拥有者对象。换句话说，它是一个指向调用函数的对象的引用。

下面是一些示例，以更好地说明这一点：



var firstName = "John";


var lastName = "Doe";


function introduceMe() {


 console.log("Hello, my name is " + this.firstName + " " + this.lastName);


}


window.introduceMe(); // 输出 "Hello, my name is John Doe"

在上面的代码中，我们定义了两个变量：firstName和lastName，以及一个函数introduceMe。我们将这个函数赋值给window对象，因此它就是在全局作用域中定义的。当我们调用这个函数时，this将引用window对象。因此，我们可以通过this.firstName和this.lastName访问firstName和lastName变量的值。

另一个例子：



var person = {


 firstName: "John",


 lastName: "Doe",


 fullName: function() {


  return this.firstName + " " + this.lastName;


 }


}


console.log(person.fullName()); // 输出 "John Doe"

在这个例子中，我们定义了一个person对象，它有三个属性：firstName、lastName和fullName。fullName属性是一个函数，它返回firstName和lastName的组合字符串，this指向person对象，因此我们可以使用this.firstName和this.lastName来访问person对象的属性。

了解了基本概念后，让我们更深入地了解JavaScript中this关键字的工作原理。

当函数在全局作用域中调用时，this将指向window对象。但是，当函数作为对象的方法调用时，this将指向该对象。如果我们将函数作为另一个函数的参数传递，this将不再指向原始的对象。相反，它将指向调用它的函数的对象。

让我们看几个例子来说明这一点：



var person1 = {


 firstName: "John",


 lastName: "Doe",


 fullName: function() {


  return this.firstName + " " + this.lastName;


 }


}


var person2 =


 lastName: "Doe"


person2.fullName = person1.fullName;


console.log(person2.fullName()); // 输出 "Jane Doe"

在这个例子中，我们定义了两个对象：person1和person2。person1有一个fullName方法，它返回firstName和lastName的组合字符串，但是person2没有fullName方法。我们将person1.fullName方法赋值给person2.fullName，这意味着当我们在person2上调用fullName方法时，this将指向person2。因此，我们在控制台中看到了"Jane Doe"的输出。

另一个例子：



function sayName() {


 console.log("My name is " + this.name);


}


var person = { name: "John" };


setTimeout(sayName.bind(person), 1000); // 输出 "My name is John"

在这个例子中，我们定义了一个sayName函数，并将person对象传递给bind方法，以便在setTimeout调用sayName函数时，将this设置为person。因此，当我们在控制台中看到输出时，它将引用person对象。

最后，让我们总结一下本文的要点：

- this是一个指向当前执行代码的对象的引用。

- 在全局作用域中调用函数时，this指向window对象。

- 当函数作为对象的方法调用时，this将指向该对象。

- 如果我们将函数作为另一个函数的参数传递，this将不再指向原始的对象。

- 我们可以使用bind方法控制this的值。

  
  

评论区

{{item['qq_nickname']}}
()
回复
回复