Joel Koh Joel Koh - 1 month ago 7
Javascript Question

How to access method in prototypal inheritance pattern?

I just found this resource jQuery Prototypal Inheritance Boiler Plate which i'd like to use as the foundation of a custom plugin i'm building for my app but i have difficulty understanding how to access a method within this object itself. (Please refer to the code snippet below where i've left comment /* This doesn't seem to work */)

I want to be able to do call a method within the same object, but have not been successful in doing so. I believe i have some misconceptions of how this works, so hope to have your advice. Thanks!



/*!
* jQuery prototypal inheritance plugin boilerplate
* Author: Alex Sexton, Scott Gonzalez
* Further changes: @addyosmani
* Licensed under the MIT license
*/

// myObject - an object representing a concept that you want
// to model (e.g. a car)
var myObject = {
init: function( options, elem ) {
// Mix in the passed-in options with the default options
this.options = $.extend( {}, this.options, options );

// Save the element reference, both as a jQuery
// reference and a normal reference
this.elem = elem;
this.$elem = $(elem);

// Build the DOM's initial structure
this._build();

// return this so that we can chain and use the bridge with less code.
return this;
},
options: {
name: "No name"
},
_build: function(){
//this.$elem.html('<h1>'+this.options.name+'</h1>');
},
myMethod: function( msg ){
// You have direct access to the associated and cached
// jQuery element
console.log("myMethod triggered");
// this.$elem.append('<p>'+msg+'</p>');
}
myQuestion: function ( msg ) {
/* ========================= */
/* This doesn't seem to work */
/* ========================= */
this.myMethod( msg );
}
};

// Object.create support test, and fallback for browsers without it
if ( typeof Object.create !== "function" ) {
Object.create = function (o) {
function F() {}
F.prototype = o;
return new F();
};
}

// Create a plugin based on a defined object
$.plugin = function( name, object ) {
$.fn[name] = function( options ) {
return this.each(function() {
if ( ! $.data( this, name ) ) {
$.data( this, name, Object.create(object).init(
options, this ) );
}
});
};
};

// Usage:
// With myObject, we could now essentially do this:
// $.plugin('myobj', myObject);

// and at this point we could do the following
// $('#elem').myobj({name: "John"});
// var inst = $('#elem').data('myobj');
// inst.myMethod('I am a method');




Answer

Your are missing a , after your myMethod: function(msg);

Do it like this;

/*!
 * jQuery prototypal inheritance plugin boilerplate
 * Author: Alex Sexton, Scott Gonzalez
 * Further changes: @addyosmani
 * Licensed under the MIT license
 */

// myObject - an object representing a concept that you want
// to model (e.g. a car)
var myObject = {
  init: function( options, elem ) {
    // Mix in the passed-in options with the default options
    this.options = $.extend( {}, this.options, options );

    // Save the element reference, both as a jQuery
    // reference and a normal reference
    this.elem  = elem;
    this.$elem = $(elem);

    // Build the DOM's initial structure
    this._build();

    // return this so that we can chain and use the bridge with less code.
    return this;
  },
  options: {
    name: "No name"
  },
  _build: function(){
    //this.$elem.html('<h1>'+this.options.name+'</h1>');
  },
  myMethod: function( msg ){
    // You have direct access to the associated and cached
    // jQuery element
    console.log("myMethod triggered");
    // this.$elem.append('<p>'+msg+'</p>');
  },                                        //<---- missing ,
  myQuestion: function ( msg ) {
    /* ========================= */
    /* This doesn't seem to work */
    /* ========================= */
    this.myMethod( msg );
  }
};

myObject.myQuestion()
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Comments