생활코딩 javascript

https://opentutorials.org/module/532/6570

객체

서로 연관된 변수와 함수를 그룹핑한 그릇이라고 할 수 있다.
객체 내의 변수를 프로퍼티(property), 함수를 메소드(method) 라고 부른다.

var person = {}
person.name = 'egoing';
person.introduce = function(){
    return 'My name is '+this.name;
}
document.write(person.introduce());

//My name is egoing

//this는 함수가 속해있는 객체인 person을 가리킴

var person1 = {
    'name' : 'egoing',
    'introduce' : function(){
        return 'My name is '+this.name;
    }
}
var person2 = {
    'name' : 'egoing',
    'introduce' : function(){
        return 'My name is '+this.name;
    }
}
document.write(person.introduce());

-> 'introduce'라는 메소드가 중복이 일어남
-> 'name'은 이름을 정의하기 때문에 중복이라고 하기 애매함

생성자

객체를 만드는 역할을 하는 함수다.
자바스크립트에서 함수는 재사용 가능한 로직의 묶음이 아니라 객체를 만드는 창조자라고 할 수 있다.

function Person() {
  
}

let p = Person();
p // undefined

let p1 = new Person(); // new를 붙이고 호출하면 return 값은 객체가 된다.
p1 // Person{} => 객체가 생성됨

function Person(){}
var p1 = new Person();
p1.name = 'egoing';
p1.introduce = function(){
    return 'My name is '+this.name; 
}
document.write(p1.introduce()+"<br />");
 
var p2 = new Person();
p2.name = 'leezche';
p2.introduce = function(){
    return 'My name is '+this.name; 
}
document.write(p2.introduce());

=> Person이라는 객체가 호출마다 생성되기는 하지만 여전히 중복이 남아있다.

다음과 같이 개선이 가능하다

function Person(name) {
  this.name = name;
  this.introduce = function() {
    return `My name is ${this.name}`;
  }
}

const p1 = new Person('egoing1'); //My name is egoing1
const p2 = new Person('egoing2'); //My name is egoing2

document.write(p1.introduce());
document.write(p2.introduce());

=> 객체 생성시 마다 초기화하여 코드의 재사용성을 높일 수 있다.

전역 객체

function func(){
    alert('Hello?');    
}
func();
window.func(); //window라는 객체의 func라는 메소드를 실행함

var o = {
  'func':function(){
    alert('Hello?');
  }
}
o.func();
window.o.func();

자바스크립트에서 모든 객체는 기본적으로 전역객체의 프로퍼티임을 알 수 있다.