JS hoisting and this tutorials.

[Mister.Right]

I got some down time so I blogged couple tutorials explaining JS hoisting and this keyword, hope it will help if you are learning JS. this is really confusing concept it is better to have thorough understanding before diving into coding.


this


https://hero2x.wordpress.com/2016/06/13/javascript-this/#more-116


hoisting


https://hero2x.wordpress.com/2016/06/06/javascript-hoisting/


Next tutorial will be prototype.

 

[sagebrushfire]

Nice examples. Scope and the this keyword are probably two of the most important and most irregular features of JavaScript. Even after years of JS development I get my scope mixed up all the time, especially when you have functions inside of objects inside of other objects, etc. 

 

[Mister.Right]

Nice examples. Scope and the this keyword are probably two of the most important and most irregular features of JavaScript. Even after years of JS development I get my scope mixed up all the time, especially when you have functions inside of objects inside of other objects, etc. 

Right, because JS has design flaw. That's why there is no concrete explanation its scope and this behavior. We can only memorize where the flaw is. If function is not property of an object this always bound to global object.


The this keyword created in function supposed to point to that function but it points to global object even though global object already has another this which points to global object.

alert(this === window);//true
var that = this;
function test1(){
	alert(this === window); //false
    alert(that === window); //true
    alert(this === obj1); //true
    test2.call(this);
}

function test2(){
	alert(this === obj1); // true
}

var obj1 = {};
test1.call(obj1);

//if you invoke function itself you get different output.
test1();

 

[Clock Out]

Right, because JS has design flaw. That's why there is no concrete explanation its scope and this behavior.

The behavior is defined in the specification and not unintended.


10.4.3 Entering Function Code


The following steps are performed when control enters the execution context for function code contained in function object F, a caller provided thisArg, and a caller provided argumentsList:

1. If the function code is strict code, set the ThisBinding to thisArg.
   
2. Else if thisArg is null or undefined, set the ThisBinding to the global object.
   
3. Else if Type(thisArg) is not Object, set the ThisBinding to ToObject(thisArg).
   
4. Else set the ThisBinding to thisArg.
   
5. Let localEnv be the result of calling NewDeclarativeEnvironment passing the value of the [[Scope]] internal property of F as the argument.
   
6. Set the LexicalEnvironment to localEnv.
   
7. Set the VariableEnvironment to localEnv.
   
8. Let code be the value of F’s Code internal property.
   

Perform Declaration Binding Instantiation using the function code code and argumentsList as described in 10.5.


If a strict mode function isn't provided a thisArg then thisArg is not defined. In non-strict functions, if thisArg is null or undefined, then thisArg binds the global object. I hope it's clear now why this binds the way it does. The keyword this is not meant to point to the function itself.

 

[Mister.Right]

You know there's function scope and global scope right. this in function scope does not point to function object but global object right.  there's also another this in global object point to global object right. Do you think that is an unnecessary design? Check other programming languages such as Ruby self keyword and Java this keyword why they do not behave as Javascript this keyword. this in Javascript does not make anything better or easier or make more sense than Java this and Ruby self, it just makes thing more complex and unnecessary or in other word more confusion but does not do any more good than this Java or self in Ruby.


Another design flaw is constructor object which I will save for my next tutorial prototype and explain why it does not make any sense or anything straight forward. 

 

[Clock Out]

What you call global scope is part of an execution context. With each execution context there is a LexicalEnvironment, VariableEnvironment, and ThisBinding. In JavaScript the keyword this must point to an object thus the global execution context must also have a global object. It's all in the specification.


Do we really need both a keyword this and the object it points to in the same execution context? I don't think so but I'm not really a programmer. I just tinker. I do know that JavaScript was put together in 10 days and that resulted in many flaws. I'm not arguing that JavaScript is flawless but I am arguing that many of the article's conclusions are provably incorrect.


Another point the article continues to get incorrect is that declaring a function binds its context to the global object. The specification is clear. The value of this is determined when a function is called not when it's defined. There's also no reason for this inside of a function call to point to the function itself unless the function is called as a method of itself.


The new example 3 in the article now confuses context and execution context. An execution context is created when the JavaScript interpreter first starts and then each time a function is called a new execution context fires up for that call. The context is the object referenced by the keyword this inside an execution context. The object itself is not an execution context which might be where the article is confusing itself and why it expects a function's this to point to itself.