Building objects

객체를 생성하는 여러가지 방식 중 하나는 new 키워드를 활용한
생성자 함수 를 사용하는 방법이 있다.

new keyword

// java 같은..
function Person() {
	console.log(this);
    this.firstname = 'John',
    this.lastname = 'Doe'
    console.log('This function is invoked.');
}

//new는 특별한 operator 이다
var john = new Person(); //생성자 함수
//console.log(john);

{}
This function is invoked.
Person {firstname: 'John', lastname: 'Doe'}

생성자 함수 (new + function() )

생성자 함수가 실행되면 아래와 같은 순서로 진행된다.

1. {} 빈 객체 생성
2. Person() 실행 - execution 생성, this 생성(this 는 생성된 빈 객체 가르킴)
3. Person() 내 로직 따라 빈객체에 firstname, lastname 속성 추가 됨
4. 생성된 객체 Person{firstname: ‘John’, lastname: ‘Doe’} 리턴

따라서 new 키워드와 + 정의된 Person() 를 실행 할 때마다 새로운 객체,
Person()의 인스턴스 를 생성한다고 할 수 있다.

//필요한 요소를 인자로 받으면 서로 다른 속성 가진 인스턴스 생성 가능
function Person(firstname, lastname) {
    this.firstname = firstname;
    this.lastname = lastname;
}

var john = new person('John', 'Doe);
var jane = new person('Jane', 'Doe');

console.log(jane);

// Person {firstname: 'Jane', lastname: 'Doe'}

객체가 생성되면 자동으로 prototype 이라는 속성이 빈 객체 {} 로 추가된다. 생성자함수를 사용 할 때만, prototype 속성이 사용된다.

//아래 코드를 추가하면 
Person.prototype.getFullName = function() {
    return this.firstname + ' ' + this.lastname;
}

// new Person() 으로 생성된 객체들은 모두 getFullName() 을 속성으로 갖게된다.

그냥 Person() 내에 해당 함수를 추가해주면 되지않나?
그렇게 되면 생성된 모든객체에 함수가 중복존재하기 때문에 메모리가 낭비된다.

주의사항

new를 실수로 빼먹으면 Person() 함수는 리턴값이 없기 때문에 undefined error 발생, 이러한 이유로 생성자 함수를 일반 함수와 구분하기 위해 첫글자를 대문자로 생성해주는 컨벤션 존재

built-in functions

각 타입의 기본객체의 prototype 에 속성이나 메소드를 추가하면 생성자함수로 생성한 모든 객체에서 해당 속성, 메소드에 접근할 수 있다.

String.prototype.isLengthGreaterThan = function(limit) {
    return this.length > limit;
}

// String 기본객체의 prototype 에 함수 추가 했음으로
// 모든 string 에서 해당 함수 호출 가능
console.log('John'.isLengthGreaterThan(3));

Number.prototype.isPositive = function() {
    return this > 0;
}
var a = new Number(3);
a.isPositive(); // true

주의사항

// 객체타입과 원시타입 간 차이 주의 할 것
var a = 3; //primitive type
var b = new Number(3); // Object
var c = Number('3'); // 3

a == b // true;
a === b // false;

//Arrays and For in
var arr = ['John', 'Jane', 'Jim'];

for (var prop in arr) {
    console.log(prop + ': ' + arr[prop]);
}

// 0: John
// 1: Jane
// 2: Jim   ???

//array 도 객체라서 key : value pair 로 묶여버림
Array.prototype.myCustomFeature = 'cool'; // myCustomFeature : cool

// 자바스크립트 배열에서는 array 에서 for..in 쓰지 말 것!

또 다른방식으로 객체를 생성하는 방식을 알아보자

var person = {
    firstname: 'Default',
    lastname: 'Default',
    greet: function() {
        return 'Hi ' + this.firstname;
    }
}

//prototype 이 생성된 객체 그자체로 설정되는 방식
var john = Object.create(person);
john.firstname = 'John';
john.lastname = 'Doe';
console.log(john);

Class & ES6

// prototype 을 설정하는 방식 extends
class Person extends Human{
    constructor(firstname, lastname) {
      //super(firstname, lastname); 
        this.firstname = firstname;
        this.lastname = lastname;
    }
    greet() {
        return 'Hi ' + firstname;
    }
}

var john = new Person('John', 'Doe');

Odds and Ends

// Initialization

var people = [
	//object 1
    {
        firstname: 'John',
        lastname: 'Doe'
        address: [
            '111 Main St.',
            '222 Third St.'
        ]
    },
    //object2
    {
        firstname: 'Jane',
        lastname: 'Doe',
        address: [
            '333 Main St.',
            '444 Fifth St.'
        ],
        
        greet: function() {
            return 'Hello!';
        }
    }
]
console.log(people);

//

Related Posts

jQuery

OOP in javascript

---