νμ¬ μμ μ€μΈ κ²κ³Ό κ°μ λκ·λͺ¨ νλ‘μ νΈμμ OOPλ₯Ό μ¬μ©νλ κ²μ μ νΈν©λλ€. JavaScriptλ‘ μ¬λ¬ ν΄λμ€λ₯Ό λ§λ€μ΄μΌνμ§λ§ μ€μνμ§ μμ κ²½μ° μ μ΄λ λ κ°μ§ λ°©λ²μΌλ‘ μν ν μ μμ΅λλ€. ꡬ문μ 무μμ΄λ©° μ κ·Έλ° μμΌλ‘ μνλ©λκΉ?
μ μ΄λ μ²μμλ νμ¬ λΌμ΄λΈλ¬λ¦¬λ₯Ό μ¬μ©νκ³ μΆμ§ μμ΅λλ€.
λ€λ₯Έ λ΅λ³μ μ°ΎμΌλ €λ©΄ JavaScriptλ‘ κ°μ²΄ μ§ν₯ νλ‘κ·Έλλ°μ λν΄ μ€λͺ
νλ JavaScriptλ‘ κ°μ²΄ μ§ν₯ νλ‘κ·Έλλ° , 1 λΆ : μμ-Doc JavaScript κΈ°μ¬λ₯Ό μ°Ύμμ΅λλ€ . μμμ μννλ λ μ’μ λ°©λ²μ΄ μμ΅λκΉ?
λ΅λ³
μΈλΆ λΌμ΄λΈλ¬λ¦¬λ₯Ό μ¬μ©νμ§ μκ³ μννλ λ°©λ²μ λ€μκ³Ό κ°μ΅λλ€.
// Define a class like this
function Person(name, gender){
// Add object properties like this
this.name = name;
this.gender = gender;
}
// Add methods like this. All Person objects will be able to invoke this
Person.prototype.speak = function(){
alert("Howdy, my name is" + this.name);
};
// Instantiate new objects with 'new'
var person = new Person("Bob", "M");
// Invoke methods like this
person.speak(); // alerts "Howdy, my name is Bob"
μ€μ λ΅λ³μ κ·Έλ³΄λ€ ν¨μ¬ λ 볡μ‘ν©λλ€. μλ₯Ό λ€μ΄, JavaScriptμλ ν΄λμ€μ κ°μ κ²μ΄ μμ΅λλ€. JavaScriptλ prototype
κΈ°λ° μμ 체κ³λ₯Ό μ¬μ©ν©λλ€ .
λν JavaScriptμλ ν΄λμ€μ μ μ¬ν κΈ°λ₯μ μ 곡νλ κ³ μ ν μ€νμΌμ κ°μ§ μΈκΈ°μλ JavaScript λΌμ΄λΈλ¬λ¦¬κ° λ§μ΄ μμ΅λλ€. μ μ΄λ νλ‘ν νμ κ³Ό jQuery λ₯Ό νμΈνκ³ μΆμ κ²μ΄λ€ .
μ΄ μ€ βμ΅κ³ βλ₯Ό κ²°μ νλ κ²μ Stack Overflowμμ 거룩ν μ μμ μμνλ μ’μ λ°©λ²μ λλ€. λ ν° JavaScriptκ° λ§μ νλ‘μ νΈλ₯Ό μμνλ κ²½μ° μΈκΈ°μλ λΌμ΄λΈλ¬λ¦¬λ₯Ό λ°°μ°κ³ κ·Έ λ°©μλλ‘ μννλ κ²μ΄ μ’μ΅λλ€. μ λ νλ‘ν νμ μ¬λμ΄μ§λ§ μ€ν μ€λ²νλ‘λ jQueryμ μμ‘΄νλ κ² κ°μ΅λλ€.
μΈλΆ λΌμ΄λΈλ¬λ¦¬μ μμ‘΄νμ§ μκ³ βν κ°μ§ λ°©λ²βλ§μλ ν, λ΄κ° μ΄ λ°©μμ κ±°μ λΉμ·ν©λλ€.
λ΅λ³
JavaScriptμμ ν΄λμ€λ₯Ό μ μνλ κ°μ₯ μ’μ λ°©λ²μ ν΄λμ€λ₯Ό μ μνμ§ μλ κ²μ λλ€.
μ§μ¬μΌλ‘.
μ¬λ¬ κ°μ§ λ°©ν₯μ κ°μ²΄ μ§ν₯μ΄ μμΌλ©° κ·Έμ€ μΌλΆλ λ€μκ³Ό κ°μ΅λλ€.
- ν΄λμ€ κΈ°λ° OO (Smalltalkμμ μ²μ μκ°)
- νλ‘ν νμ κΈ°λ° OO (μ체μμ μ²μ μκ°)
- λ©ν° λ©μλ κΈ°λ° OO (CommonLoopsκ° μ²μ λμ ν κ² κ°μ΅λλ€.)
- μ μ΄ κΈ°λ° OO (λͺ¨λ¦)
κ·Έλ¦¬κ³ μλ§ λ΄κ° λͺ¨λ₯΄λ λ€λ₯Έ μ¬λλ€.
JavaScriptλ νλ‘ν νμ κΈ°λ° OOλ₯Ό ꡬνν©λλ€. νλ‘ν νμ κΈ°λ° OOμμλ ν΄λμ€ ν νλ¦Ώμμ μΈμ€ν΄μ€νλλ λμ λ€λ₯Έ κ°μ²΄λ₯Ό 볡μ¬νμ¬ μ κ°μ²΄λ₯Ό λ§λ€κ³ λ©μλλ ν΄λμ€ λμ κ°μ²΄μ μ§μ μ‘΄μ¬ν©λλ€. μμμ μμμ ν΅ν΄ μνλ©λλ€. κ°μ²΄μ λ©μλ λ μμ±μ΄μλ κ²½μ° νλ‘ν νμ (μ¦, 볡μ λ κ°μ²΄)κ³Ό νλ‘ν νμ μ νλ‘ν νμ λ±μ μ°Ύμ΅λλ€.
λ€μ λ§ν΄, μμ μ΄ μμ΅λλ€.
μλ° μ€ν¬λ¦½νΈλ μ€μ λ‘ κ·Έ λͺ¨λΈμ λν νλ₯ν μ‘°μ μ΄μλ€ : μμ±μ. κΈ°μ‘΄ κ°μ²΄λ₯Ό 볡μ¬νμ¬ κ°μ²΄λ₯Ό λ§λ€ μμμλΏλ§ μλλΌ βμμ 곡기κ°μλβκ°μ²΄λ₯Ό λ§λ€ μλ μμ΅λλ€. new
ν€μλλ₯Ό μ¬μ© νμ¬ ν¨μλ₯Ό νΈμΆνλ©΄ ν΄λΉ ν¨μκ° μμ±μκ°λκ³ this
ν€μλλ νμ¬ κ°μ²΄λ₯Ό κ°λ¦¬ ν€μ§ μκ³ μλ‘ μμ±λ βλΉβκ°μ²΄λ₯Ό κ°λ¦¬ ν΅λλ€. λ°λΌμ μνλ λ°©μμΌλ‘ κ°μ²΄λ₯Ό κ΅¬μ± ν μ μμ΅λλ€. μ΄λ¬ν λ°©μμΌλ‘ JavaScript μμ±μλ κΈ°μ‘΄ ν΄λμ€ κΈ°λ° OOμμ ν΄λμ€ μν μ€ νλλ₯Ό μν ν μ μμ΅λλ€. μ κ°μ²΄μ ν
νλ¦Ώ λλ μ²μ¬μ§ μν μν©λλ€.
μ΄μ JavaScriptλ λ§€μ° κ°λ ₯ν μΈμ΄μ΄λ―λ‘ μνλ κ²½μ° JavaScript λ΄μμ ν΄λμ€ κΈ°λ° OO μμ€ν μ μ½κ² ꡬνν μ μμ΅λλ€. κ·Έλ¬λ Java κ°νλ λ°©μμ΄ μλλΌ μ€μ λ‘ νμν κ²½μ°μλ§μ΄ μμ μ μνν΄μΌν©λλ€.
λ΅λ³
ES2015 μμ
ES2015 μ¬μμμλ νλ‘ν νμ μμ€ν μ λΉν΄ λ¨μν ν΄λμ€ κ΅¬λ¬Έμ μ¬μ©ν μ μμ΅λλ€.
class Person {
constructor(name) {
this.name = name;
}
toString() {
return `My name is ${ this.name }.`;
}
}
class Employee extends Person {
constructor(name, hours) {
super(name);
this.hours = hours;
}
toString() {
return `${ super.toString() } I work ${ this.hours } hours.`;
}
}
νν
μ£Όμ μ΄μ μ μ μ λΆμ λꡬκ°μ΄ ꡬ문μλ³΄λ€ μ½κ² ββνκ²ν ν μ μλ€λ κ²μ λλ€. λν ν΄λμ€ κΈ°λ° μΈμ΄λ₯Ό μ¬μ©νλ λ€λ₯Έ μ¬λλ€μ΄ ν΄λΉ μΈμ΄λ₯Ό ν΄λ¦¬ κΈλ‘―μΌλ‘ μ¬μ©νλ κ²μ΄ λ μ½μ΅λλ€.
κ²½κ³
νμ¬ μ ν μ¬νμμ£Όμνμμμ€. κ°μΈ μμ±μ μ»μΌλ €λ©΄ Symbols λλ WeakMaps μ¬μ©μ μμ‘΄ν΄μΌν©λλ€ . ν₯ν 릴리μ€μμλ μ΄λ¬ν λλ½ λ κΈ°λ₯μ ν¬ν¨νλλ‘ ν΄λμ€κ° νμ₯ λ κ°λ₯μ±μ΄ λμ΅λλ€.
μ§μνλ€
λΈλΌμ°μ μ§μ μ νμ¬λ‘μλ μ’μ§ μμ§λ§ (IEλ₯Ό μ μΈν κ±°μ λͺ¨λ μ¬λμ΄ μ§μ), μ΄μ Babel κ³Ό κ°μ νΈλμ€ νμΌλ¬μμ μ΄λ¬ν κΈ°λ₯μ μ¬μ©ν μ μμ΅λλ€ .
μμ
λ΅λ³
μ λ Daniel X. Moore βsλ₯Ό μ νΈν©λλ€ {SUPER: SYSTEM}
. μ΄λ μ€μ μΈμ€ν΄μ€ λ³μ, νΉμ± κΈ°λ° μμ, ν΄λμ€ κ³μΈ΅ λ° κ΅¬μ± μ΅μ
κ³Ό κ°μ μ΄μ μ μ 곡νλ νλ¬Έμ
λλ€. μλ μμ λ μ€μ μΈμ€ν΄μ€ λ³μμ μ¬μ©μ 보μ¬μ€λλ€. μ΄κ²μ΄ κ°μ₯ ν° μ₯μ μ΄λΌκ³ μκ°ν©λλ€. μΈμ€ν΄μ€ λ³μκ° νμνμ§ μκ³ κ³΅κ° λλ κ°μΈ λ³μμλ§ λ§μ‘±νλ©΄ λ κ°λ¨ν μμ€ν
μ΄μμ μ μμ΅λλ€.
function Person(I) {
I = I || {};
Object.reverseMerge(I, {
name: "McLovin",
age: 25,
homeState: "Hawaii"
});
return {
introduce: function() {
return "Hi I'm " + I.name + " and I'm " + I.age;
}
};
}
var fogel = Person({
age: "old enough"
});
fogel.introduce(); // "Hi I'm McLovin and I'm old enough"
μμ°, κ·Έκ²μ μ€μ λ‘ κ·Έλ€μ§ μ μ©νμ§λ μμ§λ§ μλΈ ν΄λμ€λ₯Ό μΆκ°νλ κ²μ μ΄ν΄λ³΄μμμ€.
function Ninja(I) {
I = I || {};
Object.reverseMerge(I, {
belt: "black"
});
// Ninja is a subclass of person
return Object.extend(Person(I), {
greetChallenger: function() {
return "In all my " + I.age + " years as a ninja, I've never met a challenger as worthy as you...";
}
});
}
var resig = Ninja({name: "John Resig"});
resig.introduce(); // "Hi I'm John Resig and I'm 25"
λ λ€λ₯Έ μ₯μ μ λͺ¨λκ³Ό νΉμ± κΈ°λ° μμ κΈ°λ₯μ λλ€.
// The Bindable module
function Bindable() {
var eventCallbacks = {};
return {
bind: function(event, callback) {
eventCallbacks[event] = eventCallbacks[event] || [];
eventCallbacks[event].push(callback);
},
trigger: function(event) {
var callbacks = eventCallbacks[event];
if(callbacks && callbacks.length) {
var self = this;
callbacks.forEach(function(callback) {
callback(self);
});
}
},
};
}
person ν΄λμ€λ₯Ό κ°λ μμλ λ°μΈλ© κ°λ₯ν λͺ¨λμ΄ μμ΅λλ€.
function Person(I) {
I = I || {};
Object.reverseMerge(I, {
name: "McLovin",
age: 25,
homeState: "Hawaii"
});
var self = {
introduce: function() {
return "Hi I'm " + I.name + " and I'm " + I.age;
}
};
// Including the Bindable module
Object.extend(self, Bindable());
return self;
}
var person = Person();
person.bind("eat", function() {
alert(person.introduce() + " and I'm eating!");
});
person.trigger("eat"); // Blasts the alert!
κ³΅κ° : μ λ Daniel X. Moore {SUPER: SYSTEM}
μ
λλ€. JavaScriptλ‘ ν΄λμ€λ₯Ό μ μνλ κ°μ₯ μ’μ λ°©λ²μ
λλ€.
λ΅λ³
var Animal = function(options) {
var name = options.name;
var animal = {};
animal.getName = function() {
return name;
};
var somePrivateMethod = function() {
};
return animal;
};
// usage
var cat = Animal({name: 'tiger'});
λ΅λ³
λ€μμ μ§κΈκΉμ§ μ¬μ©ν μλ° μ€ν¬λ¦½νΈλ‘ κ°μ²΄λ₯Ό λ§λλ λ°©λ²μ λλ€.
μ 1 :
obj = new Object();
obj.name = 'test';
obj.sayHello = function() {
console.log('Hello '+ this.name);
}
μ 2 :
obj = {};
obj.name = 'test';
obj.sayHello = function() {
console.log('Hello '+ this.name);
}
obj.sayHello();
μ 3 :
var obj = function(nameParam) {
this.name = nameParam;
}
obj.prototype.sayHello = function() {
console.log('Hello '+ this.name);
}
μμ 4 : Object.create ()μ μ€μ μ΄μ [μ΄ λ§ν¬]λ₯Ό μ°Έμ‘°νμμμ€
var Obj = {
init: function(nameParam) {
this.name = nameParam;
},
sayHello: function() {
console.log('Hello '+ this.name);
}
};
var usrObj = Object.create(Obj); // <== one level of inheritance
usrObj.init('Bob');
usrObj.sayHello();
μμ 5 (μ¬μ©μ μ μ λ Crockfordμ Object.create) :
Object.build = function(o) {
var initArgs = Array.prototype.slice.call(arguments,1)
function F() {
if((typeof o.init === 'function') && initArgs.length) {
o.init.apply(this,initArgs)
}
}
F.prototype = o
return new F()
}
MY_GLOBAL = {i: 1, nextId: function(){return this.i++}} // For example
var userB = {
init: function(nameParam) {
this.id = MY_GLOBAL.nextId();
this.name = nameParam;
},
sayHello: function() {
console.log('Hello '+ this.name);
}
};
var bob = Object.build(userB, 'Bob'); // Different from your code
bob.sayHello();
ES6 / ES2015λ‘ λ΅λ³μ κ³μ μ λ°μ΄νΈνλ €λ©΄
ν΄λμ€λ λ€μκ³Ό κ°μ΄ μ μλ©λλ€.
class Person {
constructor(strName, numAge) {
this.name = strName;
this.age = numAge;
}
toString() {
return '((Class::Person) named ' + this.name + ' & of age ' + this.age + ')';
}
}
let objPerson = new Person("Bob",33);
console.log(objPerson.toString());
λ΅λ³
JavaScriptμμ Douglas Crockfordμ Prototypal Inheritanceμ JavaScript μμ Classical Inheritanceλ₯Ό μ½μ΄μΌνλ€κ³ μκ°ν©λλ€ .
κ·Έμ νμ΄μ§μμ μ :
Function.prototype.method = function (name, func) {
this.prototype[name] = func;
return this;
};
ν¨κ³Ό? λ³΄λ€ μ°μν λ°©λ²μΌλ‘ λ©μλλ₯Ό μΆκ° ν μ μμ΅λλ€.
function Parenizor(value) {
this.setValue(value);
}
Parenizor.method('setValue', function (value) {
this.value = value;
return this;
});
λν κ·Έμ λΉλμ€λ₯Ό μΆμ²ν©λλ€ :
Advanced JavaScript .
κ·Έμ νμ΄μ§μμ λ λ§μ λΉλμ€λ₯Ό μ°Ύμ μ μμ΅λλ€ : http://javascript.crockford.com/
John Reisig μ±
μμ Douglas Crockforμ μΉ μ¬μ΄νΈμμ λ§μ μμ λ₯Ό μ°Ύμ μ μμ΅λλ€.