Scope_new

Scope

Introduction

Sometimes, when you program, you may want to re-use a variable name.  Perhaps you did it by accident and have something happening you didn't expect.  These are both reasons that it is important to understand scopes.

var b = 5;
function addNum(b){
    var a = 0;
    a += b;
    return a;
}
alert(addNum(3))

Consider the block of code above.  First we declared two variables, a and b.  Then we create a function that increases a by some value, which we also call b.  Then we call the function with the parameter 3.

It may be unclear why the result is 3 instead of 5.

The answer is because of scope.  Inside a function like addNum, we can have our own set of variables with any names we like, including ones we have previously used.  

In object oriented programming, we are mostly concerned with sending messages to objects.  If I want to send a message to a person telling him to give me their last name, it might look like this in JavaScript:

person = {   
    firstName: "Bob",
    lastName: "Dobbs",
    full: function () {
        return this.firstName + " " + this.lastName;
    }
}

alert(person.lastName)

But notice inside that object, there is an option to ask the person for their full name:
alert(person.full())

Inside that function, we could have written the full name as:
full: "Bob Dobbs", but that would be repeating information...and if the person changed their last name, you would then have to update it in two places.  To get around this, the keyword 'this' is an object using a self reference to the values of its own first and last names.

Using 'this'

There are times, however, when this can lead to unexpected behavior:

    function showVal(a){
        this.a = a
    }
    this.a = 3;
    showVal(5)
    alert(this.a)

In this scenario, note that I have first declared the value of 'this.a' to be 3, passed a parameter to a function, in which 'this.a' is changed to 5 and then triggered an alert on 'this.a'.
You might expect the alert to show 5, but it doesn't.  Why?

The answer is because 'this' is referring to two things in this code.
The first assignment of 3 is outside the function, so it will refer to itself in that context.
The second assignment, inside the function, is referring to the function itself.

The value of 'this' varies depending on context.  Try to think of who 'me' would be whenever you use it.

Nested Scopes

Note that it is possible to nest this idea of scoping as many times as you like.  Below, you will see some code that, when executed, first shows the message  that it is outside the function, then in the outer function, then in the inner function, but all of them with variables of the same name.

var GlobalString = ''

var message = 'outside functions';
GlobalString +=  message
outerFunction();

function outerFunction(){
    var message = 'in outer function';
    GlobalString += '\n' + message;
    innerFunction();
    function innerFunction(){
        var message = 'in inner function';
        GlobalString += '\n' + message;
    }
}
alert(GlobalString)

Morphs and Scope

With Morphs, the same idea of scope exists.
Look below, you'll see two groups of morphs, each with an inner morph with the same name, "InnerRectangle"

The each have a method that triggers when you click them that executes the following:

this.get('InnerRectangle').show()

in each case, the 'get' function is run in the scope of the outermost rectangle.  It works by first looking down its own list of descendants until it has exhausted the possibilities, then going back to the root of the scene graph and starting from there.

Since both have a morph that matches, they return different morphs.  This is an example of how both naming and scope can be important

/home/lively/LivelyKernel/users/robertkrahn/csc130/tutorials.css

X

–

Menu