Oojs 1.1

50 %
50 %
Information about Oojs 1.1

Published on April 4, 2014

Author: roooodica

Source: slideshare.net


In JS: CLASS <=> Constructor FN
new FN() => FN() { this }


Prototype / __proto__

Rewriting / Augmenting
built in objects

OOJS Object Oriented Programming in Java Script >> text and code snippets from a great book >> Object-Oriented Java Script >> by >> Stoyan Stefanov

Main Topics FN = CLASS (FN = FN, FN = DATA) Objects Prototype / __proto__ Inheritence Rewriting / Augmenting built in objects

JavaScript has many uses for functions, where most programming languages have a special syntax for some object-oriented features, JavaScript just uses functions. [BASIC CONCEPTS ABOUT FUNCTIONS] more parameters -> ignored less parameters -> undefined N.B. An arguments array is created automatically inside each function. >>> function args() { return arguments; } >>> args(); [] >>> args( 1, 2, 3, 4, true, 'ninja'); [1, 2, 3, 4, true, "ninja"] FUNCTIONS

global variables -describes variables you define outside of any function local variables -which are defined inside a function N.B. It is also important to note that if you don't use var to declare a variable, this Variable is automatically assigned global scope. >>> function f(){ local=2; } >>> local; ERROR >>> f(); >>> local; 2 N.B. A local variable overwrites any global variable with the same name. GOOD PRACTISE - have less global var. var a = 123; function f() { alert(a); //undefined var a = 1; alert(a); } f(); Scope of Variables

