상속(Inheritance)

객체지향에서 중요한 개념입니다. 객체라는 것은 하나의 컨테이너이고 객체는 변수, 메소드로 모아져있습니다. 객체의 특성을 물려받아 새로운 객체를 만들수 있습니다. 새로운 객체는 부모 객체와 동일한 기능을 가질 수 있습니다. 부모의 기능을 그대로 사용하거나 추가할 수 있습니다. 이것이 바로 상속의 기본적인 동작 방식입니다. 이를 통해 로직을 재활용 할 수 있습니다.

부모의 재산을 자식이 상속받듯이 오리지널 객체의 기능을 동일하게 받을 수 있습니다.

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 />"); // My name is egoing

function Person(name){ //생성자를 만들어서

    this.name = name;

}

Person.prototype.name=null; //객체의 prototype이라는 프로퍼티가 있는데 .name시 이름을 준다.

Person.prototype.introduce = function(){

    return 'My name is '+this.name;

}

var p1 = new Person('egoing');

document.write(p1.introduce()+"<br />");

자바스크립트의 상속 구현에 대해 알아보겠습니다.

function Person(name){

    this.name = name;

}

Person.prototype.name=null;

Person.prototype.introduce = function(){

    return 'My name is '+this.name;

}

function Programmer(name){

    this.name = name;

}

Programmer.prototype = new Person(); //상속받음

var p1 = new Programmer('egoing'); //Programmer생성자 호출

document.write(p1.introduce()+"<br />");

객체가 기능을 물려받았으니 새로운 기능을 추가하는 방법에 대해 알아보겠습니다.

Programmer.prototype.coding = function(){

    return "hello world";

}

document.write(p1.coding()+"<br />"); // hello world가 출력

function Designer(name){

    this.name = name;

}

Designer prototype = new Person();

Designer.prototype.design = function(){

    return "beautiful!";

}

var p2 = new Designer('leezche');

document.write(p1.introduce()+"<br />");

document.write(p1.design()+"<br />"); //beautiful!을 출력

prototype 원형(원래 형태)

객체지향 언어와 자바스크립트를 구분하는 개념

생성자는 기본적으로 함수입니다. 함수를 호출할 때 new로 인해 단순한 함수가 아닌 생성자로 변합니다. 새로운 객체를 만들어 리턴합니다. 어떤 객체를 만들 때 객체가 가져야 하는 메소드, 데이터가 주어지길 바라기 때문에 생성자를 사용합니다.

function Ultra(){}

Ultra.prototype.ultraProp = true;

function Super(){}

Super.prototype = new Ultra();

function Sub(){}

Sub.prototype = new Super();

Sub.prototype.ultraProp = 2;

var o = new Sub();

console.log(o.ultraProp); //true를 출력

sub객체는 ultraProp을 갖고 있지 않습니다. Sub의 부모인 super, super의 부모인 Ultra가 갖고 있습니다.

생성자는 기본적으로 함수입니다. 함수를 호출할 때 new를 붙이면 단순한 함수가 아닌 생성자 함수가 됩니다. 새로운 객체를 만들어 리턴합니다. o라는 변수는 sub()라는 생성자 함수에 의해 만들어진 객체입니다. 빈 객체를 만드는 것이 생성자라면 의미가 없습니다. 어떠한 객체를 만들 때 객체가 갖고 있어야하는 메소드, property값을 가져야합니다.

var o = new Sub();

//o.ultraProp = 1;

console.log(o.ultraProp); //2를 출력

1. 객체 o에서 ultraProp를 찾습니다..

2. 없다면 Sub.prototype.ultraProp를 찾습니다.

3. 없다면 Super.prototype.ultraProp를 찾습니다.

4. 없다면 Ultra.prototype.ultraProp를 찾습니다.

이는 객체와 객체를 연결하는 체인의 역할을 하는 것입니다. 이러한 관계를 prototype chain이라고 합니다.

출처 : 생활코딩 강의

전역객체

모든 객체는 전역객체의 프로퍼티입니다. window라는 전역객체의 프로퍼티입니다.

function func(){                         var o = {'func':function(){

    alert('Hello?');                                alert('Hello?');

}                                            }}

func();                                     o.func();

window.func();                          window.o.func();

func();와 window.func();는 모두 실행 가능합니다. 모든 전역변수와 함수는 사실 window 객체의 프로퍼티다. 객체를 명시하지 않으면 암시적으로 window의 프로퍼티로 간주됩니다.

