Understanding JavaScript Objects
blog.halolabs.io
blog.halolabs.io
I just have an advice, please don't mix upper case and lower case for programming names in your text, it makes it a little harder to understand, as a reader I was not sure if the author was talking about the same object/function or not. For instance I could find "object.assign()" inside a paragraph but then "Object.assign()" in the code example.
'function' === typeof (function(){}) while 'object' === typeof ({})
There are no classes in JavaScript, the way there are in some OO languages.
The new syntax of 'class' introduced in ES6 is just a synthetic sugar which will be translated to an Object and would use inheritance via the prototype chain.
I suggest the book 'JavaScript: The good parts' (by Douglas Crockford) for more on this topic.
'syntactic[al] sugar' is the term used for this sort of thing and JS classes in particular, just about everywhere.
let vertebrate = {hasSpine: true},
mammal = {hasHair: true},
dog = {sound: 'bark'};
sparky = {name: 'Sparky'},
jumbo = {name: 'Jumbo'};
mammal.__proto__ = vertebrate;
dog.__proto__ = mammal;
sparky.__proto__ = dog;
jumbo.__proto__ = dog;
console.log(sparky.hasSpine); // true
console.log(jumbo.hasHair); // true
console.log(sparky.sound); // 'bark'
console.log(jumbo.name); // 'Jumbo'
This entire structure of objects linked through their `__proto__` property is what we call the "prototype chain". Does that answer your question?
var cons = function () {
this.a = 1;
this.b = 2;
}
var obj = new cons();
cons.prototype.b = 3;
cons.prototype.c = 4;
1. create a new empty object; call it `newObj`
2. call the constructor using `newObj` as its `this` context, so that `this.a = 1` is effectively `newObj.a = 1`
3. if the constructor has a `prototype` property defined, invoke `newObj.__proto__ = myconstructor.prototype` to establish the prototype chain on the new object
Hopefully that all made sense!
__proto__ on objects was originally a leaky abstraction in a specific browser. It caught on such that other browsers borrowed it, because they unfortunately had to, but the specs and the browsers all consider it deprecated and warn not to use it: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Refe...
(The standards compliant way to get an object's prototype at runtime is Object.getPrototypeOf(obj), and to change an object's prototype instance at runtime is Object.setPrototypeOf(obj, newPrototype).)
(new String("abc")).length
"abc".length
function DivWrapper({ children }) {
return <div>{children}</div>
}
// show a nice name when debugging
DivWrapper.displayName = 'DivWrapper';
// verify incoming props when debugging
DivWrapper.props = {
children: PropTypes.node
};