Java Script has what some call a Bug

WATERCOOLER
#1

//I found this to be interesting about the Java Script engine. I am just learning about Java Script and I am a new student in Ivan Academy. When I write and share these things it helps me to remember and get some feedback to further my understanding. Functions are objects and object are stored by reference where variables are stored by value. Anytime the Java Script engine is run there is an Execution context created with its own lexical environment to include the Inside Environment, the Outside Environment and “this”. “this” denotes the context or window of the environment that is the inside or outside environment. Lets examine Object, Functions and “this”. You can copy and paste this entire post into your browser console and run it.//

//Objects , Functions and “this”. “this” is a global variable on initial setup

console.log(this); //"this is the “Window” Object Global Environment

this.newvariable = “hello”; // now we can use “this” Object to attach name/value pairs

console.log(newvariable); // 1st “hello” This is from the Window Global Object Environment.

// In the Execution stack there is the Inside Elements, Outside Elements and “this”.

//What is “this”? The Global Environment or it could be the local environment when defining a function or an object.//

function a() {console.log(this); }

//define function a(). “this” is now an inside element from the local environment.

var b = function(){console.log(this); }

// define function b() , This again is a Inside Element from local environment

a();

//console.log outputs the below response:

//Object
//log: ƒ ()
//name: “the c object”
//proto: Object//

console.log(newvariable);

//output “hello” //

b();      //output the function b()  and "this" 
                             
var c = {
 name: "the c object", log: function(){ console.log(this);
} 
            
        }
        
c.log();

//console.log output “this”//
//1. Object

// 1. log: ƒ ()
// 2. name: “updated c object”
// 3. proto: Object

var c = {
name: "the c object", log: function(){this.name = "updated c object"; console.log(this);  //change name to "updated c object"  
        } 
            
        }
        
c.log();

//Object with name undated to "updated c object
//1. Object

// 1. log: ƒ ()
// 2. name: “updated c object”
// 3. proto: Object

var c = {
           name: "the c object", log: function(){this.name = "updated c object"; console.log(this);  //"updated c object" and 8th "hello"
            var setname = function(newname){
                this.name = newname;

//added function within the function within the object c//
}
setname(“Updated again! The c object”); //setname executed outside the object that contains it which is considered by most a bug in Java script.
console.log(this);

        } 
            
        }
        
        c.log();

//output from console is updated c object and not " Updated again! The c object"

// 1. Object

// 1. log: ƒ ()
// 2. name: “updated c object”
// 3. proto: Object

// Here when the execution context is created and the function “setname” is executed. The “setname” changes the this.name in the global object and not within the object it is located in. Most people think this is a bug in Java Script and so do I.

// So what we have to do is use the “set by reference” protocol and use a mirrow image of the window object within the object that was created and reference this object which points to the “this” object within the object that was created instead of the global object. “this” is then replaced by its reference “self”

         var c = {
           name: "the c object", log: function(){var self = this; self.name = "updated c object"; console.log(this); 
            var setname = function(newname){
                self.name = newname;
            }
            setname("Updated again! The c object");
            console.log(self);
        } 
            
        }
        
        c.log();

//console.log output is now what we expect. It updates the function of the function within the object instead of the global object which still gets updated also as before.

//Objectlog: ƒ ()name: "Updated again! The c object"proto: Object//

//full output from console
//VM388:4 Window {parent: Window, opener: null, top: Window, //length: 0, frames: Window, …}
//VM388:11 Window {parent: Window, opener: null, top: Window, //length: 0, frames: Window, …}
//VM388:18 hello
//VM388:14 Window {parent: Window, opener: null, top: Window, //length: 0, frames: Window, …}
//VM388:22 {name: “the c object”, log: ƒ}
//VM388:30 {name: “updated c object”, log: ƒ}
//VM388:38 {name: “updated c object”, log: ƒ}
//VM388:43 {name: “updated c object”, log: ƒ}
//VM388:55 {name: “updated c object”, log: ƒ}
//VM388:60 {name: “Updated again! The c object”, log: ƒ}
//undefined//

#2

To summarize it this way, if you want the value of this to be persistent and constant for an entire “closure” (call stack, lifetime of the current context, etc) assign it to a variable like, var self = this;

And use that self you assigned instead of this.

Or perhaps an even better way to say it is, “if you want this to behave like a normal local variable, assign it to a local variable and use the local variable from that point on”.

#3

Well said and simply said