Am I passing an object to object.defineProperties?

Question

I am learning javascript and would love help understanding the snippet of code.

From Object.DefineProperties definition, the first parameter is an object. Is MyObjectConstructor a declaration or an object. With a constructor function I would expect to call new to make it an object.

This is what is confusing me. Or as I read in Javascript functions are objects so do I treat it as an object and the this property is where all staticProps and instanceProps are added to?

var _prototypeProperties = function (child, staticProps, instanceProps) {
   if (staticProps){ 
       Object.defineProperties(child, staticProps)
   };
    if (instanceProps) { 
     Object.defineProperties(child.prototype, instanceProps);
   }
  };

function myFunction() {
    function MyObjectConstructor(element) {
      this.element = element;
      this.initialized = false;
    }

  _prototypeProperties(MyObjectConstructor, {...}, {...});
}

Answer 1

Yes, (constructor) functions are objects as well in javascript, and you can add properties directly to them.

The _prototypeProperties function in your example snippet does put the staticProperties on the constructor, so that they could be accessed as MyObjectConstructor.myStaticProperty. It also does put instanceProps (better: "class properties", "prototype properties") on the MyObjectConstructor.prototype object, from where they are inherited by instances: (new MyObjectConstructor).myPrototypeProperty. Lastly, your MyObjectConstructor does put "real" (own) properties on the instances, specifically (new MyObjectConstructor).element and .initialised.

Answer 2

first : the function is the first type object in the javascript . it means you can deliver the function as value . for example :

function test(){

    return function(){
        console.log('function');
    }
}

test()();

you return the function as return an object , function can be assigned and the function another kind of value !

var test = function(i) {
    // body...
    return i;
}

test('123');

a character string 'test' refer to a Anonymous function , you can understand that you transmit a function to a character string .

second : if you use new to create a instance via function , this function will be called construction function , normally it used to init the params , and the instance will take the construction function own property or method and prototype's property or method from the construction function .

third : the instance's property of "__proto__" is refer to the construction function's prototype object . this is why the instance can use the prototype's property or method from the construction function .

forth : if you create the instance by new , the this will refer to the instance object ! so that instance can use the property and method .

from your code :

var _prototypeProperties = function (child, staticProps, instanceProps) {
   if (staticProps){ 
       Object.defineProperties(child, staticProps)
   };
   // the properties from the own construction function  , like this :
   //  this.element = element;
   //  this.initialized = false;


    if (instanceProps) { 
     Object.defineProperties(child.prototype, instanceProps);
   }
  };

  // the properties from the construction function's prototype object . like this :
  //   MyObjectConstructor.prototype.name = 'somebody';
  //   MyObjectConstructor.prototype.getName = function(){
  //        return this.name;
  //   }

Answer 3

In JavaScript, once defined, the resulting functions act identically:

function Hat() { }
var Hat = function() { }

Conventionally the first is used to create objects (usually with new) and the second is used as a regular method.

The new operator, when preceding a function gets kinda weird. Using the new operator will:

• create a new Object "it"
• set the function being called as "it"s prototype
• binds "it" to this within the function
• overrides the return value of the function with "it". This overrides both explicit returns and implicit returns of undefined.

For example:

// first define Hat function
function Hat() { this.color = 'red' }

// calling with `new` implicitly returns a new object bound to the function
new Hat()
// > Hat { color: "red" }

// invoking without `new` implicitly returns `unefined`,
// but `this` points to Hat's parent object.
// If running in the browser, Hat's parent object would be `window`
// so now Window.color is set to "red"
Hat()
//> undefined
Window.color
//> "red"

Be careful with new, because the new object will be returned instead of any explicit returns.

var color = function() { return "blue" }
color()
//> "blue"
new color()
//> color {}

JavaScript is prototypal by nature. The new operator reflects neither prototypical nor classical inheritance. I avoid it when possible, although many popular libraries use it.

I recommend reading through Crockford's explanation of JavaScript's prototypal inheritance: http://javascript.crockford.com/prototypal.html

Its terse, but if you understand his 10 lines of demo code you'll be good.

Play with bind, call and apply, and different scoping contexts too. After understanding scoping and the prototypal nature, the rest is just syntax.