javascript oop覆盖继承的方法

Question

 // The parent class var Parent = function (jqueryElement) { this.jqueryElement = jqueryElement; }; Parent.prototype.attachClick = function () { var that = this; this.jqueryElement.click(function (e) { e.preventDefault(); that.doClick($(this)); }); } Parent.prototype.doClick = function ($element) { console.info('click event from parent'); } // First child class var A = function(jqueryElement) { var that = this; Parent.call(this, jqueryElement); // this is supposed to override the Parent's this.doClick = function ($element) { console.info('click event from A'); }; }; A.prototype = Object.create(Parent.prototype); var test = new A($('.selector')); test.attachClick();

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button class="selector">Click me</button>

At this stage, I'm supposed to see the message "click event from A" , but the weird thing is that I don't see any message as if the doClick method is never executed. How do I override an inherited method ( doClick ) in the child class?

Answer 1

You forgot to execute a click. Your code is working. =) I will only suggest to put your .doClick() method in A.prototype, so it will be shared by all A instances.

 // The parent class var Parent = function (jqueryElement) { this.jqueryElement = jqueryElement; }; Parent.prototype.attachClick = function () { var that = this; this.jqueryElement.click(function (e) { e.preventDefault(); that.doClick($(this)); }); } Parent.prototype.doClick = function ($element) { console.info('click event from parent'); } // First child class var A = function(jqueryElement) { var that = this; Parent.call(this, jqueryElement); }; A.prototype = Object.create(Parent.prototype); // this is supposed to override the Parent's A.prototype.doClick = function ($element) { console.info('click event from A'); }; var test = new A($('.selector')); test.attachClick();

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button class="selector">Click me</button>

https://jsfiddle.net/ekw6vk43/