JavaScript关键字，适合初学者

该材料的作者（我们今天将其翻译发表）说，当她从事会计工作时，在那里使用了清晰的术语，其含义很容易在字典中找到。 但是在开始学习程序，尤其是JavaScript之后，她开始遇到这样的概念，它们的定义不再在词典中可以找到。 例如，这涉及关键字this 。 她回想起曾经遇到过使用此关键字的JS对象和构造函数的时候，但要获得其确切含义并不容易。 她认为其他初学者也会遇到类似的问题，尤其是那些以前从未在编程领域工作过的人。 那些想学习JavaScript的人无论如何都必须解决this 。 本材料旨在帮助所有人提供帮助。

这是什么

我提请您注意我对this的定义。 This是在JavaScript中使用的关键字，根据其使用的上下文，它具有特殊的含义。

this会给新手造成很大的困惑，原因是这种情况的上下文取决于它的用途。

可以将其视为动态关键字。 我喜欢Ryan Morr在本文中如何揭示“上下文”的概念。 据他介绍，上下文始终是this的值， this是指“拥有”当前正在执行的代码的对象。 但是，与此相关的上下文与执行上下文不同。

因此，实际上，当我们使用关键字this ，实际上是在帮助下引用了某个对象。 通过研究一些示例，让我们谈谈这个对象是什么。

指向窗口对象的情况

如果尝试在全局范围内访问this ，它将被绑定到全局上下文，即浏览器中的window对象。

当使用全局上下文中可用的函数时（这将它们与对象方法区分开），它们中的this将指向window对象。

尝试在浏览器控制台中执行以下代码：

 console.log(this); //     Window // Window { postMessage: ƒ, // blur: ƒ, // focus: ƒ, // close: ƒ, // frames: Window, …} function myFunction() { console.log(this); } //   myFunction(); //      Window! // Window { postMessage: ƒ, // blur: ƒ, // focus: ƒ, // close: ƒ, // frames: Window, …} 

在对象内部使用它

在对象内部使用此关键字时，此关键字引用对象本身。 考虑一个例子。 假设您使用方法创建了一个dog对象，并在其方法之一中调用了它。 在this使用此关键字时，此关键字表示dog对象。

 var dog = { name: 'Chester', breed: 'beagle', intro: function(){   console.log(this); } }; dog.intro(); //      dog       // {name: "Chester", breed: "beagle", intro: ƒ} //    breed:"beagle" //    intro:ƒ () //    name:"Chester" //    __proto__:Object 

这个和嵌套的对象

将this应用于嵌套对象可能会造成一些混乱。 在这种情况下，值得记住的是this关键字指向使用其方法的对象。 考虑一个例子。

 var obj1 = { hello: function() {   console.log('Hello world');   return this; }, obj2: {     breed: 'dog',     speak: function(){           console.log('woof!');           return this;       }   } }; console.log(obj1); console.log(obj1.hello());  //  'Hello world'   obj1 console.log(obj1.obj2); console.log(obj1.obj2.speak());  //  'woof!'   obj2 

具有箭头功能

箭头函数的行为与常规函数不同。 请记住：在对象的方法中访问this关键字时，此关键字对应于该方法所属的对象。 但是，这不适用于箭头功能。 相反，在此类函数中， this引用是指全局上下文（ window对象）。 考虑以下可在浏览器控制台中运行的代码。

 var objReg = { hello: function() {   return this; } }; var objArrow = {   hello: () => this }; objReg.hello(); // ,   ,  objReg objArrow.hello(); //   Window! 

如果您对当前的问题感到困惑，那么看看MDN ，您会发现信息，箭头函数的书写形式比函数表达式短，并且不与this ， arguments ， super或new.target绑定到它们自己的实体。 箭头函数最适合用作普通函数，而不是对象方法；它们不能用作构造函数。

我们将听MDN，并且不会将箭头函数用作对象方法。

在常规功能中使用它

当常规函数处于全局范围内时，在其中使用的this关键字将绑定到window对象。 下面是一个示例，其中可以将test功能视为window对象的方法。

 function test() { console.log('hello world'); console.log(this); } test(); // hello world // Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, frames: Window, …} 

但是，如果函数在严格模式下执行，则将在this中写入undefined ，因为在此模式下，默认绑定被禁用。 尝试在浏览器控制台中运行以下示例。

 function test() { 'use strict'; return this; } console.log( test() ); //  undefined,    Window 

从在对象外部声明的函数调用此函数，然后将其分配为其函数

