자바스크립트 객체지향 프로그래밍 (1) 캡슐화

Javascript 객체 지향 프로그래밍(1): 캡슐화

저자: Ruan Yifeng

Javascript는 객체 기반 언어이며 접하는 거의 모든 것이 객체입니다. 그러나 구문에 클래스가 없기 때문에 진정한 객체 지향 프로그래밍(OOP) 언어는 아닙니다.

그럼 "속성"과 "메서드"를 객체로 캡슐화하거나 프로토타입 객체에서 인스턴스 객체를 생성하려면 어떻게 해야 할까요?

1. 객체 생성의 원래 모드

고양이를 "이름"과 "색상"이라는 두 가지 속성을 갖는 객체로 간주한다고 가정합니다.

var Cat = { 
　　　　name : '', 
　　　　color : '' 
　　}

이제 이 프로토타입 객체를 기반으로 두 개의 인스턴스 객체를 생성해야 합니다.

　　var cat1 = {}; // 创建一个空对象 
　　　　cat1.name = "大毛"; // 按照原型对象的属性赋值 
　　　　cat1.color = "黄色"; 
　　var cat2 = {}; 
　　　　cat2.name = "二毛"; 
　　　　cat2.color = "黑色";

자, 이것이 가장 간단한 캡슐화입니다. 그러나 이 방법에는 두 가지 단점이 있습니다. 첫째, 더 많은 인스턴스가 생성되면 작성이 매우 번거로워지고, 둘째, 인스턴스와 프로토타입 간의 연결을 확인할 방법이 없습니다.
2. 오리지널 모드 개선
코드 중복 문제를 해결하는 함수를 작성할 수 있습니다.

　　function Cat(name,color){ 
　　　　return { 
　　　　　　name:name, 
　　　　　　color:color 
　　　　} 
　　}

그런 다음 인스턴스 객체를 생성하는 것은 함수를 호출하는 것과 동일합니다.

　　var cat1 = Cat("大毛","黄色"); 
　　var cat2 = Cat("二毛","黑色");

이 방법의 문제는 여전히 cat1과 cat2 사이에 본질적인 연결이 없으며 이를 반영할 수 없다는 것입니다. 동일한 프로토타입 객체의 인스턴스임을 보여줍니다.
3. 생성자 패턴
프로토타입 객체에서 인스턴스를 생성하는 문제를 해결하기 위해 Javascript는 생성자 패턴을 제공합니다.
소위 "생성자"는 실제로는 일반적인 함수이지만 this 변수는 내부적으로 사용됩니다. 생성자에서 new 연산자를 사용하면 인스턴스가 생성되고 this 변수는 인스턴스 개체에 바인딩됩니다.
예를 들어 cat의 프로토타입 객체는 이제 다음과 같이 작성할 수 있습니다.

　　function Cat(name,color){ 
　　　　this.name=name; 
　　　　this.color=color; 
　　}

이제 인스턴스 객체를 생성할 수 있습니다.

　　var cat1 = new Cat("大毛","黄色"); 
　　var cat2 = new Cat("二毛","黑色"); 
　　alert(cat1.name); // 大毛 
　　alert(cat1.color); // 黄色

이때 cat1과 cat2에는 생성자를 가리키는 생성자 속성이 자동으로 포함됩니다.

　　alert(cat1.constructor == Cat); //true 
　　alert(cat2.constructor == Cat); //true

Javascript는 프로토타입 객체와 인스턴스 객체 간의 관계를 확인하기 위해 instanceof 연산자도 제공합니다.

　　alert(cat1 instanceof Cat); //true 
　　alert(cat2 instanceof Cat); //true

4. 생성자 패턴 문제
생성자 메서드는 사용하기 쉽지만 메모리 낭비 문제가 있습니다.
이제 불변 속성 "type"(유형)을 Cat 개체에 추가한 다음 eat(쥐 먹기) 메서드를 추가합니다. 그러면 프로토타입 객체 Cat은 다음과 같습니다.

　　function Cat(name,color){ 
　　　　this.name = name; 
　　　　this.color = color; 
　　　　this.type = "猫科动物"; 
　　　　this.eat = function(){alert("吃老鼠");}; 
　　}

여전히 동일한 방법을 사용하여 인스턴스를 생성합니다.

　　var cat1 = new Cat("大毛","黄色"); 
　　var cat2 = new Cat ("二毛","黑色"); 
　　alert(cat1.type); // 猫科动物 
　　cat1.eat(); // 吃老鼠

겉으로는 문제가 없어 보이지만 사실 이것은 큰 단점이 있습니다. 즉, 각 인스턴스 객체에 대해 type 속성과 eat() 메서드의 내용은 정확히 동일합니다. 인스턴스가 생성될 때마다 반복되는 내용을 위해 더 많은 메모리를 차지해야 합니다. 이는 환경친화적이지도 효율적이지도 않습니다.
　alert(cat1.eat == cat2.eat); //false
type 속성과 eat() 메서드가 메모리에 한 번만 생성되고 모든 인스턴스가 해당 메모리 주소를 가리킬 수 있나요? 대답은 '예'입니다.
5. 프로토타입 모드
자바스크립트는 각 생성자가 다른 객체를 가리키는 프로토타입 속성을 갖는다고 규정합니다. 이 개체의 모든 속성과 메서드는 생성자의 인스턴스에 상속됩니다.
즉, 프로토타입 객체에서 직접 변경할 수 없는 속성과 메서드를 정의할 수 있습니다.

　　function Cat(name,color){ 
　　　　this.name = name; 
　　　　this.color = color; 
　　} 
　　Cat.prototype.type = "猫科动物"; 
　　Cat.prototype.eat = function(){alert("吃老鼠")};

그런 다음 인스턴스를 생성합니다.

　　var cat1 = new Cat("大毛","黄色"); 
　　var cat2 = new Cat("二毛","黑色"); 
　　alert(cat1.type); // 猫科动物 
　　cat1.eat(); // 吃老鼠

이때, 모든 인스턴스의 type 속성과 eat() 메소드는 실제로 동일한 메모리 주소를 갖고 있어 프로토타입 객체를 가리키므로 작업 효율성이 향상됩니다.
　alert(cat1.eat == cat2.eat); //true
6. 프로토타입 모드 확인 방법
6.1 isPrototypeOf()
이 방법은 특정 프로토타입 객체와 인스턴스 간의 특정 관계.

　　alert(Cat.prototype.isPrototypeOf(cat1)); //true 
　　alert(Cat.prototype.isPrototypeOf(cat2)); //true

6.2 hasOwnProperty()
각 인스턴스 객체에는 특정 속성이 로컬 속성인지 또는 프로토타입 객체에서 상속된 속성인지 확인하는 데 사용되는 hasOwnProperty() 메서드가 있습니다.

　　alert(cat1.hasOwnProperty("name")); // true 
　　alert(cat1.hasOwnProperty("type")); // false

6.3 in 연산자
in 연산자는 인스턴스에 특정 속성이 포함되어 있는지, 로컬 속성인지 여부를 확인하는 데 사용할 수 있습니다.

　　alert("name" in cat1); // true 
　　alert("type" in cat1); // true

in 연산자를 사용하여 객체의 모든 속성을 탐색할 수도 있습니다.
　for(var prop in cat1) { Alert("cat1["+prop+"]="+cat1[prop]) }

객체에 대한 추가 Javascript 프로그래밍 (1) 캡슐화 관련 글은 PHP 중국어 홈페이지를 주목해주세요!