Different ways of defining Constructor function

Question

So being new to javascript and jQuery I have come across two ways in which a constructor function is defined.

First something like this. Presumably simple javascript constructor function

var assigner = function assigner(object){
  this.title = object.title;
  this.message = object.message;
  this.backGround = object.svgBackground;
  this.content = object.content;
  this.id = '#' + object.title;
  
  var className = "projects-title";
  var tagName = "p";
  $(this.id).append("<" + tagName + " class = " + className + "></" + tagName + ">");
  
  var className = "projects-message";
  var tagName = "p";
  $(this.id).append("<" + tagName + " class = " + className + "></" + tagName + ">");
  
  var className = "projects-background";
  var tagName = "p";
  $(this.id).append("<" + tagName + " class = " + className + "></" + tagName + ">");
  
  var className = "projects-content";
  var tagName = "p";
  $(this.id).append("<" + tagName + " class = " + className + "></" + tagName + ">");
  $(this.id).find('.projects-title').append(this.title);
  $(this.id).find('.projects-message').append(this.message);
  $(this.id).find('.projects-background').append(this.backGround);
  $(this.id).find('.projects-content').append(this.content);
};

Then Second. Essentially a jQuery constructor function.

(function( $ ){
$.fn.methodToCreate= function(tagName,className,id) {
  $(id).append("<"+tagName+" "+"class="+"\'"+className+"\'>"+"SampleContent"+"</"+tagName+">");
  return this;
}; 
})( jQuery );

I was hoping if someone can explain as to why do we require this special syntax in the second function. One thing I have come across quite frequently is people saying it "extends" jQuery. Are there any resources where a newbie can wrap his head around this phenomenon?

The second isn't really a constructor function: you wouldn't call it with `new`. And adding a jQuery method that doesn't use `this` (other than to return it) doesn't really make sense, because the whole point of jQuery methods is that they operate on the jQuery object they were called on. — nnnnnn, Jan 29 '17 at 02:32

score 2 · Accepted Answer · edited May 23 '17 at 12:33

The first example you provided can be used as a constructor, but convention dictates that we capitalize constructor method names to clarify that distinction (see here for more info: https://stackoverflow.com/a/1564489). Here is a simple example of a Book constructor:

function Book(name, year) {
  this.name = name;
  this.year = '(' + year + ')';
};

You can also assign it to a variable:

var Book = function(name, year) {
  this.name = name;
  this.year = '(' + year + ')';
};

In this example, this constructor can be used to create Book instances, like so:

var hamlet = new Book('Hamlet', 1603);

The second example you provided is not what I'd call a constructor method, but rather a jQuery plugin. It will extend the jQuery instance, by attaching a new method to it, to allow you to call the method in one of your JS files like so:

$('someSelector').methodToCreate('div', '.someClass', '#someId');

An immediately-invoked function expression is used in the example you gave, for encapsulation and to protect the $ instance. You can learn more about how to create jQuery plugins here: https://learn.jquery.com/plugins/basic-plugin-creation/

score 0 · Answer 2 · answered Jan 29 '17 at 02:38

0

Use the es6 class syntax

class MyGreatClass {

  constructor(){

  }

}

answered Jan 29 '17 at 02:38

ShaneDaugherty

427
4
7

"I was hoping if someone can explain as to why do we require this special syntax in the second function." – nnnnnn Jan 31 '17 at 01:00

Different ways of defining Constructor function

2 Answers2