JavaScript中的“ this”关键字

JavaScript'this'关键字 (JavaScript 'this' keyword)

The this keyword is widely used in JavaScript. It has many use cases and is also one of the most intimidating features of JavaScript. In most of the programming languages, this is used to refer to the current instance of an object. Let me assure you though, that by the end of this article you'll be very confident in understanding this.

this关键字在JavaScript中被广泛使用。 它具有许多用例，并且也是JavaScript最令人生畏的功能之一。 在大多数编程语言中， 这用于引用对象的当前实例。 不过，让我向您保证，到本文结尾，您将对理解这一点非常有信心。

Let's first get a general idea of this. Let's say you have a class Car which has three data members model, type and price. The variable names for the model, type and price are the same. If we invoke the constructor function of Car to initialize the data members with some values, we can use this to refer to the current instance of Car. We can do something like this,

首先让我们对此有一个大致的了解。 假设您有一个Car类，它具有三个数据成员model ， type和price 。 模型的变量名称， 类型和价格相同。 如果调用Car的构造函数以一些值初始化数据成员，则可以使用它来引用Car的当前实例。 我们可以做这样的事情，

class Car {
    var model, type, price;
  
    Car(model, type, price) {
        this - > model = model;
        this - > type = type;
        this - > price = price;
    }
}

We have used this to avoid confusion between the parameters passed to the constructor function and the data members of the class Car.

我们使用它来避免传递给构造函数的参数与Car类的数据成员之间的混淆。

This is this, in a general context. Let's explore it in JavaScript now.

在一般情况下就是这样 。 现在让我们用JavaScript进行探索。

this is a reserved keyword in JavaScript that does a lot more than what we saw above.

这是JavaScript中的保留关键字，它的作用远远超过了上面的内容。

Its value is determined by the execution context.

它的值由执行上下文确定。

The execution context is determined by how a function is called or invoked? So we're associating this to functions instead of classes? Yes, remember that this in JavaScript comes into existence only when a function is defined. Every time that function definition runs, we get this defined for a function.

执行上下文取决于如何调用或调用函数？ 因此，我们将其与函数而不是类相关联吗？ 是的，请记住，只有在定义函数后，JavaScript中的此功能才存在。 每当函数定义运行时，我们都会为函数定义该定义。

Before explaining the execution context and how this is associated with functions, let's see this in live-action.

在解释执行上下文以及它与函数的关系之前，让我们在实际操作中看到它。

console.log(this);

Output

输出量

Window {parent: Window, postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, …}

If you expand the window, you get a whole load of methods and properties. Every time we talk about this, we picture its scope. The scope of this is defined as what object it refers to. Since we wrote absolutely nothing above, this refers to the global or window object.

如果展开窗口，则会得到大量的方法和属性。 每次我们谈论这个问题时 ，我们都会了解它的范围。 这个范围是指什么反对它指的是。 由于我们在上面绝对没有写任何内容， 因此它是指全局或窗口对象。

Alright, so you have three golden rules to determine the context of this. Let's look at these rules one by one,

好了，所以你有三条黄金规则来确定这样的背景下。 让我们一一看这些规则，

1) The Global Rule

1)全球规则

Unless we have this inside of an object, it will point or refer to the global object and the global object in JavaScript is the Window object. The example we saw above describes the global rule.

除非我们在对象内部拥有此对象，否则它将指向或引用全局对象，而JavaScript中的全局对象是Window对象。 我们上面看到的示例描述了全局规则。

function Person() {
    this.person = 'Fuzzy';
    //this points to global object
}

Person();
console.log(person);

Output

输出量

Fuzzy

Person becomes a global variable as it is declared on the global object. We have this nowhere close to any kind of object whatsoever. We have a function, so this comes into existence and it looks for an object to associate its scope with. It finds no such object and attaches itself to the Window object as per the global rule.

人员在全局对象上声明时成为全局变量。 我们有这个无处接近任何类型的对象任何的。 我们有一个功能，所以这个就开始存在，它寻找一个对象与范围相关联。 它找不到这样的对象，并根据全局规则将其自身附加到Window对象。

2) Implicit Binding

2)隐式绑定

Whenever we declare this inside of a declared object, the value of this becomes close to that of it's parent object.

每当我们在已声明的对象内部声明此值时，此值的值就会接近其父对象的值。

var person = {
    name: 'Fuzzy',
    greet: function() {
        return 'Hello' + this.name;
    },
    scopeThis: function() {
        return this === person;
    }
}

person.greet();
person.scopeThis();

Output

输出量

"HelloFuzzy"
true

We have a function greet() where we use this. So this comes into existence and gets associated with the function greet(). It bubbles up to see if it is attached to any object and finds itself wrapped inside the object person. So the scope of this, in this case, is the object person according to implicit binding rule.

