javascript 문법 기초 정리 #3

객체지향

생성자

함수를 호출할 때 new을 붙이면 새로운 객체를 만든 후에 이를 리턴한다.
객체를
생성자 함수는 일반함수와 구분하기 위해서 첫글자를 대문자로 표시한다.

전

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());

후

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

생성자 내에서 이 객체의 프로퍼티를 정의하고 있다. 이러한 작업을 초기화라고 한다. 이를 통해서 코드의 재사용성이 대폭 높아졌다.

출처 생활코딩

전역객체

전역객체(Global object)는 특수한 객체다. 모든 객체는 이 전역객체의 프로퍼티다.

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

객체를 명시하지 않으면 암시적으로 window의 프로퍼티로 간주된다.
자바스크립트에서 모든 객체는 기본적으로 전역객체의 프로퍼티임을 알 수 있다.

그러나 window는 브라우저 기준이고, 호스트마다 다름(ex. Node.js)

ECMAScript에서는 전역객체의 API를 정의해두었다. 그 외의 API는 호스트 환경에서 필요에 따라서 추가로 정의하고 있다. 이를테면 웹브라우저 자바스크립트에서는 alert()이라는 전역객체의 메소드가 존재하지만 node.js에는 존재하지 않는다. 또한 전역객체의 이름도 호스트환경에 따라서 다른데, 웹브라우저에서 전역객체는 window이지만 node.js에서는 global이다.

this

this는 함수 내에서 함수 호출 맥락(context)를 의미한다.
함수와 객체의 관계가 느슨한 자바스크립트에서 this는 이 둘을 연결시켜주는 실질적인 연결점의 역할을 한다.

함수를 호출했을 때(o1) : this는 전역객체인 window와 같다.
new를 이용해서 생성자를 호출했을 때(o2) 객체의 소속인 메소드의 this는 그 객체를 가르킨다.

var funcThis = null; 
 
function Func(){
    funcThis = this;
}
var o1 = Func();
if(funcThis === window){
    document.write('window <br />');
}
 
var o2 = new Func();
if(funcThis === o2){
    document.write('o2 <br />');
}
// window
// o2

생성자가 실행되기 전까지는 객체는 변수에도 할당될 수 없기 때문에 this가 아니면 객체에 대한 어떠한 작업을 할 수 없다.

function Func(){
    document.write(o);
}
var o = new Func();

// 결과 undefined

prototype

객체는 프로퍼티를 가질 수 있는데 prototype이라는 프로퍼티는 그 용도가 약속되어 있는 특수한 프로퍼티다.
prototype에 저장된 속성들은 생성자를 통해서 객체가 만들어질 때 그 객체에 연결된다.

댓글에 어떤분이 잘 정리해놓으신 프로토타입 정의

constructor 함수에 미리 함수를 정의하면, 객체를 생성할 때마다 함수가 생성되기 때문에 프로그램의 성능 저하와 메모리 사용의 문제가 생긴다. 이를 해결하기 위해 모든 생성자들이 공통적으로 공유하는 생성자 함수의 원형을 prototype 으로 정의할 수 있다. prototype은 객체가 만들어질 때마다 실행되는 것이 아니라, 한번만 실행되기 때문에 성능과 메모리 상의 문제를 해결할 수 있을 뿐 아니라, 특정 생성자만 따로 컨트롤할 수 있다. 특정 생성자를 컨트롤 할 때, 그 생성자 내에 미리 정의된 함수가 있으면 그 함수를 실행시키고, 그렇지 않으면 prototype 함수를 실행시킨다.

function Ultra(){}
Ultra.prototype.ultraProp = true;
 
function Super(){}
Super.prototype = new Ultra();
 
function Sub(){}
Sub.prototype = new Super();
 
var o = new Sub();
console.log(o.ultraProp);

1.객체 o에서 ultraProp를 찾는다.
2.없다면 Sub.prototype.ultraProp를 찾는다.
3.없다면 Super.prototype.ultraProp를 찾는다.
4.없다면 Ultra.prototype.ultraProp를 찾는다.
prototype는 객체와 객체를 연결하는 체인의 역할을 하는 것이다.
이러한 관계를 prototype chain이라고 한다.

Super.prototype = Ultra.prototype 으로하면 안된다. 이렇게하면 Super.prototype의 값을 변경하면 그것이 Ultra.prototype도 변경하기 때문이다. Super.prototype = new Ultra();는 Ultra.prototype의 원형으로 하는 객체가 생성되기 때문에 new Ultra()를 통해서 만들어진 객체에 변화가 생겨도 Ultra.prototype의 객체에는 영향을 주지 않는다.

Author And Source
이 문제에 관하여(javascript 문법 기초 정리 #3), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@leesg619/javascript-문법-기초-정리-3

저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

javascript 문법 기초 정리 #3

객체지향

생성자

전역객체

this

prototype

Author And Source

좋은 웹페이지 즐겨찾기