How to define constructor functions which can be used to create (construct) new objects. Inside function invoked with new you have access to the value this = contains the object to be returned by the constructor. Augmenting (adding methods and properties to) this object = add functionality to the object being created. function ConstructorFn (name) { this.name = name; // public age = ‘’; // private this.sayHi = function() { return ‘Hi! Im am ’ + this.name; } } var vObj = new ConstructorFn(‘Vali’); vObj.name; vObj.sayHi(); // sayHi=reference, ()=execute In JS: CLASS <=> Constructor FN

JavaScript programs run inside a host environment (the browser for example). Now that you know about objects, it is time for the whole truth: - host environment provides a global object - all global variables are properties of the global object If your host environment is the web browser, the global object is called window. // global variable >>> var a = 1; >>> window['a'] >>> window.a The Global Object

Let's go back to the case where you define a constructor function and call it without the new operator. >>> function Hero(name) {this.name = name;} >>> var h = Hero('Leonardo'); >>> typeof h "undefined" >>> typeof h.name h has no properties In such cases this refers to the global object and all properties set with this become properties of window. >>> name "Leonardo" >>> window.name "Leonardo" The Global Object

Imagine the String() constructor didn't exist. Create a constructor function MyString() that acts like String() as closely as possible. function MyStringConstructor(str){ var _self = this; // this in some context may refer to other object _self.length=0; // public properties _self.string=str; /* self invoking or call expl - init(str); executed when object instanciated */ ( function(str){ _self.length = 0; _self.string = str; var i=0; while( _self.string[i] ) { //self.i = takes i as literal, not var _self[i] = _self.string[i]; i++; } _self.length=i; } )(str); Rewriting built-in objects

_self.toString = function(){ return _self.string; }; _self.charAt = function(index){ validate(index,'index'); return _self[index]; }; _self.concat = function(str){ return _self.string + str; }; _self.slice = function(index1,index2) { validate(index1,'index'); validate(index2,'index2'); if (index2<0) index2=_self.length + index2 -1; var slice = ''; for(var i=index1;i<=index2; i++) { if (_self[i]) slice += _self[i]; } return slice; }; Rewriting built-in objects

// private inner function (as local var), no this operator validate = function(val, rule){ switch(rule){ case 'index': if(val > _self.length || val < 0 ){ throw new Error('Index must be < '+ _self.length + ' and > 0.'); } case 'index2': if(val > _self.length || val < -_self.length ){ throw new Error('2nd index must be < '+ _self.length + ' and > +-'+_self.length); } }}; } //close constructor fn Rewriting built-in objects

http://jsbin.com/agadaf/9/edit (open js & console tabs) var sObj = new MyStringConstructor('rodica'); console.log(sObj.length); console.log(sObj[0]); console.log(sObj.toString()); console.log(sObj.charAt(9)); console.log(sObj.concat(' is coding')); console.log(sObj.slice(1,3)); console.log(sObj.slice(0,-2)); Rewriting built-in objects

The prototype Property The functions in JavaScript are objects and they contain methods and properties. Methods : apply(), call() . Properties : length, constructor , prototype. >>> function foo(a, b){return a * b;} >>> foo.length 2 >>> foo.constructor Function() >>> typeof foo.prototype "object" // <=> foo.prototype = {}

Adding Methods and Properties Using the Prototype function Gadget(name, color) { this.name = name; this.color = color; this.whatAreYou = function(){ return 'I am a ' + this.color + ' ' + this.name; } } Adding methods and properties to the prototype property of the constructor function is another way to add functionality to the objects: Gadget.prototype.price = 100; Gadget.prototype.rating = 3; Gadget.prototype.getInfo = function() { return 'Rating: ' + this.rating + ', price: ' + this.price; }; >>> var newtoy = new Gadget('webcam', 'blac >>> newtoy.name; "webcam" >>> newtoy.whatAreYou(); "I am a black webcam" >>> newtoy.price; 100 >>> newtoy.getInfo(); "Rating: 3, price: 100"

prototype is "live" you can modify the prototype at any time and all objects (even those created before the modification) will inherit the changes. // add a new method to the prototype Gadget.prototype.get = function(what) { return this[what]; }; >>> newtoy.get('price'); 100 >>> newtoy.get('color'); "black‚ The own property takes precedence over the prototype's.

Overwriting Prototype's Property with Own Property The own property takes precedence over the prototype's. function Gadget(name) { this.name = name; } Gadget.prototype.name = 'foo'; >>> var toy = new Gadget('camera'); >>> toy.name; "camera" >>> delete toy.name; true >>> toy.name; "foo"

Enumerating Properties propertyIsEnumerable() ; hasOwnProperty(); // constructor fn function Gadget(name, color) { this.name = name; this.color = color; this.someMethod = function(){return 1;} } Gadget.prototype.price = 100; Gadget.prototype.rating = 3; // new obj var newtoy = new Gadget('webcam', 'black'); for (var prop in newtoy) { // if (newtoy.hasOwnProperty(prop)) { console.log(prop + ' = ' + newtoy[prop]); // } } name = webcam color = black someMethod = function () { return 1; } price = 100 rating = 3

Not all properties show up in a for-in loop. For example, the length (for arrays) and constructor properties will not show up. The properties that do show up are called enumerable. >>> newtoy.hasOwnProperty('name') true >>> newtoy.hasOwnProperty('price') false >>> newtoy.propertyIsEnumerable('name') true >>> newtoy.propertyIsEnumerable('constructor') false Any properties coming down the prototype chain are not enumerable: >>> newtoy.propertyIsEnumerable('price') false Note, however, that such properties are enumerable if you reach the object contained in the prototype and invoke its propertyIsEnumerable(). >>> newtoy.constructor.prototype.propertyIsEnumerable('price') true Enumerating Properties

This method tells you whether that specific object is used as a prototype of another object. // object monkey var monkey = { feeds: 'bananas', breathes: 'air' }; // Human() constructor fn function Human(name) { this.name = name; } Human.prototype = monkey; >>> var george = new Human('George'); >>> monkey.isPrototypeOf(george) true isPrototypeOf()

You can change monkey and all instances will inherit the change: >>> monkey.test = 1 1 >>> george.test 1 Now let's completely overwrite the prototype object with a brand new object: >>> Human.prototype = {paws: 4, hair: true}; It turns out that our old objects do not get access to the new prototype's properties; they still keep the secret link pointing to the old prototype object: >>> george.paws undefined Any new objects you create from now on will use the updated prototype: >>> var newHuman = var Human(); >>> newHuman.paws 4 Change / Overwrite Prototype

__proto__ is not the same as prototype: __proto__ is a property of the instances, whereas prototype is a property of the constructor functions. The secret link is exposed in Firefox as the __proto__ property , it does not exist in Internet Explorer . >>> var developer = new Human(); >>> typeof developer.__proto__ "object" >>> typeof developer.prototype "undefined" The Secret __proto__ Link

Can you get from the developer object to the prototype object? Well, you could, using constructor as the middleman, so having something like developer. constructor.prototype should point to monkey. The problem is that this is not very reliable, because constructor is more for informational purposes and can easily be overwritten at any time. You can overwrite it with something that's not even an object and this will not affect the normal functioning of the prototype chain. >>> developer.constructor = 'junk' "junk" >>> typeof developer.constructor.prototype "undefined" It seems like the prototype is now all messed up ...but it isn't, because the developer still breathes "air": >>> developer.breathes "air" >>> developer.__proto__ Object feeds=bananas breathes=air You should use __proto__ only for learning or debugging purposes. The Secret __proto__ Link

The built-in objects such as the constructor functions Array, String, and even Object, and Function can be augmented through their prototypes, which means that you can, for example, add new methods to the Array prototype and in this way make them available to all arrays. Let's do this. Array.prototype.inArray = function(needle) { /* this points to array obj, .length, [i] – are properties of the obj */ for (var i = 0, len = this.length; i < len; i++) { if (this[i] === needle) { return true; } } return false; } Now all arrays will have the new method. Let's test: >>> var a = ['red', 'green', 'blue']; >>> a.inArray('red'); true >>> a.inArray('yellow'); false Augmenting Built-in Objects

What you consider a missing feature today and decide to augment a prototype for, might be a built-in method tomorrow. However, what if you have already written a lot of code that uses the method and your method is slightly different from the new built-in implementation? If you decide to augment the prototype of built-in objects with a new property, do check for existence of the new property first. if (!String.prototype.reverse) { String.prototype.reverse = function() { /* use array obj reverse method, pass to it the str split in array */ return Array.prototype.reverse.apply(this.split('')).join(''); } } >>> "Stoyan".reverse(); "nayotS" Augmenting Built-in Objects

In this illustration, an object A contains a number of properties. One of the properties is the hidden __proto__ property, which points to another object, B. B's __proto__ property points to C. This chain ends with the Object() object, which is the highest- level parent, and every object inherits from it. This is all good to know, but how does it help us? The practical side is that when object A lacks a property but B has it, A can still access this property as its own. The same applies if B also doesn't have the required property, but C does. This is how inheritance takes place: an object can access any property found somewhere up the inheritance chain. Inheritance

Prototype chaining is the default way to implement inheritance, and is described in the ECMAScript standard. JavaScript works with objects, not classes. You need to create an instance using the new Shape() constructor and after that you can inherit its properties. // 3 constructor functions function Shape(){ this.name = 'shape'; this.toString = function() {return this.name;}; } function TwoDShape(){ this.name = '2D shape'; } function Triangle(side, height) { this.name = 'Triangle'; this.side = side; this.height = height; this.getArea = function(){return this.side * this.height / 2;}; } // inheritance magic TwoDShape.prototype = new Shape(); Triangle.prototype = new TwoDShape(); Inheritance

Add a comment

Related presentations

Presentación que realice en el Evento Nacional de Gobierno Abierto, realizado los ...

In this presentation we will describe our experience developing with a highly dyna...

Presentation to the LITA Forum 7th November 2014 Albuquerque, NM

Un recorrido por los cambios que nos generará el wearabletech en el futuro

Um paralelo entre as novidades & mercado em Wearable Computing e Tecnologias Assis...

Microsoft finally joins the smartwatch and fitness tracker game by introducing the...

Related pages

Oojs 1.1 - HubSlide

In JS: CLASS Constructor FN new FN() => FN() { this } FN = CLASS (FN = FN, FN = DATA) Objects Prototype / __proto__ Inheritence Rewriting / Augmenting buil
Read more

Object-Oriented JavaScript, 2nd Edition: Stoyan Stefanov ...

Object-Oriented JavaScript, 2nd Edition [Stoyan Stefanov, Kumar Chetan Sharma] on Amazon.com. *FREE* shipping on qualifying offers. Key Features ...
Read more

oojs - npm

OOjs. OOjs is a JavaScript library for working with objects. Key features include inheritance, mixins and utilities for working with objects. /* Example ...
Read more

oojs/oojs-ui - Packagist

oojs/oojs-ui Provides library of common widgets, layouts, and windows. ... 1.1.0; php: >=5.5.9; Requires (Dev) jakub-onderka/php-parallel-lint: 0.9.2;
Read more

bérczesi 2008.szepteber 1. /1. - YouTube

bérczesi 2008.szepteber 1. /1. ilyennevmarvan. Subscribe Subscribed Unsubscribe 40 40. Loading ... bérczesi 2008.szepteber 1. /2. - Duration ...
Read more

【KORG】DS-10でリッジレーサーの「GRIP」(Ver.1.1-Release)【DS-10】 - YouTube

【KORG】DS-10でリッジレーサーの「GRIP」(Ver.1.1-Release)【DS-10】 TuKuRu. Subscribe Subscribed Unsubscribe 339 339. Loading ...
Read more

Introduction to Object-Oriented JavaScript - JavaScript | MDN

Introduction to Object-Oriented JavaScript. In This Article. JavaScript review; Object-oriented programming; ... New in JavaScript 1.1; New in JavaScript 1.2;
Read more

Western Digital Corporation - Hard Drives

Western Digital Corporation proudly welcomes SanDisk to its family of brands. The integrated company becomes a leading, comprehensive storage solutions ...
Read more


Mai 2016 31. Mai (Serverkonfiguration) Mathematische Formeln werden jetzt standardmäßig als
Read more