JS 객체 지향 프로그래밍_javascript 기술에 대한 간략한 분석

AJAX가 등장하기 전에는 많은 사람들이 구조 없이 JS를 작성했습니다. 기본적으로 함수가 중복되면 복사해야 했습니다. 모두가 JS 코드를 작성하기 위해 항상 프로세스 지향 프로그래밍 아이디어를 사용하고 또한 인터넷이 너무 많은 작은 "영리한" JS 코드 조각으로 가득 차 있기 때문입니다. , 그 중 다수는 무심코 수행되고 매우 불규칙합니다. 이로 인해 모든 사람들은 JS에 대한 "오해"를 야기했으며 맹목적으로 이것이 보조적인 작은 일이며 더 큰 개발에 적합하지 않다고 생각합니다. 그러나 AJAX의 등장 이후 대량의 JS 코드를 작성하려면 JAVA와 유사한 코드를 작성하는 것과 마찬가지로 객체 지향 개발을 개발할 수 있는 능력이 필요합니다.

그래서 아래에서는 JS에서 객체지향 프로그래밍을 사용하는 방법을 배우기 위해 제 경험과 여러분과 함께 배운 내용을 결합해 보겠습니다. 사실 객체 지향 개발에 JS를 사용하는 것은 어렵지 않습니다. JS의 각 함수는 다음 함수와 같이 객체이기 때문입니다.

코드 복사 코드는 다음과 같습니다.

function HelloWorld()
{
alert('hello world!')
}

그런 다음 다음 테스트 기능을 사용하는 등 사용할 때 객체로 사용할 수 있습니다.

코드 복사 코드는 다음과 같습니다.

function _test()
{
var obj = new HelloWorld()
}

그런 다음 호출합니다. _test 메소드 그러면 hello world가 팝업됩니다! 프롬프트 상자, 즉 HelloWorld() 개체(함수)가 호출됩니다. 여기서 HelloWorld 객체에는 속성이나 메소드가 없으며 HelloWorld()라는 생성 메소드가 하나만 있습니다. 객체를 생성하기 위해 new를 사용할 때 JAVA의 클래스로 생각할 수 있습니다. 건설 방법. 물론 이것은 객체에 속성과 메소드를 할당해야 합니다. JS에서는 프로토타입 키워드를 사용하여 값을 할당합니다. 예를 들어 HelloWorld 객체에 sayHello 메소드와 이름 속성을 추가하고 싶습니다. , 다음과 같이 추가할 수 있습니다.

코드 복사 코드는 다음과 같습니다.

HelloWorld.prototype = {
name : 'JavaScript',
sayHello : function() {
alert(this.name)
}
}

그러면 HelloWorld가 될 수 있습니다. name 속성과 sayHello 메소드를 추가하고, _test 메소드를 다음과 같이 변경해 보겠습니다.

코드 복사 코드는 다음과 같습니다. 다음과 같습니다:

