Object-oriented Javascript

Object-oriented
Javascript
Daniel Ku (http://kjunine.net/)

“Is Everything
in JavaScript
an object?”

Primitives
» string
» number
» boolean
» undefined
» null
Everything else is object.

“WHAT?
Strings have
properties and methods!”

var p = 'hello';
p.test = 'test';
console.log(p.test); // ?
var o = new String('hello');
o.test = 'test';
console.log(o.test); // ?

var p = 'hello';
p.test = 'test';
console.log(p.test); // undefined
var o = new String('hello');
o.test = 'test';
console.log(o.test); // test

typeof 'hello'; // string
typeof new String('hello'); // object
typeof 10 // number
typeof new Number(10); // object
typeof false; // boolean
typeof new Boolean(true); // object
typeof undefined; // undefined
typeof null; // object ???

this
is
» window in global context
» the object in an object

var name = 'Jane';
var greet = function() {
return 'My name is ' + this.name;
}
var person = {
name: 'John',
greet: greet
};
greet(); // ?
person.greet(); // ?

var name = 'Jane';
var greet = function() {
return 'My name is ' + this.name;
}
var person = {
name: 'John',
greet: greet
};
greet(); // My name is Jane
person.greet(); // My name is John

var data = 10;
callback(data);
};
var requestor = {
value: 20,
console.log(sum);
},
requestAsync(url, this.process);
}
};
requestor.request(); // NaN

Function.prototype.bind
» reference
» es5-shim

var data = 10;
callback(data);
};
var requestor = {
value: 20,
console.log(sum);
},
requestAsync(url, this.process.bind(this));
}
};
requestor.request(); // 30

var Person = function(firstName, lastName) {
this.firstName = firstName;
this.lastName = lastName;
this.sayHi = function() {
return 'Hi~';
};
};
var person = new Person('John', 'Doe');

Also,
BAD PRACTICE!
Do like next.

};
Person.prototype.sayHi = function() {
return 'Hi~';
};

Object.getPrototypeOf
» reference
» es5-shim

person.constructor === Person; // true
person.__proto__ === Person.prototype; // true
Object.getPrototypeOf(person)
=== Person.prototype; // true

person.hasOwnProperty('firstName'); // true
person.hasOwnProperty('lastName'); // true
person.hasOwnProperty('sayHi'); // false
person.constructor
.prototype
.hasOwnProperty('sayHi'); // true

Properties and
Property
Descriptors

person.firstName = 'Jane';
person.firstName; // 'Jane'
person.lastName = 'Dummy';
person.lastName; // 'Doe'

person.fullName; // 'John Doe'
person.fullName = 'Jane Eyre'
person.firstName; // 'Jane'
person.lastName; // 'Eyre'
person.fullName; // 'Jane Eyre'

Object.defineProperty
» Property Descriptors
» Data Descriptors
» Accessor Descriptors
» reference
» es5-shim

Common Keys of Descriptors
» configurable (default: false)
» enumerable (default: false)

Keys of Data Descriptors
» value (default: undefined)
» writable (default: false)

Keys of Accessor Descriptors
» get (default: undefined)
» set (default: undefined)

Constructors and
the Prototype
REVISITED

Object.defineProperty(this, 'firstName', {
value: firstName,
writable: true,
enumerable: true
});
Object.defineProperty(this, 'lastName', {
value: lastName,
writable: true,
enumerable: true
});
};

Object.defineProperties(Person.prototype, {
sayHi: {
value: function() {
return 'Hi there';
}
},
fullName: {
get: function() {
},
enumerable: true
}
});

Object.create
» reference
» es5-shim

var person = {
firstName: 'John',
lastName: 'Doe'
};
var employee = Object.create(person);
Object.getPrototypeOf(employee) === person; // true

Object.getOwnPropertyDescriptor
» reference
» es5-shim

};
Person.prototype.sayHi = function() {
return 'Hi~';
};
Object.getOwnPropertyDescriptor(Person.prototype, 'sayHi');
// {value: function, writable: true, enumerable: true, configurable: true}
Object.getOwnPropertyDescriptor(person, 'firstName');
// {value: "John", writable: true, enumerable: true, configurable: true}

Object.defineProperties(this, {
firstName: {
value: firstName,
writable: true,
enumerable: true
},
lastName: {
value: lastName,
writable: true,
enumerable: true
}
});
};
Object.defineProperties(Person.prototype, {
sayHi: {
value: function() {
return 'Hi there';
}
},
fullName: {
get: function() {
},
enumerable: true
}
});

var Employee = function(firstName, lastName, position) {
Person.call(this, firstName, lastName);
Object.defineProperties(this, {
position: {
value: position,
writable: true,
enumerable: true
}
});
};

Employee.prototype = Object.create(Person.prototype, {
sayHi: {
value: function() {
return Person.prototype.sayHi.call(this) + ' and here';
}
},
fullName: {
get: function() {
var descriptor = Object.getOwnPropertyDescriptor(Person.prototype, 'fullName');
return descriptor.get.call(this) + ' ' + this.position;
},
enumerable: true
},
constructor: {
value: Employee
}
});

var employee = new Employee('John', 'Doe', 'Manager');
for (var key in employee) {
console.log(key, '=>' , employee[key]);
}
// 'firstName => John'
// 'lastName => Doe'
// 'position => Manager'
// 'fullName => John Doe Manager'

Object.getPrototypeOf(employee) === Employee.prototype; // true
employee.__proto__ === Employee.prototype; // true
employee.__proto__.__proto__ === Person.prototype; // true
employee.__proto__.__proto__.__proto__ === Object.prototype; // true
employee.__proto__.__proto__.__proto__.__proto__ === null; // true

References
» Object-Oriented JavaScript on Tuts+
» Inheritance revisited on MDN
» ECMA-262-5 in detail by Dmitry Soshnikov

Object-oriented Javascript

More Related Content

What's hot (19)

Viewers also liked (7)

Similar to Object-oriented Javascript (20)

Recently uploaded (20)

Object-oriented Javascript