RK !

Let's make comprehension easy ...

JS - Fundamentals

Author: Romaan, Last Updated: March 2, 2017, 4:38 a.m.

In JavaScript everything is an object except for the primitive data types (boolean, number and string), and undefined. On the other hand null is actually an object reference even though you may believe at first otherwise. This is the reason typeof null returns "object"

Hence a function can be used in place of an object. Similarly arrays are also objects in JavaScript. On the other hand objects can be thought of as associative arrays.

The most important point however is that there are no classes in JavaScript because JavaScript is a prototypal object oriented language. This means that objects in JavaScript directly inherit from other objects. Hence we don't need classes. All we need is a way to create and extend objects.

JavaScript objects are containers for named values, called properties and methods.

Creating a JavaScript Object

With JavaScript, you can define and create your own objects.

There are different ways to create new objects:

  • Define and create a single object, using an object literal.
var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};
  • Define and create a single object, with the keyword new.
var person = new Object();
person.firstName = "John";
person.lastName = "Doe";
person.age = 50;
person.eyeColor = "blue";
  • Define an object constructor, and then create objects of the constructed type.
function person(first, last, age, eye) {
    this.firstName = first;
    this.lastName = last;
    this.age = age;
    this.eyeColor = eye;
}
var myFather = new person("John", "Doe", 50, "blue");
var myMother = new person("Sally", "Rally", 48, "green");

The this Keyword

In JavaScript, the thing called this, is the object that "owns" the JavaScript code.

The value of this, when used in a function, is the object that "owns" the function.

The value of this, when used in an object, is the object itself.

The this keyword in an object constructor does not have a value. It is only a substitute for the new object.

The value of this will become the new object when the constructor is used to create an object.

 

JavaScript Object Prototypes:

Every JavaScript object has a prototype. The prototype is also an object.

All JavaScript objects inherit their properties and methods from their prototype.

All JavaScript objects inherit the properties and methods from their prototype.

Objects created using an object literal, or with new Object(), inherit from a prototype called Object.prototype.

The standard way to create an object prototype is to use an object constructor function:

Example

function Person(first, last, age, eyecolor) {
    this.firstName = first;
    this.lastName = last;
    this.age = age;
    this.eyeColor = eyecolor;
}

With a constructor function, you can use the new keyword to create new objects from the same prototype:

Example

var myFather = new Person("John", "Doe", 50, "blue");
var myMother = new Person("Sally", "Rally", 48, "green");

The constructor function is the prototype for Person objects.

Properties and methods can be added to the object at any time, but cannot be added directly to prototype. For example:

myFather.nationality = "English"; // is possible 

Person.nationality = "Enginlish"; // is an error

Using the prototype Property

The JavaScript prototype property allows you to add new properties to an existing prototype:

Example

function Person(first, last, age, eyecolor) {
    this.firstName = first;
    this.lastName = last;
    this.age = age;
    this.eyeColor = eyecolor;
}
Person.prototype.nationality = "English";

Apply vs. Call vs. Bind in JavaScript

  • Call invokes the function and allows you to pass in arguments one by one.
  • Apply invokes the function and allows you to pass in arguments as an array.
  • Bind returns a new function, allowing you to pass in a this array and any number of arguments.

When To Use Each

Call and apply are pretty interchangeable. Just decide whether it’s easier to send in an array or a comma separated list of arguments.

I always remember which one is which by remembering that Call is for comma (separated list) and Apply is for Array.

Bind is a bit different. It returns a new function. Call and Apply execute the current function immediately.

Bind is great for a lot of things. We can use it to curry functions like in the above example. We can take a simple hello function and turn it into a helloJon or helloKelly. We can also use it for events like onClick where we don’t know when they’ll be fired but we know what context we want them to have.

Call example:

var person1 = {firstName: 'Jon', lastName: 'Kuperman'};
var person2 = {firstName: 'Kelly', lastName: 'King'};
function say(greeting) {
    console.log(greeting + ' ' + this.firstName + ' ' + this.lastName);
}
say.call(person1, 'Hello'); // Hello Jon Kuperman
say.call(person2, 'Hello'); // Hello Kelly King

Apply Example:

var person1 = {firstName: 'Jon', lastName: 'Kuperman'};
var person2 = {firstName: 'Kelly', lastName: 'King'};
function say(greeting) {
    console.log(greeting + ' ' + this.firstName + ' ' + this.lastName);
}
say.apply(person1, ['Hello']); // Hello Jon Kuperman
say.apply(person2, ['Hello']); // Hello Kelly King

Bind Example:

var person1 = {firstName: 'Jon', lastName: 'Kuperman'};
var person2 = {firstName: 'Kelly', lastName: 'King'};
function say() {
    console.log('Hello ' + this.firstName + ' ' + this.lastName);
}
var sayHelloJon = say.bind(person1);
var sayHelloKelly = say.bind(person2);
sayHelloJon(); // Hello Jon Kuperman
sayHelloKelly(); // Hello Kelly King

 

 

 

Popular Tags:


Related Articles:


Comments: