JavaScript를 사용하여 클래스 캡슐화

이 문서에서는 JavaScript를 사용하여 클래스를 캡슐화하는 방법을 설명합니다. JavaScript를 사용하여 클래스를 캡슐화하는 방법을 모르거나 JavaScript를 사용하여 클래스를 캡슐화하는 데 관심이 있다면 이 문서를 함께 살펴보겠습니다. , 더 이상 고민하지 말고 본론으로 들어가겠습니다.

다른

객체 지향 언어를 배운 JavaScript 사용자는 다음과 같은 클래스와 정의된 일련의 메서드를 사용했을 수도 있습니다. 초보자들이 js를 배우다 보면 이런 문장을 자주 봤습니다. 즉, JavaScript는 객체지향 언어인데, 아무리 배워도 객체지향 프로그래밍에 대해 잘 모르는 저 역시 마찬가지입니다. js 객체 지향 프로그래밍에 어려움을 겪기 시작했습니다. 지난 며칠 동안 js 클래스에 대한 이해에 대해 이야기해 보겠습니다. . .

소위 클래스에는 다음과 같은 기능이 있습니다.

2. 정적 속성, 정적 메서드

3. 개인 속성, 개인 메서드

4. js를 사용하여 클래스를 캡슐화하고 위의 기능을 구현하는 방법에 대해

1. 간단한 클래스

var Person = function(name, age){
    this.name = name;    this.age = age;    this.sayName = function(){
        console.log(this.name);
    };
}

클래스처럼 보이지 않는다면 이렇게 할 수 있습니다.

var Person = function(name, age){
    //共有属性
    this.name = name;    this.age = age;    //共有方法
    this.sayName = function(){
        console.log(this.name);
    };
}

만약 constructor

패턴이 너무 명확하지 않다면 js의 디자인 패턴을 살펴보세요

객체 생성

2. 복잡한 클래스

위의 예를 바탕으로 이를 개선할 수 있습니다.

var Person = function(name, age){
    //共有属性
    this.name = name;    //共有方法
    this.sayName = function(){
        console.log(this.name);
    };    //静态私有属性(只能用于内部调用)
    var home = "China";    //静态私有方法(只能用于内部调用)
    function sayHome(){
        console.log(home);
    }    //构造器
    this.setAge = function(age){
        console.log(age + 12);
    };    this.setAge(age);
}//静态方法（只能被类来访问）Person.sayAge = function(){
    console.log("your age is 12");
}//静态属性（只能被类来访问）Person.drink = "water";//静态共有方法（类和实例都可以访问）Person.prototype.sayWord = function(){
    console.log("ys is a boy");
}

위의 시뮬레이션 방법은 js에서 클래스 생성을 구현하는 데 사용됩니다. 이를 기반으로 우리는 현재 상태에 만족하지 않고 이를 캡슐화하여 전체로 만들고 싶어하는데, 이는 js의 캡슐화에 더 도움이 됩니다. .

3. js 클래스 캡슐화

여기에서는 클로저를 사용하여 구현합니다. 먼저 클로저의 개념을 설명합니다.

클로저 개념: 함수는 다른 함수 범위에 있는 변수에 액세스할 수 있는 권한이 있습니다. 즉, 함수 내부에 또 다른 함수를 생성하는 것입니다

구현은 다음과 같습니다.

var Person = (function(){
    //静态私有属性方法
    var home = "China";    function sayHome(name){
        console.log(name + "'s home in " + home);
    }    //构造函数
    function _person(name, age){
        var _this = this;        //构造函数安全模式，避免创建时候丢掉new关键字
        if(_this instanceof _person){            //共有属性, 方法
            _this.name = name;
            _this.getHome = function(){
                //内部访问私有属性，方法
                sayHome(_this.name);
            };
            _this.test = sayHome; //用于测试
            //构造器
            _this.setAge = function(age){
                _this.age = age + 12;
            }(age);
        }else{            return new _person(name, age);
        }
    }    //静态共有属性方法
    _person.prototype = {
        constructor: _person,
        drink: "water",
        sayWord: function(){
            console.log("ys is a boy");
        }
    }    return _person;
})();

호출은 다음과 같습니다.

var p1 = new Person("ys", 12);
p1.getHome();                   //ys's home in China
console.log(p1.age);            //24     

var p2 = Person("ys", 12);
p2.getHome();                   //ys's home in China
console.log(p2.age);            //24   

console.log(p2.test == p1.test);  //true, 证明静态私有变量共享性

다음과 같습니다. 위 코드에서는 js

요약:

1을 사용하여 클래스를 구현했습니다. 일부 공용 속성과 메서드는 정적으로 설정할 수 있으므로 진정한 공유를 달성하기 위해 인스턴스화될 때마다 추가 메모리 리소스를 할당할 필요가 없습니다.

2. 일부 공개 속성 메소드는 내부 프로그램 처리 중에만 공유되기를 원하며 이를 정적 비공개 속성 메소드로 설정합니다.

3. 일부 공개 속성 메소드는 인스턴스 객체 간에 공유되기를 원하며 프로토타입 속성 메소드입니다.

위 내용이 이 글의 전부입니다. 잘 모르시는 분들도 직접 구현해 보시면 익히기 쉬우실 거에요!

관련 추천 :

JavaScript encapsulation의 다양한 작성 방법

Javascript encapsulation 휴대폰 클래스 함수 코드 예시 상세 설명

위 내용은 JavaScript를 사용하여 클래스 캡슐화의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!