2020. 9. 10. 01:25ㆍ기초 Java Script
ES6 문법 이전에는 JavaScript를 객체지향적으로 사용하기 위한 다양한 시도가 있었습니다. Instantiation는 인스턴스를 만드는 과정으로 class와 같이 청사진으로 만들어서 코딩을 할 때 사용되었다고 합니다.
1. Functional
Var Cooking = function(ingredient){
var cookingInstnace = {};
cookingInstance.ingredient = ingredient;
cookingInstance.bake = function(){
this.ingredient + 'yummy bake';
}
return cookingInstance;
};
var cooking1 = Cooking('flour');
함수를 선언에서 그 안에 객체를 만들고 필요한 데이터와 메소드를 저장하는 방식! ingredient에 어떤 재료를 넣어도 원하는 메소드로 요리를 하면 원하는 값을 얻을 수 있습니다!
# 함수를 선언 -> 객체를 만들고 -> 메소드로 사용할 함수를 객체에 담고 -> 객체를 출력
2. Functional Shared
var extend = function(to, from){
for (var key in from) {
to[key] = from[key;
}
};
var cookingMethods = {};
cookingMethods.fry = function(){
this.chicken += 1;
};
var KFC = function(num){
var storage = {
chicken : num
};
extend(KFC, cookingMethods);
return storage;
};
var KFC잠실점 = KFC(26);
함수 공유 형태는 객체 함수와 메소드 함수를 따로 선언한 다음에 extend라는 함수를 통해서 합치는 과정을 가집니다. 이렇게 할 경우1번의 Functional 과 다르게 매번 새로운 객체를 만들 때마다 메소드를 위한 메모리를 할당하는 것이 아니라 cookingMethods라는 한 주소를 공유하기 때문에 메모리 효율이 좋아집니다.
3. Prototypal
var cookingMethods = {};
cookingMethods.fry = function(){
this.chicken += 1;
};
var KFC = function(num){
var storage = object.create(cookingMethods); // 여기만 바꿔준다!
storage.chicken = num;
return storage;
};
var KFC잠실점 = KFC(26);
Prototypal은 2번과 비슷하지만 storage라는 객체를 선언하는 것이 아니라 'Object.create'를 통해서 특정 객체를 프로토타입으로 가지는 객체를 만들 수 있다. XX.prototype = XX과 다른 점은 새로운 프로토타입 객체를 복사해서 만들기 때문에 한 쪽을 변경한다고 해서 주소로 있는 프토로타입 객체에 변화가 안 생긴다는 것이다.
4. Proseudoclassical
var KFC = function(num){
this.chicken = num;
};
KFC.prototype.cookingMethods = function() {
this.chiken +=1;
};
var KFC마포점 = new KFC(27);
BlinkyDancer.prototype = Object.create(Dancer.prototype);
BlinkyDancer.prototype.constructor = BlinkyDancer; 를 통해서 새로만든 프로토타입의 모체의 프로토타입을 복사하고 연결하는 과정도 잊지마!
'기초 Java Script' 카테고리의 다른 글
다시 보는 call, apply, bind 차이 (1) | 2021.01.07 |
---|---|
🎯Asynchronous & Promise 비동기적 사고!🎱 (0) | 2020.09.21 |
🧑🏼🚒절차 지향 VS 객체 지향 / Procedural Programming vs OOP( Object Oriented Programming)👮🏻♂️ (0) | 2020.09.09 |
함수(Function)에 대해서 알아보자!💻📦 (1) | 2020.08.06 |
변수(Variable)는 무엇인가? 💻🤷🏿♂️ [Java Script] (1) | 2020.08.05 |