Explain Object.create(), new

Question

I know this type of question has been asked and answered a million times, but I still don't understand this.

Everything in JavaScript is an object. There exists a prototype chain that the JavaScript runtime searches for methods and properties. These two things are clear. I also (think I) understand what the new statement does. Maybe the problem is that I don't understand what Object.create does. I have been using the following JavaScript design pattern:

SuperClass = function(){
    this.superprop = 'some super property';
};

SubClass = function(){
    this.subprop = 'some (not so) super property';
};

SuperClass.prototype.someSuperMethod = function(){console.log("I'm super.")};

SubClass.prototype = Object.create(SuperClass.prototype);
SubClass.prototype.constructor = SubClass;

var instance = new SubClass();

instance.someSuperMethod(); // Great! That's super!

But, I have know clue why I can't write:

1. SubClass = Object.create(SuperClass);
2. SubClass = SuperClass;
3. SubClass = new SuperClass;
4. SubClass.prototype = SuperClass.prototype;
5. SubClass = new SuperClass();
6. SubClass.prototype = SuperClass;

(or any of the combinations above). In short, I guess I don't know what the .prototype property of a function is or why I need to Object.create this prototype if I want SubClass to inherit everything from SupClass.

I also don't understand what SuperClass.prototype.constructor means. How is this object different than SuperClass?

I also don't understand why I need to write new SubClass() and not new Subclass. What's the difference?

Answer 1

Alright, I'm the OP for this question. But, I'm going to try to form a comprehensive answer to my question (as comprehensive an answer as satisfies me).

First things first: Most everything in JavaScript is an object. What is an object? An object is any thing with methods and properties associated with it. You might ask: "Okay, so is a string an object? Is the number 5 an object?". That's an interesting question. Strictly, no. These are so fundamental to JavaScript as a language that they are called primitives. There are only 6 primitives in JavaScript: strings, numbers, boolean, null, undefined and symbol (symbols are new as of ECMAScript 6, the latest standard on which JavaScript is based - published officially: June 17, 2015).

The main components of objects are primitives. You can have functions return strings or add numbers. A generic object could be a container for strings or numbers:

var myGenericObject = {var1: "string 1",
                       var2: 42, 
                       var3: function(){
                                 console.log("do something.")
                             }
                      };

All objects in JavaScript are children of the Object class, even functions. Don't be confused: while the Function class is a fundamental object, functions still descend from the Object class, which I guess makes the Object class the most fundamental object in JavaScript (this is probably why it's called Object). However, the Object class really descends from the null primitive (don't worry; that's where it ends). The concept that I'm sideways-addressing right now is called prototypical inheritance and it is a core distinguishing feature of JavaScript.

But, JavaScript is pretty smart. when you try to access methods that would exist for most objects Thus, var testString = "hello" with is an object

First, the new operator according to ECMAScript 5

(more in a bit. I'm just saving my progress, temporarily).