this

객체지향에 대한 시야를 높이기 위한 수업입니다.

This는 함수 내에서 함수의 호출 맥락을 의미합니다. 의미가 고정에 되어 있지 않고 가변적일 때 맥락을 사용합니다. 함수와 객체의 관계가 느슨한 자바스크립트에서 this는 둘을 연결시키는 연결점의 역할을 합니다. 함수내의  this 값은 window를 의미합니다.

메소드와 this

var o = {

    func : function(){ //func 프로퍼티는 함수이기에 메소드입니다.

        if(o === this){

            document.write("o === this");

        }

    }

}

o.func();

객체 안에서 메소드를 호출하면 메소드가 소속되어있는 객체를 this로 접근할 수 있습니다.

func라는 함수가 객체에 소속되어 있지 않은 경우 this는 window라는 전역객체를 가리킵니다.

o.func() 호출 시 this는 o가 됩니다.

생성자와 this

생성자로 사용 될 때는 this값은 생성될 객체를 가리킵니다.

함수로 호출하면 함수 안의 this는 window를 가리킵니다.

var funcThis = null;

function Func(){

    funcThis = this;

}

var o1 = Func();

if(funcThis === window){

    document.write('window <br />'); //window

}

var o2 = new Func();

if(funcThis === o2){

    document.write('o2 <br />'); //o2

}

생성자는 빈 객체를 만듭니다. 그리고 이 객체내에서 this는 만들어진 객체를 가르킵니다. 이것은 매우 중요한 사실이다. 생성자가 실행되기 전까지는 객체는 변수에도 할당될 수 없기 때문에 this가 아니면 객체에 대한 어떠한 작업을 할 수 없기 때문입니다.

객체로서의 함수

apply, call

마지막의 인자가 함수의 본문에 해당

Sum()이라는 함수 객체를 만든 것, 문법적으로 작성해 자바스크립트가 함수 객체를 만들어줍니다.

이를 함수 리터럴(Literal)이라고 합니다. 문법적으로 리터럴이라고 부릅니다.

함수가 가질 수 있는 프로퍼티 중 ecma에서 정의한 것이 apply, call입니다.

var o = {}

var p = {}

function func(){

    switch(this){

        case o:

            document.write('o<br />');

            break;

        case p:

            document.write('p<br />');

            break;

        case window:

            document.write('window<br />');

            break;         

    }

}

func(); //window

func.apply(o); //o

func.apply(p); //p 객체p를 의미

ecma의 표준 메소드인 apply()

객체의 포함되어 있는 것이 메소드, 다른 곳에 가지 못하고 고정되어 있습니다.

자바스크립트는 유연하다.

언어에서 함수는 일반적인 객체지향의 메소드보다 위상이 높다. 어떻게 호출하느냐에 따라 함수는 어떠한 객체에 종속되는 존재이기도 합니다. This는 어떤 맥락에서 어떤 의미를 갖는가를 알아야합니다. this는 소속되어 있는 객체를 의미합니다.

 출처 : 생활코딩 강의

생성자와 new

객체지향의 기본 형태 : 변수 + 메소드, 디렉토리의 연관된 파일을 구분하는 것을 객체입니다.

객체는 독립성을 갖게 됩니다. 여러 완제품의 부품으로 사용이 가능하다는 의미입니다.

객체지향프로그래밍의 도달하고자 목표는 좋은 부품의 로직을 만드는 것!

var person = {}

person.name = 'egoing';

person.introduce = function(){

    return 'My name is '+this.name;

}

document.write(person.introduce());

=========================================

객체를 만드는 과정에 분산되어 있습니다. 객체를 정의 할 때 값을 셋팅하도록 코드를 바꿔보겠습니다.

var person = {

    'name' : 'egoing',

    'introduce' : function(){

        return 'My name is '+this.name;

    }

}

document.write(person.introduce());

생성자

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

function Person(){}

var p = new Person();

p.name = 'egoing';

p.introduce = function(){

    return 'My name is '+this.name;

}

document.write(p.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());

생성자의 특징

일반적인 객체지향 언어에서 생성자는 클래스의 소속입니다. 하지만 자바스크립트에서 객체를 맏는 주체는 함수입니다. 함수에 new를 붙이는 것을 통해서 객체를 만들 수 있다는 점은 자바스크립트에서 함수의 위상을 암시하는 단서이면서 자바스크립트가 추구하는 자유로움을 보여줍니다.

출처 : 생활코딩 강의