Prototypes Flashcards
Object.getOwnPropertyDescriptor
The method Object.getOwnPropertyDescriptor allows to query the full information about a property.
The syntax is:
let descriptor = Object.getOwnPropertyDescriptor(obj, propertyName);
obj
The object to get information from.
propertyName
The name of the property.
The returned value is a so-called “property descriptor” object: it contains the value and all the flags.
For instance:
let user = {
name: "John"
};
let descriptor = Object.getOwnPropertyDescriptor(user, ‘name’);
alert( JSON.stringify(descriptor, null, 2 ) );
/* property descriptor:
{
"value": "John",
"writable": true,
"enumerable": true,
"configurable": true
}
*/
put if if you query the prototype property descriptors you'll see enumerable as false. That is why in for(let key in obj) instance you don't see prototype properties, only instance properties.
Object.defineProperty(user, ‘name’) allows to override property descriptors.
Link: https://www.udemy.com/course/javascript-object-oriented-programming/learn/lecture/10019954#questions/12951222/
Object.getPrototypeOf()
The Object.getPrototypeOf() method returns the prototype (i.e. the value of the internal [[Prototype]] property) of the specified object.
prototype chain
what can you console.log
property attributes
- every object in js has a prototype, which is a parent it inherits from, except the root object
- none of the properties and methods in the root object will be visible if you console.log it
- in js our properties have attributes attached to them
*
- in js our properties have attributes attached to them
js is a prototype based language
object’s prototype vs prototype property on constructor functions
JavaScript is often described as a prototype-based language — to provide inheritance, objects can have a prototype object, which acts as a template object that it inherits methods and properties from.
An object’s prototype object may also have a prototype object, which it inherits methods and properties from, and so on. This is often referred to as a prototype chain, and explains why different objects have properties and methods defined on other objects available to them.
In JavaScript, a link is made between the object instance and its prototype (its __proto__ property, which is derived from the prototype property on the constructor), and the properties and methods are found by walking up the chain of prototypes.
Note: It’s important to understand that there is a distinction between an object’s prototype (available via Object.getPrototypeOf(obj), or via the deprecated __proto__ property) and the prototype property on constructor functions.
The former is the property on each instance, and the latter is the property on the constructor. That is, Object.getPrototypeOf(new Foobar()) refers to the same object as Foobar.prototype.
The constructor property in a prototype is automatically setup to reference the constructor function.
see prototype chain illustration
Links: https://www.udemy.com/course/javascript-object-oriented-programming/learn/lecture/10019938#questions/12951222/
https://stackoverflow.com/questions/572897/how-does-javascript-prototype-work
prototype chain illustration
https: //i.stack.imgur.com/FPPdI.png
https: //i.stack.imgur.com/m5DXc.png
Because class is syntactic sugar over constructor function Person class inherits from Function Prototype Also from Person.prototype new Person constructor creates an instance of person and inherits also from Person.Prototype Function.prototype inherits from Object.Prototype Thief class prototype is new Person() constructor
prototype trivia
- it doesn’t matter when you override or add a method on prototype because it’s by reference so you can call an instance before overriding, it will still be available
- Object.keys() only returns instance members not prototype members
- for(let key in c) returns all members including prototype
- instance also is called own
- .hasOwnProperty
- don’t modify objects you don’t own, it’ll create headache with 3rd party libraries that might have same method you added but different implementation; also they might add this method in future js developments
- js is a dynamic language, it makes it easy to add properties and object to an existing object, but you shouldn’t modify built in objects in js, like arrays. Don’t add remove or modify existing objectsmake both circle and square inherit from shape
- new Circle(1) is equivalent too new.Circle.prototype.constructor(1) because constructor property refers to function that creates the object
- whenever you reset the prototype also reset the constructor https://www.udemy.com/course/javascript-object-oriented-programming/learn/lecture/10020044#overview
- review this https://www.udemy.com/course/javascript-object-oriented-programming/learn/lecture/10020048#overview
- intermediate function inheritance = extend function
- method overriding
* parent methods might be good on most child objects, but not some, so what to do with these exceptions?
- so you override the method that is defined on the base object
- the reason it works because js engine walks up the prototype chain and picks the first implementation
- this is how polymorphism works - different implementation of the parent method with one call
- how to do this on parent 2:20 https://www.udemy.com/course/javascript-object-oriented-programming/learn/lecture/10020058#overview
*
benefits of oop
composition over inheritance
- before oop we would have to have if/else or switch statements to implement different functions for each case
- avoid creating inheritance hierarchies, keep it to 1 level - favor composition over inheritance - compose a few objects together to create a new object, can come up with any combination of these features to create a new object
- mixing to achieve composition
- composition or mixins
rest vs spread operator
function mixin(target, ... sources){
Object.assign(target, ...sources)
}prototypical inheritance example with circle and shape super method overriding call the base implementation levels of inheritance mixins
function Shape() {}
function Circle() {}
// Prototypical inheritance Circle.prototype = Object.create(Shape.prototype); Circle.prototype.constructor = Circle;
function Rectangle(color) {
// To call the super constructor
Shape.call(this, color);
}
// Method overriding
Shape.prototype.draw = function() {}
Circle.prototype.draw = function() {
// Call the base implementation Shape.prototype.draw.call(this);
// Do additional stuff here }
// Don't create large inheritance hierarchies. // One level of inheritance is fine.
// Use mixins to combine multiple objects
// and implement composition in JavaScript.
const canEat = {
eat: function() {}
};
const canWalk = {
walk: function() {}
};
function mixin(target, …sources) {
// Copies all the properties from all the source objects // to the target object. Object.assign(target, ...sources); }
function Person() {}
mixin(Person.prototype, canEat, canWalk);
classes in es6 instance methods typeOf a class factory vs constructor class declaration instead of expression? instance and static methods
- in es6 you have classes but these are syntactic sugar over prototypical inheritance - over constructor function
- draw will be a method in prototype, define methods in constructor to be an instance method
- typeOf returns a function, under the hood the class objects are functions
- one of the arguments of using factory vs constructor function is that you might forget the use of new keyword, but in class it enforces the use of the new operator, throws an error
- cleaner syntax
- function expressions are terminated with a semicolon and they are not hoisted
- use class declaration instead of expression, but both are not hoisted
- in classical oop we have instance and static methods
- instance of a class which is an object
- static methods are available on the class itself not the instance object
- used to create utility functions that are not tied to a particular object
source file
A source program is a text file that contains instructions written in a high level language. It can not be executed (made to run) by a processor without some additional steps. A source program is also called a source file, source code, or sometimes, just source.
compiler vs transpiler
interpreter and traslator
Compiler - compiles code to a lower level code.
Translator converts the source code from one programming language to another programming language of the same or different level of abstraction.
By definition transpiler is a special form of translator.
Transpiler - compiles code to same level of code/abstraction.
Example:
“Developer code” -> “Another developer code or version”
JavaScript ES2015+ -> JavaScript ES5
synonim parent class vs child class
base/super/parent vs derived/child/sub
property descriptor
A property descriptor encodes the attributes of a property as a JavaScript object. Their TypeScript interfaces look as follows.
interface DataPropertyDescriptor {
value?: any;
writable?: boolean;
configurable?: boolean;
enumerable?: boolean;
}
interface AccessorPropertyDescriptor {
get?: (this: any) => any;
set?: (this: any, v: any) => void;
configurable?: boolean;
enumerable?: boolean;
}
type PropertyDescriptor = DataPropertyDescriptor | AccessorPropertyDescriptor;
