Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Object-oriented Javascript

738 views

Published on

사내 기술 세미나를 다시 시작한다. 나는 그 첫번째 주제로 `Object-oriented Javascript`를 택했다.

예전에 학습했던 [Tuts+ 강의](https://code.tutsplus.com/courses/object-oriented-javascript)를 다시 정리하는 계기가 되었다.

Published in: Technology
  • Be the first to comment

Object-oriented Javascript

  1. 1. Object-oriented Javascript Daniel Ku (http://kjunine.net/)
  2. 2. Primitives and Objects
  3. 3. “Is Everything in JavaScript an object?”
  4. 4. WRONG!
  5. 5. Primitives » string » number » boolean » undefined » null Everything else is object.
  6. 6. “WHAT? Strings have properties and methods!”
  7. 7. var p = 'hello'; p.test = 'test'; console.log(p.test); // ? var o = new String('hello'); o.test = 'test'; console.log(o.test); // ?
  8. 8. var p = 'hello'; p.test = 'test'; console.log(p.test); // undefined var o = new String('hello'); o.test = 'test'; console.log(o.test); // test
  9. 9. 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 ???
  10. 10. HOW to create an object?
  11. 11. Factory Functions
  12. 12. var createPerson = function(firstName, lastName) { return { firstName: firstName, lastName: lastName, sayHi: function() { return 'Hi there'; } }; }; var john = createPerson('John', 'Doe'); var jane = createPerson('Jane', 'Doe');
  13. 13. IT WORKS! BUT, BAD PRACTICE!
  14. 14. The this keyword
  15. 15. this is » window in global context » the object in an object
  16. 16. var name = 'Jane'; var greet = function() { return 'My name is ' + this.name; } var person = { name: 'John', greet: greet }; greet(); // ? person.greet(); // ?
  17. 17. 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
  18. 18. var requestAsync = function(url, callback) { var data = 10; callback(data); }; var requestor = { value: 20, process: function(data) { var sum = this.value + data; console.log(sum); }, request: function() { var url = 'http://example.com'; requestAsync(url, this.process); } }; requestor.request(); // ?
  19. 19. var requestAsync = function(url, callback) { var data = 10; callback(data); }; var requestor = { value: 20, process: function(data) { var sum = this.value + data; console.log(sum); }, request: function() { var url = 'http://example.com'; requestAsync(url, this.process); } }; requestor.request(); // NaN
  20. 20. Function.prototype.bind » reference » es5-shim
  21. 21. var requestAsync = function(url, callback) { var data = 10; callback(data); }; var requestor = { value: 20, process: function(data) { var sum = this.value + data; console.log(sum); }, request: function() { var url = 'http://example.com'; requestAsync(url, this.process.bind(this)); } }; requestor.request(); // 30
  22. 22. Constructor Functions
  23. 23. var Person = function(firstName, lastName) { this.firstName = firstName; this.lastName = lastName; this.sayHi = function() { return 'Hi~'; }; }; var person = new Person('John', 'Doe');
  24. 24. Also, BAD PRACTICE! Do like next.
  25. 25. var Person = function(firstName, lastName) { this.firstName = firstName; this.lastName = lastName; }; Person.prototype.sayHi = function() { return 'Hi~'; }; var person = new Person('John', 'Doe');
  26. 26. The Prototype
  27. 27. Object.getPrototypeOf » reference » es5-shim
  28. 28. person.constructor === Person; // true person.__proto__ === Person.prototype; // true Object.getPrototypeOf(person) === Person.prototype; // true
  29. 29. person.hasOwnProperty('firstName'); // true person.hasOwnProperty('lastName'); // true person.hasOwnProperty('sayHi'); // false person.constructor .prototype .hasOwnProperty('sayHi'); // true
  30. 30. Properties and Property Descriptors
  31. 31. var person = {}; Object.defineProperty(person, 'firstName', { // descriptor object (data descriptor) value: 'John', writable: true }); Object.defineProperty(person, 'lastName', { value: 'Doe', writable: false }); person.firstName; // 'John' person.lastName; // 'Doe'
  32. 32. person.firstName = 'Jane'; person.firstName; // 'Jane' person.lastName = 'Dummy'; person.lastName; // 'Doe'
  33. 33. var person = {}; Object.defineProperties(person, { firstName: { value: 'John', writable: true }, lastName: { value: 'Doe', writable: true }, fullName: { // accessor descriptor get: function() { return this.firstName + ' ' + this.lastName; }, set: function(value) { var splits = value.split(' '); this.firstName = splits[0]; this.lastName = splits[1]; } } });
  34. 34. person.fullName; // 'John Doe' person.fullName = 'Jane Eyre' person.firstName; // 'Jane' person.lastName; // 'Eyre' person.fullName; // 'Jane Eyre'
  35. 35. var person = {}; Object.defineProperty(person, 'firstName', { value: 'John', enumerable: true }); Object.defineProperty(person, 'lastName', { value: 'Doe', enumerable: false }); for (var key in person) { console.log(key, '=>' , person[key]); } // 'firstName => John'
  36. 36. Object.defineProperty » Property Descriptors » Data Descriptors » Accessor Descriptors » reference » es5-shim
  37. 37. Common Keys of Descriptors » configurable (default: false) » enumerable (default: false)
  38. 38. Keys of Data Descriptors » value (default: undefined) » writable (default: false)
  39. 39. Keys of Accessor Descriptors » get (default: undefined) » set (default: undefined)
  40. 40. Constructors and the Prototype REVISITED
  41. 41. var Person = function(firstName, lastName) { Object.defineProperty(this, 'firstName', { value: firstName, writable: true, enumerable: true }); Object.defineProperty(this, 'lastName', { value: lastName, writable: true, enumerable: true }); };
  42. 42. Object.defineProperties(Person.prototype, { sayHi: { value: function() { return 'Hi there'; } }, fullName: { get: function() { return this.firstName + ' ' + this.lastName; }, enumerable: true } }); var person = new Person('John', 'Doe');
  43. 43. HOW to do inheritance?
  44. 44. Prototypical Inheritance
  45. 45. Object.create » reference » es5-shim
  46. 46. var person = { firstName: 'John', lastName: 'Doe' }; var employee = Object.create(person); Object.getPrototypeOf(employee) === person; // true
  47. 47. Object.getOwnPropertyDescriptor » reference » es5-shim
  48. 48. var Person = function(firstName, lastName) { this.firstName = firstName; this.lastName = lastName; }; Person.prototype.sayHi = function() { return 'Hi~'; }; var person = new Person('John', 'Doe'); 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}
  49. 49. Let's Do Inheritance
  50. 50. var Person = function(firstName, lastName) { 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() { return this.firstName + ' ' + this.lastName; }, enumerable: true } });
  51. 51. var Employee = function(firstName, lastName, position) { Person.call(this, firstName, lastName); Object.defineProperties(this, { position: { value: position, writable: true, enumerable: true } }); };
  52. 52. 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 } });
  53. 53. 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'
  54. 54. Prototypical Inheritance
  55. 55. 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
  56. 56. References » Object-Oriented JavaScript on Tuts+ » Inheritance revisited on MDN » ECMA-262-5 in detail by Dmitry Soshnikov
  57. 57. THE END

×