집 >웹 프론트엔드 >JS 튜토리얼 >객체 생성을 위한 Js OOP 프로그래밍의 상세한 해석

객체 생성을 위한 Js OOP 프로그래밍의 상세한 해석

亚连원래의: 2018-05-19 16:33:231315검색

이제 객체 생성을 위한 Js OOP 프로그래밍에 대한 포괄적인 이해를 제공하겠습니다. 이제 그것을 여러분과 공유하고 모든 사람에게 참고 자료로 제공하겠습니다.

객체 지향은 현실 세계를 이해하고 추상화하는 방법으로, 컴퓨터 프로그래밍 기술이 어느 단계까지 발전한 산물입니다.

객체의 의미

객체는 자동차, 사람, 동물, 텍스트, 형태 또는 존재하는 모든 것이 될 수 있습니다.

개체에는 다음이 있습니다.

　속성 -------개체의 일부 특정 속성입니다.
　방법---------객체가 할 수 있는 일.
　 이벤트 ------- 객체에 발생하는 일에 반응할 수 있습니다.

인간 객체를 만들어보면 객체지향을 이해할 수 있습니다

사람:

　두 손, 두 발, 하나의 머리로 달릴 수 있습니다.

　손, 발, 머리는 인간의 속성이고, 달리기는 인간의 방법입니다.

먼저 가장 간단한 방법으로 객체를 생성해보겠습니다

var person = {
      head: "one",
      hand: "two",
      foot: "two",
      run : function(){
        console.log("running");
      }
    }

이 방법은 전혀 실용적이지 않습니다. 왜냐하면 별도의 객체를 생성하고 이 객체는 일반적인 데이터 구조와 아무런 관련이 없기 때문입니다.

그런 다음 생성자를 사용하여 객체를 생성합니다.

var Person = function(){//注意,首字母大写
      this.head = "one",
      this.hand = "two",
      this.foot = "two",
      this.run = function(){
        alert("running");
      }
    }
    var Joan = new Person();
    document.write(Joan.run())// "running"

이것은 생성자를 사용하여 생성된 객체입니다. 그런 다음 다른 코드 줄을 추가하여

var Niki = new Person();
    alert(Joan==Niki) //false;

예, 이제 생성된 객체 인스턴스가 두 개 있습니다.

JavaScript의 모든 함수에는 프로토타입 속성이 있습니다. 함수가 생성자로 사용되면 이 속성이 자동으로 new를 통해 호출되어 객체의 프로토타입을 생성합니다.

console.log(Joan)

__proto__: Person이 있는 것을 볼 수 있습니다. __proto__는 Joan의 프로토타입 체인입니다.

JS가 객체(일반 객체이든 함수 객체이든)를 생성할 때 __proto__라는 속성이 내장되어 있습니다. 자신을 생성한 함수 객체를 가리키는 프로토타입 객체입니다.

프로토타입 체인에 대한 일부 이해는 JavaScript 고급 프로그래밍 책에 매우 자세히 설명되어 있습니다. 관심이 있으시면 온라인에서 PDF 문서도 확인하실 수 있습니다. 하지만 이 책을 구입하여 원본 버전을 지원하는 것이 좋습니다.

그러면 프로토타입의 프로토타입 속성에 대한 모든 변경 사항은 변경 전 또는 후에 생성되었는지에 관계없이 new Person()으로 생성된 모든 인스턴스 객체에 적용될 수 있습니다.

var Person = function(){//注意,首字母大写
      this.head = "one",
      this.hand = "two",
      this.foot = "two"
    }
    Person.prototype.run = function(){
      alert("running");
    }
    var Joan = new Person();
    Joan.run()// "running"
    alert(Joan.__proto__===Person.prototype)//&#39;true&#39;

프로토타입에서 생성된 메서드를 호출할 수 있고 Joan의 프로토타입 체인이 Person의 프로토타입을 가리키는 것을 볼 수 있습니다.

다시 보세요:

var Niki = new Person();//"runing"
     Person.prototype.run = function(){
       alert("running running")
     }
     Joan.run()//"running running"
     Niki.run()//"running running"

보세요, Person의 프로토타입 메소드를 수정하세요. new Person()에 의해 생성된 객체 인스턴스의 모든 메소드가 수정되었습니다. 동일한 프로토타입 메소드 실행이 모든 인스턴스에서 공유되기 때문입니다. 프로토타입을 적용한 사례입니다.

위 내용은 제가 여러분을 위해 정리한 내용입니다. 앞으로 도움이 되길 바랍니다.

객체 생성을 위한 Js OOP 프로그래밍의 상세한 해석

관련 기사