Multi-leveled OOP in JavaScript.

[Aeonix]

I have been cuddling with OOP programming. JavaScript seemed like a good start. I went to w3schools.com.

function person(first, last, age, eye) {
    this.firstName = first;
    this.lastName = last;
    this.age = age;
    this.eyeColor = eye;
    this.name = function() {
        return this.firstName + " " + this.lastName
        this.capitalize = function() {
            return this.firstName.charAt(0) + " " + this.lastName.charAt(0);
        }
    };
}

var myFather = new person("John", "Doe", 50, "blue");
document.getElementById("demo").innerHTML = "My father is <b>" + myFather.name() + "</b>";


document.getElementById("demo1").innerHTML = "His captial letters are <b>" + myFather.name.capitalize() + "</b>";

document.getElementById("demo2").innerHTML = "His captial letters are <b>" + myFather.name().capitalize() + "</b>";

How can I manage to let last two lines work? So far I get the first line to work because it was actually rip-off from W3S. I get many, many, errors. Most of them are, the problem itself. I know how to make one-layered OOP program execution, like above myFather.eyeColor();. But I would like to learn multiple layered object programming. Something like document.getElementById("id").innerHTML("woa");. Object and two functions. Three layered call. Another example is object.style.transform="rotate(7deg)". Object, 1 method, 1 assignment. Another three layered call.

TLTR: How do I display first letter of first name and first letter of last name using script above?

I've been through W3School's tutorial about how to make one layered object call, do you maybe know a website, where they explain multi-layered object calls, like very long ones and that require many layers, for example el.visuality.ref("material_renderer").color="#000";

[ryantroop]

Once you return something in JS (and most other languages) any data further down is ignored. So, your scoped "name" function returns with firstName + lastName, and the rest is forgotten.

I cannot think of any way to do what you want without making a new method

Instead...

function person(first, last, age, eye) {
    this.firstName = first;
    this.lastName = last;
    this.age = age;
    this.eyeColor = eye;
    this.name = function() {
        return this.firstName + " " + this.lastName
        }

    this.capitalize = function() {
        return this.firstName.charAt(0) + " " + this.lastName.charAt(0);
        }
    };
}

var myFather = new person("John", "Doe", 50, "blue");
document.getElementById("demo").innerHTML = "My father is <b>" + myFather.name() + "</b>";

document.getElementById("demo2").innerHTML = "His captial letters are <b>" + myFather.capitalize() + "</b>";

However, if your intention is to make chainable methods then you will need to change the way you think in terms of script.
Instead, think of the object as a container (or a class) that has mutable characteristics that have built in getters and setters (unless you decide not to do that, in which case you will also have to change your syntax a bit).

example of chainable methods:

var foo = function()
{
  this.Data1 = null;
  this.Data2 = null;
  this.bar = function(value)
  {
    //do something to my data
    this.Data1 = value;
    return this;
  }

  this.bar2 = function(value2)
  {
    //do soemthing to my data2
    this.Data2 = value2;
    return this;
  }
}

//I can now do...
var myFoo = new foo();
myFoo.bar("hi").bar2(22);
document.getElementById("whatever").innerHTML = myFoo.Data1 + " " + myFoo.Data2;
document.getElementById("whatever2").innerHTML = myFoo.Data1.charAt(0);

Of course, if you have event handlers working on any part of your object, you will need to deal with scoping issues and figure out how to manage the "this" keyword so it no longer targets the window and is instead scoped to your object.

Of course, you can always do what the built in code does and actually return an object with its own methods. For example, document.getElementById() returns an HTML Object that has its own methods and properties, not necessarily itself (as itself, in that case, would be the window or document).

[Aeonix]

Ah, I see, instead of them going within each other's scopes, you just append the function to an object in order to execute it and it's done regardless it's position in chain.

I got your code, and it's working. It's gonna be a hard egg to boil though. I see how it works and can explain it. But I'm not used a lot to it.

Thank you for helping me.