105 lines
4.9 KiB
Plaintext
105 lines
4.9 KiB
Plaintext
== Why is this an issue?
|
|
|
|
The value of `this` depends on which context it appears:
|
|
|
|
* Function: The value of `this` will depend on how a function was called. The value of `this` is not always the object that has the function as an __own__ property, but the object that is used to call the function. The methods `Function.prototype.call()`, `Function.prototype.apply()`, or `Reflect.apply()` can be used to explicitly set the value of `this`. Is it also possible to create a new function with a specific value of this that doesn't change regardless of how the function is called with `Function.prototype.bind()`. In non-strict mode, `this` will always be an object and will default to `globalThis` if set to `undefined` or `null`.
|
|
|
|
* Arrow function: The value of `this` will be the same as the enclosing context. Arrow functions will not create a new `this` binding. When invoking arrow functions using `call()`, `bind()`, or `apply()`, the `thisArg` parameter is ignored.
|
|
|
|
* Class: Class methods behave like methods in other objects: the `this` value is the object that the method was accessed on. If the method is not transferred to another object, `this` is generally an instance of the class. However, for static methods, the value of `this` is the class instead of the instance.
|
|
|
|
* Global: outside of any functions or classes (also inside blocks or arrow functions defined in the global scope), the value of `this` depends on what execution context the script runs in.
|
|
|
|
When a function is called without an explicit object context, the `this` keyword refers to the global object. This also applies when it is used outside of an object or function. The global `this` object refers to the global context in which the JavaScript code is executed. This can cause problems when the code is executed in different contexts, such as in a browser or in a Node.js environment, where the global object is different. Such uses could confuse maintainers as the actual value depends on the execution context, and it can be unclear what object the ``++this++`` keyword is referring to.
|
|
|
|
In JavaScript's "strict mode", using `this` in the global context will always be `undefined`.
|
|
|
|
[source,javascript,diff-id=1,diff-type=noncompliant]
|
|
----
|
|
this.foo = 1; // Noncompliant: 'this' refers to global 'this'
|
|
console.log(this.foo); // Noncompliant: 'this' refers to global 'this'
|
|
|
|
function MyObj() {
|
|
this.foo = 1; // Compliant
|
|
}
|
|
|
|
MyObj.func1 = function() {
|
|
if (this.foo === 1) { // Compliant
|
|
// ...
|
|
}
|
|
}
|
|
----
|
|
|
|
Instead, simply drop the ``++this++``, or replace it with ``++globalThis++``. The `globalThis` global property gives access to the global object regardless of the current environment.
|
|
|
|
[source,javascript,diff-id=1,diff-type=compliant]
|
|
----
|
|
foo = 1;
|
|
console.log(foo);
|
|
|
|
function MyObj() {
|
|
this.foo = 1;
|
|
}
|
|
|
|
MyObj.func1 = function() {
|
|
if (this.foo === 1) {
|
|
// ...
|
|
}
|
|
}
|
|
----
|
|
|
|
== Resources
|
|
|
|
=== Documentation
|
|
|
|
* MDN web docs - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this#global_context[this]
|
|
* MDN web docs - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode#no_this_substitution[No this substitution]
|
|
* MDN web docs - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/globalThis[globalThis]
|
|
* MDN web docs - https://developer.mozilla.org/en-US/docs/Glossary/Global_object[Global object]
|
|
* MDN web docs - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode[Strict mode]
|
|
* MDN web docs - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Reflect/apply[Reflect.apply()]
|
|
* MDN web docs - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/call[Function.prototype.call()]
|
|
* MDN web docs - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/apply[Function.prototype.apply()]
|
|
* MDN web docs - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind[Function.prototype.bind()]
|
|
|
|
|
|
ifdef::env-github,rspecator-view[]
|
|
|
|
'''
|
|
== Implementation Specification
|
|
(visible only on this page)
|
|
|
|
=== Message
|
|
|
|
Remove the use of "this".
|
|
|
|
|
|
'''
|
|
== Comments And Links
|
|
(visible only on this page)
|
|
|
|
=== on 1 Jun 2015, 08:59:46 Linda Martin wrote:
|
|
\[~ann.campbell.2] assigned for completion. Thanks!
|
|
|
|
|
|
|
|
=== on 1 Jun 2015, 17:49:08 Ann Campbell wrote:
|
|
\[~linda.martin] I've tried to expand the code sample to be more demonstrative. Please correct me if I did it wrong.
|
|
|
|
=== on 2 Jun 2015, 15:55:23 Linda Martin wrote:
|
|
\[~ann.campbell.2] Indeed it does not work, JavaScript is tricky:
|
|
|
|
----
|
|
MyObj.func1 = function() {
|
|
if (this.foo == 1) { // Noncompliant; addresses window.foo => actually it does not it addresses MyObj.foo variable.
|
|
// ...
|
|
}
|
|
}
|
|
----
|
|
|
|
Re-assigned to you: I'll let you update the code snippet in case you have precise ideas about what to put.
|
|
|
|
Thank you !
|
|
|
|
endif::env-github,rspecator-view[]
|