0

Hey guys, here I am starting my journey into javascript, when this stupid bug is annoying me. Following is my piece of code:

<html>
    <head>
        <title> Using 'this' in Javascript.</title>
    </head>
    <body>
        <script type="text/javascript">
            var name={
                firstName:"Foo",
                lastName:"Bar",
                showName:function(){
                    console.log(this.firstName +" "+this.lastName);
                }
            };
            name.showName();
            alert(name.lastName);
        </script>
    </body>
</html>

Problems:

1) I am getting following error for name.showName();'Uncaught TypeError: undefined is not a function`

2) Undefined popup for alert(name.lastName)

As far as my knowledge takes me I have already defined object property and method before using.
Where do you guys think is the bug ?

Regards

3
Contributors
7
Replies
28
Views
3 Years
Discussion Span
Last Post by Rahul47
0

Not sure. If I put your code in jsFiddle, it runs as expected.

Even I am not able to figure out where it is taking wrong turn.

0

Well here is the second method I tried, but it's also failing to deliver.

<html>
    <head>
        <title> Using 'this' in Javascript.</title>
    </head>
    <body>
        <script type="text/javascript">
            var name={
                firstName:"Foo",
                lastName:"Bar",
            }
            function showName(){
                alert(this.firstName+ " "+this.lastName);
            }
            showName(name);
        </script>
    </body>
</html>

I am getting popup with undefined undefined. This implies that object properties firstName and lastName are not getting initialized.
I have checked the sequence again and again, but no use.

1

I think it may be down to your use of 'name' as a variable name. Change it to name1 and see if it works:

<script type="text/javascript">
        var name1 = {"fn":"Foo","ln":"bar"};
        alert(name1.fn);
</script>

That works. Using 'name' didn't.

Votes + Comments
It was dumb of me to use 'name' as it is a property.
0

Examples that work:

//without 'this' without parameter but with global var:

<script type="text/javascript">
    var name1 = {"fn":"Foo","ln":"bar"};
    function showName(){
        alert(name1.fn);
    }
    showName();
</script>

//without 'this', but with named parameter and global var:

<script type="text/javascript">
    var name1 = {"fn":"Foo","ln":"bar"};
    function showName(something){
        alert(something.fn);
    }
    showName(name1);
</script>

Can't work:

    <script type="text/javascript">
        var name1 = {"fn":"Foo","ln":"bar"};
        function showName(){
            alert(this.fn);
        }
      showName(name1);
    </script>

As function has no idea of 'this' in this context. 'this' - and I'm a total noob in js, so please correct me if I'm wrong - will refer to the 'calling object' or the object that contains the method (function), e.g.

var lump = {
    fn : "Foo",
    ln : "bar",

    showName : function(){
        alert(this.fn + ' ' + this.ln);
    }
}

lump.showName();

"lump" - thought this was apt as everything is lumped into the object :)

Maybe useful info here: http://www.htmlgoodies.com/beyond/javascript/calling-object-methods-in-javascript.html

Edited by diafol

0

I think it may be down to your use of 'name' as a variable name. Change it to name1 and see if it works:

yay ! It worked. I wasn't aware of keywords in Javascript. I am a noob too. Might be 'name' is a keyword or of special significance to the language.

0

I'm a total noob in js, so please correct me if I'm wrong

It's good to use 'this' as it refers to the object being passed to the function incase you want to pass different objects to function.
It's comforatble to use 'this' instead of using 'objectName' everytime.

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.