JS 객체지향 프로그래밍 객체 사용 분석_javascript 기술

모든 사람이 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 키워드를 참조합니다.

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

객체 이름.prototype = {
속성 1: 속성 값,
속성 2: 속성 값,
방법 1: 함수(매개변수 목록) {
방법 본문
},
방법 2: 함수 (매개변수 목록) {
메서드 본문;
}
}

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

위 방법에서는 어떤 객체의 속성에도 직접 접근할 수 없다는 사실을 모를 수도 있습니다. 예를 들어 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를 이용한 객체지향 프로그래밍에 대해 어느 정도 이해하고 시작하실 준비가 되셨으리라 믿습니다. 하하. 한번 시도해 보세요~~ (참고: 위의 코드는 모두 테스트를 통과했습니다!)