Chapter 1: THIS

In this example below you will see how to do a Chapter 1: THIS with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by jsantana2418, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright jsantana2418 ©
  • HTML
  • CSS
  • JavaScript
    

/*Downloaded from https://www.codeseek.co/jsantana2418/chapter-1-this-ORVBkg */
    


/*Downloaded from https://www.codeseek.co/jsantana2418/chapter-1-this-ORVBkg */
    function identify() {
    return this.name.toUpperCase();
}

function speak() {
    var greeting = "Hello, I'm " + identify.call( this );
    console.log( greeting );
}

var me = {
    name: "Jose"
};

var you = {
    name: "Reader"
};

identify.call( me ); // JOSE
identify.call( you ); // READER

speak.call( me ); // Hello, I'm JOSE
speak.call( you ); // Hello, I'm READER

//=======================================

function foo(num) {
    console.log( "foo: " + num );

    // keep track of how many times `foo` is called
    // Note: `this` IS actually `foo` now, based on
    // how `foo` is called (see below)
    this.count++;
}

foo.count = 0;

var i;

for (i=0; i<10; i++) {
    if (i > 5) {
        // using `call(..)`, we ensure the `this`
        // points at the function object (`foo`) itself
        foo.call( foo, i );
    }
}
// foo: 6
// foo: 7
// foo: 8
// foo: 9

// how many times was `foo` called?
console.log( foo.count ); // 4

//=================================

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

var a = 2;

goo(); // 2

//======================

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

var obj2 = {
    a: 42,
    foo: foo
};

var obj1 = {
    a: 2,
    obj2: obj2
};

obj1.obj2.foo(); // 42


//===================

function poopy() { //this is a named function declartion in the global scope
    console.log( this.a );
}

function doFoo(fn) {
    // `fn` is just another reference to `poopy`

    fn(); // <-- call-site! aka calling the function that was pass in as a argument to doFoo
}

var obj = {
    a: 2,
    goop: poopy //goop is a property/var to the actual value 'poopy'
};

var a = "oops, global"; // `a` also property on global object

doFoo( obj.goop ); // "oops, global"

function trySomething(options, something){
  prbAFunction(options);
  if(typeof prbAFunction === "function") {
  console.log("it's a function!");
} else {
  console.log(typeof prbAFunction);
}
}

Determining this

Now, we can summarize the rules for determining this from a function call's call-site, in their order of precedence. Ask these questions in this order, and stop when the first rule applies.

Is the function called with new (new binding)? If so, this is the newly constructed object.

var bar = new foo()

Is the function called with call or apply (explicit binding), even hidden inside a bind hard binding? If so, this is the explicitly specified object.

var bar = foo.call( obj2 )

Is the function called with a context (implicit binding), otherwise known as an owning or containing object? If so, this is that context object.

var bar = obj1.foo()

Otherwise, default the this (default binding). If in strict mode, pick undefined, otherwise pick the global object.

var bar = foo()

That's it. That's all it takes to understand the rules of this binding for normal function calls. Well... almost.

Comments