How to inherit Class in javascript?

Question

The function is not working, It is not putting values in "input".

function example(id){
    this.code= function(){$('.'+id).val(id)}
    this.validate= function (){
        $('.'+id).keyup(function (e){
            if(e.keyCode==13) this.code();
        })
    }
}

body

<input type="text" class="test"/>
<input type="text" class="test1"/>
<script type="text/javascript">
    var test= new example('test')
    var test1= new example('test1')
    test.validate()
    test1.validate()
</script>

I think the functions inside "example" will get "undefined" in place of "id". You should store the id into some private var in the function example. — MightyPork
– MightyPork, Commented Jul 31, 2013 at 13:07
@MightyPork: no, the function in this.code will inherit the parent function's scope, and will have knowledge of the id var. — NDM
– NDM, Commented Jul 31, 2013 at 13:09
you are aware that your validate() function just registeres a keyup handler, and does not actually perform the validation? — NDM
– NDM, Commented Jul 31, 2013 at 13:13

Louis Ricci · Accepted Answer · 2013-07-31 13:07:48Z

4

Your keyup event handler will have a different "this". You can use bind to correct the problem

keyup(function (e){
if(e.keyCode==13) this.code();
}.bind(this))

When you bind to an event, the handler is called with the "this" keyword set to the object that fired the event, not the object that created the event.

answered Jul 31, 2013 at 13:07

Louis Ricci

21.1k5 gold badges50 silver badges64 bronze badges

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

5 Comments

Jitender Over a year ago

One more thing. you bind 'this' to keyup event and inherit 'this' to its parent function. If my keyup function inside is another function and if I want to inherit 'this' to parent function then how to bind it

Louis Ricci Over a year ago

@amit - You could use a variable like the other answer by Petoj to save the "this" -- var self = this; -- and then use "self" inside of the other since the variable will be accessible up the scope chain.

Jitender Over a year ago

@lastCoder: I use setTimeout method. It is filling value without pressing the enter key. this.code= setTimeout(function(){$('.'+id).val(id)},20)

Jitender Over a year ago

@LastCoder: It is working when I am putting setTimeout inside a function, what is the problem

Louis Ricci Over a year ago

@amit - setTimeout works differently than an event (like click or keyup) handler. The "this" inside a setTimeout function will be the global scope (window), although it will still have access to the parameter variable id. You would need to use bind again on the -- setTimeout(function(){...}.bind(this),123); --

Peter · Accepted Answer · 2013-07-31 13:13:06Z

1

Well javascript is a bit hard to understand when it comes to this..

this article explains some of it http://www.crockford.com/javascript/inheritance.html But one way to solve it would be

function example(id){
    this.code= function(){$('.'+id).val(id)}
    var self = this;
    this.validate= function (){
        $('.'+id).keyup(function (e){
            if(e.keyCode==13) self.code();
        });
    }
}

answered Jul 31, 2013 at 13:13

Peter

38.9k39 gold badges151 silver badges213 bronze badges

Collectives™ on Stack Overflow

How to inherit Class in javascript?

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related