Error while running Javascript inheritance code

Question

Im trying to run this code to understand Javascript inheritance but get an error

Error:

SyntaxError: Using //@ to indicate source map URL pragmas is deprecated. Use //# instead
http://code.jquery.com/jquery-1.10.1.min.js
Line 1
TypeError: Class.extend is not a function
file:///home/prem/prototype/first.html
Line 13

html file code:

    var Person = Class.extend({
      init: function(isDancing){
        this.dancing = isDancing;
      },
      dance: function(){
        return this.dancing;
      }
    });

    var Ninja = Person.extend({
      init: function(){
        this._super( false );
      },
      dance: function(){
        // Call the inherited version of dance()
        return this._super();
      },
      swingSword: function(){
        return true;
      }
    });

    var p = new Person(true);
    p.dance(); // => true

    var n = new Ninja();
    n.dance(); // => false
    n.swingSword(); // => true

    // Should all be true
    p instanceof Person && p instanceof Class &&
    n instanceof Ninja && n instanceof Person && n instanceof Class





</script>

</head>
<body>

</body>


</html>

Where are you defining extend? That's not native JavaScript, you need to either write that function or include a library that does. If you're modeling your code on Backbone View.extend etc, or another framework's version of inheritance, they specifically add an extend method. That's not how inheritance works in JavaScript. — user229044
– user229044 ♦, Commented Dec 8, 2013 at 3:24
So, what's your question? Aren't the errors clear? I wouldn't use a library that helps you set up inheritance to understand inheritance. — Felix Kling
– Felix Kling, Commented Dec 8, 2013 at 3:24
Call the right function? Obviously Class.extend is not a function. So maybe you have to call a different function. Or include a different library which defines Class.extend. Since you don't explain which library you are using and where Class comes from, there really is not much else to say. — Felix Kling
– Felix Kling, Commented Dec 8, 2013 at 3:29

Matt R. Wilson · Accepted Answer · 2013-12-08 04:29:30Z

1

Javascript inheritance doesn't work like other OOP languages you might be use to because it is a prototype based language. MDN has a nice little intro as to why it's different than say Java or C++.

I think your confusion is based on the fact that js itself does not use the keyword 'extend' when you base the design of one object on the design of another. However, there are several js libraries that mimic the design pattern and even borrow the term 'extend' as it is familiar to most.

As to your error Class.extend is not a function: 'class' is technically a reserved word in js, but I don't think it does anything to date. So unless you or someone else has declared an object called 'Class' and given it a property that is a function called 'extend', the js engine has no idea what to do when you attempt to call it.

answered Dec 8, 2013 at 4:29

Matt R. Wilson

7,5955 gold badges35 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Felix Kling Over a year ago

Just FYI, ES6 introduces a new syntax for class definitions and inheritance, which will use the class keyword: wiki.ecmascript.org/doku.php?id=harmony:classes.

Matt R. Wilson Over a year ago

@FelixKling good call, I knew it's in proposal for ES6. I felt it was too much for an inline during my answer. The bit about "I don't think it does anything to date" was directed toward my lack of knowledge on current implementations from the js engines out there.

Felix Kling Over a year ago

I see. I wasn't sure whether you knew or not, so I just commented nonetheless :) Happy coding!

Collectives™ on Stack Overflow

Error while running Javascript inheritance code

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related