function _test()
{
var obj = new HelloWorld()
obj.sayHello();
그런 다음 _test 메소드 이후에 hello wordl! 및 JavaScript가 연속적으로 인쇄됩니다(하나는 구성 메소드의 경고이고 다른 하나는 sayHello 메소드의 경고입니다). sayHello 메소드의 경고는 JAVA의 this 키워드와 마찬가지로 HelloWorld 객체를 나타내고 기본적으로 이 객체를 가리키는 this 키워드를 참조합니다.

객체에 인스턴스 메서드와 속성을 추가하려면 위 메서드를 사용할 수 있습니다. 즉, 프로토타입 키워드를 사용하여 값을 할당하면 됩니다.

코드 복사 코드는 다음과 같습니다. Object name.prototype = {

속성 1: 속성 값,

속성 2: 속성 값,
방법 1: 함수(매개변수 목록) {
메서드 본문;
},
방법 2: 함수(매개변수 목록) {
메서드 본문;
}


위와 같이 객체에 대해 여러 속성과 메소드를 정의할 수 있으므로 객체를 새로 만든 후 인스턴스 이름, 속성 또는 메소드를 사용하여 속성을 얻거나 메소드를 실행할 수 있습니다.

위 방법에서는 어떤 객체의 속성에도 직접 접근할 수 없다는 사실을 모를 수도 있습니다. 예를 들어 HelloWorld 객체의 name 속성에 접근하려면 obj.name을 사용하여 직접 얻을 수 있습니다. 이는 JAVA의 public 속성과 유사하며, name 속성에 직접 값을 할당할 수도 있습니다. 이제 질문이 있습니다. 개인 멤버 변수를 객체에 어떻게 할당합니까? 그런 다음 HelloWorld 클래스를 선언하는 방법을 변경해야 할 수도 있습니다. 프로토타입을 사용하여 클래스의 속성과 메서드를 선언하는 대신 수정된 HelloWorld를 다음과 같이 선언합니다.

코드 복사 코드는 다음과 같습니다.

function HelloWorld2()
{
var privateProp = ' hello world 2!';
this.method = function() {
alert(privateProp)
}
}

참조 HelloWorld2의 클래스 선언 방법이 없나요? 함수 중첩 선언은 함수 내부에서 직접 이루어지며, 전용 멤버 변수인 privateProp도 설정합니다. 이 변수는 HelloWorld2 내부 함수에서만 액세스할 수 있으므로 교묘하게 설정할 수 있습니다. 변수의 범위를 사용하여 클래스의 개인 변수. 우리의 애플리케이션은 다음과 같습니다:

코드 복사 코드는 다음과 같습니다:

function _test2( )
{
var obj2 = new HelloWorld2();
obj2.method(); // 이 메서드를 호출하면 'hello world 2!'가 인쇄됩니다. // print undefine
}

위 내용은 모두 클래스를 정의하는 방법과 클래스에 대한 속성 및 메서드를 정의하는 방법에 대한 것입니다. 프로토타입 메서드를 사용하면 정의가 명확하고 명확하기 때문입니다. 메소드는 일반적으로 클래스를 정의하는 데 사용되며 유사한 클래스 선언 메소드가 이제 많은 AJAX 프레임워크에서 사용됩니다. 게다가 클래스의 프라이빗 멤버 변수는 클래스 생성 메서드의 함수로만 접근할 수 있다. 이런 식으로 클래스의 프로토타입에서 선언한 메서드는 프라이빗 멤버 변수에 접근할 수 없고 가독성도 좋지 않다. 프로토타입 방식으로.

자, 위의 내용은 클래스의 인스턴스 메소드와 속성을 정의하는 것입니다. JAVA에서 클래스는 인스턴스 메소드와 속성, 클래스 메소드와 속성으로 구분됩니다. 소위 클래스 속성 및 메소드는 클래스의 모든 인스턴스가 각 인스턴스에 대한 세트를 유지하는 대신 클래스 속성 및 클래스 메소드의 사본만 유지함을 의미합니다. 이는 인스턴스 속성 및 인스턴스 메소드와 다릅니다. 그렇다면 JS에서 클래스에 대한 정적 클래스 메소드와 클래스 속성을 정의하는 방법은 무엇입니까? 정적 속성과 정적 메서드를 클래스에 직접 추가할 수 있습니다. 예를 들어 HelloWorld 클래스에 age 정적 속성과 hello 정적 메서드를 추가하면 선언은 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

HelloWorld.age = 22
HelloWorld.hello = function() {
alert (HelloWorld.age);
}

그런 다음 HelloWorld 클래스에 대해 정적 속성 age와 정적 메서드 hello가 선언됩니다. 사용시에는 클래스명을 이용하여 직접 접근할 수 있으나, 인스턴스를 이용하여 접근할 수는 없습니다. 이는 JAVA와 일치합니다.

코드 복사 코드는 다음과 같습니다.

function _test()
{
var obj = new HelloWorld()
obj. sayHello(); // 올바른 인스턴스 메서드는 인스턴스를 통해 액세스할 수 있습니다.
HelloWorld.hello(); // 올바른 정적 메서드는 클래스 이름을 통해 직접 액세스할 수 있습니다.
obj.hello(); 오류입니다. 인스턴스 정적 메서드를 통해 액세스할 수 없습니다. JS 오류가 보고됩니다!
}

위 설명을 통해 다들 JS를 이용한 객체지향 프로그래밍에 대해 어느 정도 이해하고 준비가 되어 있다고 생각합니다. 하하. (팁: 위 코드는 모두 테스트를 통과했습니다!)