자바스크립트 상속 사용 예제

javaScript 상속

자바스크립트의 상속은 기존의 객체나 생성자 함수를 기반으로 새로운 객체나 생성자 함수를 생성하는 것을 말합니다.

기존의 객체를 바탕으로 만들어지므로 상속을 통해 새로 만들어지는 객체에는 기존 객체의 특성을 모두 가지고 있습니다.

이를 기존의 객체에서 유산(속성과 메서드)을 물려받는 것과 비슷하다고 하여 상속이라는 말을 사용합니다.

다시 말해, 상속을 사용하면 이전에 만들었던 객체와 비슷한 객체를 쉽게 생성할 수 있습니다.

상속 활용 예제 코드

javascript

function Rectangle(w , h) {
    var width = w;
    var height = h;

    this.getWidth = function () {
        return width;
    };

    this.getHeight = function () {
        return height;
    };

    this.setWidth = function (value) {
        if (value < 0) {
            throw '길이는 음수일 수 없다';
        } else {
            width = value;
        }
    };

    this.setHeight = function (value) {
        if (value < 0) {
            throw '길이는 음수일 수 없다';
        } else {
            height = value;
        }
    }

}
Rectangle.prototype.getArea = function () {
    return this.getWidth() * this.getHeight();
};

function Square(length) {
    this.base = Rectangle;
    this.base(length, length);
}

Square.prototype = Rectangle.prototype;

var r = new Rectangle(5, 7);
var s = new Square(6);


console.log('Rectangle(5, 7) : ' + r.getArea() + ', \nnew Square(6) : ' + s.getArea());

/* 콘솔창 결과 */
// Rectangle(5, 7) : 35,
// new Square(6) : 36

call() 메서드를 사용한 상속

javascript

function Rectangle(w , h) {
    var width = w;
    var height = h;

    this.getWidth = function () {
        return width;
    };

    this.getHeight = function () {
        return height;
    };

    this.setWidth = function (value) {
        if (value < 0) {
            throw '길이는 음수일 수 없다';
        } else {
            width = value;
        }
    };

    this.setHeight = function (value) {
        if (value < 0) {
            throw '길이는 음수일 수 없다';
        } else {
            height = value;
        }
    }

}

// call() 메서드를 사용한 상속
Rectangle.prototype.getArea = function () {
    return this.getWidth() * this.getHeight();
};

function Square(length) {
    Rectangle.call(this, length, length);
}

Square.prototype = new Rectangle();
Square.prototype.constructor = Square;

var r = new Rectangle(2, 5);
var s = new Square(7);


console.log('Rectangle(2, 5) : ' + r.getArea() + ', \nnew Square(7) : ' + s.getArea());

/* 콘솔창 결과 */
// Rectangle(2, 5) : 10,
// new Square(7) : 49

Jaehee's WebClub

[발췌] 모던웹을 위한 javaScript, jQuery (윤인성 지음)