Javascript를 배우면서 가장 어려운 점은 무엇인가요?
오브젝트가 가장 어려운 것 같아요. Javascript의 객체 모델은 매우 독특하고 다른 언어와 다르기 때문에 초보자가 익히기가 쉽지 않습니다.
다음은 제가 공부한 내용입니다. 이 부분을 공부하시는 모든 분들께 도움이 되었으면 좋겠습니다. 저는
다음 두 권의 책을 주로 참고했습니다.
《객체 지향 자바스크립트》(객체 지향 자바스크립트)
《Javascript 고급 프로그래밍(제2판)》(웹 개발자를 위한 전문 JavaScript, 제2판)
모두 훌륭한 Javascript 책이므로 읽어 보시기 바랍니다.
메모는 세 부분으로 나누어져 있습니다. 오늘 1부에서는 "Encapsulation"에 대해 다루고, 2부 와 3부 에서는 "상속"에 대해 이야기하겠습니다.
============================
Javascript 객체 지향 프로그래밍(1): 캡슐화
저자: 루안 이펑
Javascript는 객체 기반 언어이며 접하는 거의 모든 것이 객체입니다. 그러나 구문에 클래스가 없기 때문에 진정한 객체 지향 프로그래밍(OOP) 언어는 아닙니다.
그럼 "속성"과 "메서드"를 객체로 캡슐화하거나 프로토타입 객체에서 인스턴스 객체를 생성하려면 어떻게 해야 할까요?
1. 객체의 원본 모드를 생성합니다
고양이를 "이름"과 "색상"이라는 두 가지 속성을 갖는 객체로 간주한다고 가정해 보겠습니다.
var Cat = {
name: '',
color : ''
}
이제 이 프로토타입 객체를 기반으로 두 개의 인스턴스 객체를 생성해야 합니다.
var cat1 = {} // 생성 빈 객체
cat1.name = "大马"; // 프로토타입 객체의 속성에 따라 값 할당
cat1.color = "yellow"
var cat2 =
cat2.name = "Ermao";
cat2.color = "Black"
자, 이것이 가장 간단한 캡슐화입니다. 그러나 이 방법에는 두 가지 단점이 있습니다. 첫째, 더 많은 인스턴스가 생성되면 작성이 매우 번거로워지고, 둘째, 인스턴스와 프로토타입 간의 연결을 확인할 방법이 없습니다.
2. 오리지널 모드 개선
코드 중복 문제를 해결하는 함수를 작성할 수 있습니다.
function Cat(이름,색){
반환 {
in in us in us in us in us in us can us can may us may on in: 🎜>
코드 복사
코드는 다음과 같습니다.
프로토타입 객체에서 인스턴스를 생성하는 문제를 해결하기 위해 Javascript에서는 생성자 패턴을 제공합니다.
소위 "생성자"는 실제로는 일반적인 함수이지만 this 변수는 내부적으로 사용됩니다. 생성자에서 new 연산자를 사용하면 인스턴스가 생성되고 this 변수는 인스턴스 개체에 바인딩됩니다.
예를 들어, cat 프로토타입 객체는 이제 다음과 같이 작성할 수 있습니다.
코드 복사
코드는 다음과 같습니다.
function Cat(name,color){
this.name=name;
this.color=color
}
지금 생성할 수 있습니다. 인스턴스 객체.
var cat1 = new Cat("Big Hair ","노란색 ");
var cat2 = new Cat("two毛","black");
Alert(cat1.name); // 큰 고양이
Alert(cat1.color); / / 노란색
이때 cat1 및 cat2에는 해당 생성자를 가리키는 생성자 속성이 자동으로 포함됩니다.
alert(cat1.constructor == Cat) ; // true
alert(cat2.constructor == Cat); //true
자바스크립트는 프로토타입 객체와 인스턴스 객체 간의 관계를 확인하기 위한 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 = "Feline"
this.eat = function(){ 경고 ("쥐 먹기");};
}
동일한 방법을 사용하여 인스턴스를 생성합니다:
var cat1 = new Cat("Big Hair","Yellow")
var cat2 = new Cat ("Er Hair" ","Black" ");
alert(cat1.type); // 고양이
cat1.eat(); // 쥐를 먹는 것
겉으로는 문제는 없지만 실제로는 큰 단점이 있습니다. 즉, 각 인스턴스 객체에 대해 type 속성과 eat() 메서드의 내용은 정확히 동일합니다. 인스턴스가 생성될 때마다 반복되는 내용을 위해 더 많은 메모리를 차지해야 합니다. 이는 환경친화적이지도 효율적이지도 않습니다.
alert(cat1.eat == cat2.eat); //false
type 속성과 eat() 메서드가 메모리에 한 번만 생성되고 모든 인스턴스가 해당 메모리 주소를 가리킬 수 있나요? 대답은 '예'입니다.
5. 프로토타입 모드
Javascript에서는 각 생성자가 다른 객체를 가리키는 프로토타입 속성을 갖는다고 규정합니다. 이 개체의 모든 속성과 메서드는 생성자의 인스턴스에 상속됩니다.
즉, 프로토타입 객체에서 직접 변경할 수 없는 속성과 메서드를 정의할 수 있습니다.
function Cat(이름,색){
this .name = 이름;
This.color = color;
}
Cat.prototype.type = "고양이";
Cat.prototype.eat = function(){alert(" Eat Mouse")};
그런 다음 인스턴스를 생성합니다.
var cat1 = new Cat("Big Hair ","노란색 ");
var cat2 = new Cat("two毛","黑");
Alert(cat1.type); // 고양이
cat1.eat(); // 먹는다 mouse
이때, 모든 인스턴스의 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]) }
아직 끝나지 않았습니다. 이 시리즈의 두 번째 부분을 계속 읽어주세요. "
생성자 상속 "과 세 번째 부분 "
비생성자 함수의 상속 "입니다.
(끝)
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