我们在其中使用this的函数greet() 。 因此，它就存在并与函数greet()关联。 冒泡看看它是否附着在任何对象上，并发现它被包裹在对象人体内。 所以这个范围，在这种情况下，是根据隐式绑定规则的对象的人。

What will be the scope of this in the next example?

什么将是这个在下面的例子范围有多大？

var person= {
    Name: 'Fuzzy', scopeThis: this
}

person.scopeThis;

Output

输出量

Window {parent: Window, postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, …}

Did you guess the scope of this to be person? Remember, this only comes into existence when a function is associated with it. Since scopeThis is not a function, this assumes it's usual value. The implicit binding rule does not hold true and this takes the value of the global or window object using the global rule.

你猜这是人的范围吗？ 请记住， 这只是开始存在当一个函数与它关联。 由于scopeThis不是函数，因此假定它是通常的值。 隐式绑定规则不成立， 它使用全局规则获取全局或窗口对象的值。

3) Explicit Binding

3)显式绑定

We can choose what we want the context of this to be using call(), apply() and bind(). We invoke these methods only on functions.

我们可以使用call()，apply()和bind()选择我们想要的上下文。 我们仅在函数上调用这些方法。

• call(): Takes thisArg, a, b,c,d,... as parameters and is invoked immediately.

  call() ：将thisArg，a，b，c，d，...作为参数，并立即调用。

• apply(): Takes thisArg,[a,b,c,d,...] as parameters and is invoked immediately.

  apply() ：将thisArg，[a，b，c，d，...]作为参数，并立即调用。

• bind(): Takes thisArg,a,b,c,d, ... as parameters and is invoked after some time returns a function definition.

  bind() ：将thisArg，a，b，c，d，...作为参数，并在一段时间后调用，返回一个函数定义。

var person={
	Name: 'Fuzzy',
	Greet: function(){
		return 'Hello'+this.name;
},
scopeThis: function(){
		return this===person;
},
dog:{
	Bark: function(){
	return 'Barking' + this.name;
},
scopeThis: function(){
	return this===person;
}
 }
}
person.dog.scopeThis();			
person.dog.scopeThis.call(person);

Output

输出量

false
true

person.dog.scopeThis() returns false since this takes the binding of the dog object according to our Implicit Binding rule and person.dog.scopeThis().call() returns true as we're explicitly setting the value of context of this to be that of the object person.

person.dog.scopeThis()返回false，因为这将根据我们的隐式绑定规则进行dog对象的绑定，而person.dog.scopeThis()。call()返回true，因为我们明确设置了此对象的上下文值成为客体的人 。

Another example where we can use call() to also explicitly set the value of this to be anything as per our wish.

在这里我们可以使用()的调用也明确设置这个值的另一个例子是什么，按照我们的心愿。

var person={
	name: 'Fuzzy',
	greet: function(){
		return 'Hello' + this.name;     
}
}
 
var dog={
	name: ' Cooper'
}
person.greet.call(dog);	

Output

输出量

"Hello Cooper"

We called greet() function, a member of the person object but returned the name of dog object using this. We explicitly bind this to an external object dog using call().

我们将greet()函数称为person对象的成员，但使用this返回了dog对象的名称。 我们使用call()将其明确绑定到外部对象dog 。

var person = {
    name: 'Fuzzy',
    greet: function() {
        setTimeout(function() {
            console.log('Hello' + this.name);
        }, 1000);
    }
}
person.greet()

Output

输出量

'Hello'

In the above example, we get the value of this to be undefined and we get the Hello undefined on the console. Can you guess why?

在上面的示例中，我们获得了this的值未定义，并且在控制台上获得了Hello未定义 。 你能猜出为什么吗？

By the time our setTimeout() function runs, we have lost the binding of this to it's closest parent object. Hence the closest parent object of this is the global or the window object and name is not a defined property for this anymore. A workaround this would using the bind() method.

到时候我们的setTimeout()函数运行，我们已经失去了这个给它最亲密的父对象的绑定。 因此， 此对象的最接近的父对象是全局对象或窗口对象，并且name不再是为此定义的属性。 解决方法是使用bind()方法。

var person = {
    name: 'Fuzzy',
    greet: function() {
        setTimeout(function() {
            console.log('Hello' + this.name);
        }.bind(this), 1000);
    }
}

Output

输出量

'Hello Fuzzy'

Now we get Hello Fuzzy exactly how we wanted it.

现在，我们确切地得到了Hello Hello 。

In addition to all this, if we define an object using the new keyword we get the general meaning of this. this automatically binds itself to the current instance of the object defined using the new keyword.

除了这一切，如果我们使用new关键字定义对象，我们得到的这个一般意义。 这会自动将自身绑定到使用new关键字定义的对象的当前实例。

Remember to use all the rules independently while checking the scope of this.

在检查范围时，切记要独立使用所有规则。

I hope this wasn't too hard(pun intended).

我希望这不太难(双关语意)。

翻译自: https://www.includehelp.com/code-snippets/this-keyword-in-javascript.aspx