考虑我们已经知道的dog对象的例子。 作为此对象的方法，您可以分配在其外部声明的chase函数。 在我们创建被分配了chase函数的foo方法之前， dog对象中没有任何方法。 如果现在调用dog.foo方法，将调用chase函数。 在此函数中访问的关键字this指向dog对象。 当试图将其作为一个独立函数调用时， chase函数的行为将不正确，因为使用这种方法，它将指向一个不具有我们可以通过this访问的属性的全局对象。

 var dog = { breed: 'Beagles', lovesToChase: 'rabbits' }; function chase() { console.log(this.breed + ' loves chasing ' + this.lovesToChase + '.'); } dog.foo = chase; dog.foo(); //    Beagles loves chasing rabbits. chase(); //      

关键字new和this

关键字this用于创建对象的构造函数中，因为它允许以通用方式处理使用该函数创建的许多对象。 JavaScript还具有标准的构造函数，例如，您可以使用它们创建Number或String类型的对象。 程序员自行确定的类似功能使他可以创建对象，这些对象的属性和方法的组成由自己设置。

如您所知，我喜欢dogs，因此我们将描述一个构造函数，用于创建诸如Dog对象，该对象包含一些属性和方法。

 function Dog(breed, name, friends){   this.breed = breed;   this.name = name;   this.friends = friends;   this.intro = function() {       console.log(`Hi, my name is ${this.name} and I'm a ${this.breed}`);       return this;   }; } 

当使用new关键字调用构造函数时，该函数指向使用构造函数提供了属性和方法的新对象。

这是使用标准JavaScript构造函数的方法。

 var str = new String('Hello world'); /*******    ,     ,  ,     str2 .        ,   JavaScript   ,   ,    ,      .        .  ,  ,  ,   ,           . *******/ var str2 = 'Hello world'; //    , ,  ,        

现在，让我们使用新创建的Dog构造函数。

 //      Dog var chester = new Dog('beagle', 'Chester', ['Gracie', 'Josey', 'Barkley']); chester.intro();        //  Hi, my name is Chester and I'm a beagle console.log(chester);   //  Dog {breed: "beagle", name: "Chester", friends: Array(3), intro: ƒ} 

这是使用构造函数的另一个示例。

 var City = function(city, state) { this.city = city || "Phoenix"; this.state = state || "AZ"; this.sentence = function() {   console.log(`I live in ${this.city}, ${this.state}.`); }; }; var phoenix = new City(); //     console.log(phoenix); //       phoenix.sentence(); //  I live in Phoenix, AZ. var spokane = new City('Spokane', 'WA'); console.log(spokane); //    spokane.sentence(); //  I live in Spokane, WA. 

关于新关键字的重要性

当使用new关键字调用构造函数时， this指向一个新对象，对该对象进行一些处理后，将从该函数返回该对象。 在这种情况下，关键字this非常重要。 怎么了 问题是，借助它的帮助，可以使用一个构造函数来创建许多相同类型的对象。

这使我们能够扩展应用程序并减少代码重复。 为了了解此机制的重要性，请考虑如何组织社交媒体帐户。 每个帐户可以是使用Friend构造函数创建的对象的实例。 每个此类对象都可以填充唯一的用户信息。 考虑下面的代码。

 // - var Friend = function(name, password, interests, job){ this.fullName = name; this.password = password; this.interests = interests; this.job = job; }; function sayHello(){  //   ,  ,    this  // console.log(this); return `Hi, my name is ${this.fullName} and I'm a ${this.job}. Let's be friends!`; } //          Friend,    new var john = new Friend('John Smith', 'badpassword', ['hiking', 'biking', 'skiing'], 'teacher'); console.log(john); //    greeting  john john.greeting = sayHello; //     console.log( john.greeting() ); //   ,  sayHello()       console.log( sayHello() ) ; 

总结

实际上，在JavaScript中使用this并不限于上述示例。 因此，一系列这些示例可能包括对call ， apply和bind函数的使用。 由于该材料是供初学者使用的，目的是解释基础知识，因此在此不再赘述。 但是，如果您现在已经this有了初步的了解，那么您可以轻松地找出这些方法。 最主要的是要记住，如果您第一次不了解某些内容，请不要停止学习，练习或阅读与您感兴趣的主题相关的材料。 在其中之一中，您肯定会遇到一些有助于理解以前无法理解的内容（例如，某种成功的短语）。

亲爱的读者们！ 您是否有困难在JavaScript中理解this关键字？