The Basics of Object-Oriented JavaScript

Understand JavaScript Callback Functions and Use Them (Learn JavaScript Higher-order Functions, aka Callback Functions) In JavaScript, functions are first-class objects; that is, functions are of the type Object and they can be used in a first-class manner like any other object (String, Array, Number, etc.) since they are in fact objects themselves. They can be “stored in variables, passed as arguments to functions, created within functions, and returned from functions”1. Become an Elite/Highly Paid Specialized Software Engineer (Frontend, Fullstack, etc.) Within 8–10 Months, Earn MORE than the Avg. New CS Graduate Earns. 45%-Off Tuition for the December Session By the founder of JavaScriptIsSexy Because functions are first-class objects, we can pass a function as an argument in another function and later execute that passed-in function or even return it to be executed later. Callback functions are derived from a programming paradigm known as functional programming. What is a Callback or Higher-order Function? How Callback Functions Work?

Using the JavaScript API | JW Player | Best HTML5 & Flash Online Video Player Home / JavaScript API / JavaScript API Quick Start This article explains how to use the JavaScript API component of JW Player. This API can be used to enhance the functionality of your video embeds and/or to implement rich video-page interactions. It abstracts any differences between Flash and HTML5, so the code you write will work with both technologies. Getting Started Before it is possible to interact with a player, that player should be setup. When the player is setup, API calls can immediately be made. <p><a onclick='jwplayer().play()'>Toggle playback</a> | <a onclick='alert(jwplayer().getVolume())'>Get audio volume</a></p> Here is the combination of setup code and API links in action: Toggle playback | Report volume Multiple Players When you have multiple players on a page, you must be specific about which player you want to interact with. Note the selector jwplayer(0) is actually the same as jwplayer(). API Calls Cheat Sheet The table below act as a cheat sheet of all API calls.

Object Constructor and prototyping Object Constructor and prototyping In the world of OOP, the previous ways of defining an object is too limiting in many situations. We need a way to create an object "type" that can be used multiple times without having to redefine the object every time to meet each particular instance's needs. The standard way to achieve this is to use the Object Constructor function. An object constructor is merely a regular JavaScript function, so it's just as robust (ie: define parameters, call other functions etc). Lets use a real world item "cat" as an example. Here the function "cat()" is an object constructor, and its properties and methods are declared inside it by prefixing them with the keyword "this." Adding methods to our object using prototype We saw above how to add a method to our constructor function by merely declaring it inside the function. Lets extend our original cat() object above with an additional method to change the cat's name, using prototype: The possibilities are endless.

Methods Within Constructor vs Prototype in Javascript | The Code Ship At many instances when working with javascript objects, different pieces of code can give the same result on the surface yet underneath they could be different. One scenario is when adding methods to your Javascript 'classes'. First of all lets agree on the fact that there are no classes in Javascript, and what you may refer to as a class is known as a constructor. That is because Javascript is not your classic class-based language but rather a prototype-based language. It's not what it looks like One way that may seem very natural is to set the methods right within the constructor, just like this. function Person(name, family) { this.name = name; this.family = family; this.getFull = function () { return this.name + " " + this.family; }; } Looks pretty natural for someone coming from a class based language like Java, and it will work as expected. Yet the truth is, this approach might be wrong for many situations. All that is gold does not glitter There is no silver bullet ↑ Back to top

Understanding JavaScript Function Invocation and “this” Over the years, I've seen a lot of confusion about JavaScript function invocation. In particular, a lot of people have complained that the semantics of this in function invocations is confusing. In my opinion, a lot of this confusion is cleared up by understanding the core function invocation primitive, and then looking at all other ways of invoking a function as sugar on top of that primitive. First, let's look at the core function invocation primitive, a Function's call method[1]. Make an argument list (argList) out of parameters 1 through the end The first parameter is thisValue Invoke the function with this set to thisValue and the argList as its argument list For example: function hello(thing) { console.log(this + " says hello " + thing); } hello.call("Yehuda", "world") //=> Yehuda says hello world As you can see, we invoked the hello method with this set to "Yehuda" and a single argument "world". Obviously, invoking functions with call all the time would be pretty annoying.

Using Prototype Property in JavaScript Exclusive offer: get 50% off this eBook here Object-Oriented JavaScript — Save 50% Create scalable, reusable high-quality JavaScript applications and libraries by Stoyan Stefanov | August 2008 | AJAX Web Development In this article by Stoyan Stefanov, you'll learn about the prototype property of the function objects. The following topics are discussed in this article: Every function has a prototype property and it contains an objectAdding properties to the prototype objectUsing the properties added to the prototypeThe difference between own properties and properties of the prototype__proto__, the secret link every object keeps to its prototypeMethods such as isPrototypeOf(), hasOwnProperty(), and propertyIsEnumerable() The functions in JavaScript are objects and they contain methods and properties. If you define a simple function foo() you can access its properties as you would do with any other object: >>>function foo(a, b){return a * b;}>>>foo.length >>>foo.constructor Function() "object" "foo"

Understanding JavaScript’s this keyword (In Portugese) The JavaScript this keyword is ubiquitous yet misconceptions abound. What you need to know Every execution context has an associated ThisBinding whose lifespan is equal to that of the execution context and whose value is constant. There are three types of execution context: global, function and evaluation. Here’s a tabular summary followed by a little more detail, and some examples: 1. 2. a) Invoke as a methodthis is the baseValue of the property reference b) Invoke as baseless function callthis is the global object (or undefined in strict mode) The same applies to self invoking functions: c) Invoke using Function.prototype.callthisis passed by argument d) Invoke using Function.prototype.applythis is passed by argument e) Invoke a constructor using newthis is the newly created object 3. What you might want to know This section explores the process by which this gets its value in the functional context – using ECMA-262 version 5.1 as a reference. from ECMA 5.1, 11.1.1 1. 1. In full…