js 프로토타입 객체 사용 단계에 대한 자세한 설명

이번에는 js 프로토타입 객체 사용 단계에 대해 자세히 설명하고, js 프로토타입 객체 사용 시 주의 사항 은 무엇인지 살펴보겠습니다.

간단한 constructor+프로토타입 개체 작은 프로그램

function CreateObj( uName, uAge ) {
      this.userName = uName;
      this.userAge = uAge;
    }
    CreateObj.prototype.showUserName = function () {
      return this.userName;
    }
    CreateObj.prototype.showUserAge = function () {
      return this.userAge;
    }

부터 시작해 보겠습니다. 이 프로그램에는 아무런 문제가 없지만 매우 중복됩니다. 메서드가 확장될 때마다 프로토타입 개체를 작성해야 합니다. 프로토타입 개체 프로토타입을 리터럴 개체로 처리할 수 있으며 모든 메서드는 리터럴 개체에서 확장됩니다. 동일한 효과를 얻을 수 있습니다:

CreateObj.prototype = {
      showUserAge : function(){
        return this.userAge;
      },
      showUserName : function(){
        return this.userName;
      },
    }
    var obj1 = new CreateObj( 'ghostwu', 22 );
    var obj2 = new CreateObj( '卫庄', 24 );
    console.log( obj1.showUserName(), obj1.showUserAge() ); //ghostwu 22
    console.log( obj2.showUserName(), obj2.showUserAge() ); //卫庄 24

그러나 이 프로토타입 객체 작성 방법은 CreateObj의 기본 프로토타입 객체를 다시 작성합니다. 발생하는 첫 번째 문제는 생성자가 더 이상 CreateObj를 가리키지 않는다는 것입니다.

다시 작성하기 전에 생성자는 CreateObj

function CreateObj( uName, uAge ) {
      this.userName = uName;
      this.userAge = uAge;
    }
    CreateObj.prototype.showUserName = function () {
      return this.userName;
    }
    CreateObj.prototype.showUserAge = function () {
      return this.userAge;
    }
    console.log( CreateObj.prototype.constructor === CreateObj ); //true

를 가리킵니다. 다시 작성한 후 생성자는

Object

CreateObj.prototype = {
      showUserAge : function(){
        return this.userAge;
      },
      showUserName : function(){
        return this.userName;
      },
    }
    console.log( CreateObj.prototype.constructor === CreateObj ); //false
    console.log( CreateObj.prototype.constructor === Object ); //true

를 가리킵니다. 따라서 생성자는 객체가 수정되기 때문에 객체를 정확하게 식별할 수 없습니다

이전에 작성한 프로그램은 기본적으로 프로토타입 개체(프로토타입)에서 메서드를 확장한 다음 개체를 인스턴스화했습니다. 먼저 개체를 인스턴스화한 다음 프로토타입 개체(프로토타입)에서 함수를 확장합니다. 인스턴스 객체가 확장 메서드를 정상적으로 호출할 수 있나요?

rreee

정상적으로 호출 가능하지만, 프로토타입 객체가 오버라이드되면 호출할 수 없습니다

function CreateObj( uName, uAge ) {
      this.userName = uName;
      this.userAge = uAge;
    }
    var obj1 = new CreateObj( 'ghostwu', 22 );
    CreateObj.prototype.showUserName = function(){
      return this.userName;
    }
    console.log( obj1.showUserName() ); //ghostwu

프로토타입 객체가 다시 작성된 후 다시 작성되기 전에 인스턴스화가 발생하므로 인스턴스의 암시적 프로토타입

proto

은 다시 작성된 프로토타입 객체를 가리키지 않으므로 프로토타입에 참조 유형이 있는 경우 다른 문제를 호출할 수 없습니다. 객체(프로토타입)이므로 여러 인스턴스가 프로토타입 객체를 공유하므로 주의하세요. 하나의 인스턴스가 참조 유형의 값을 변경하는 한 다른 모든 인스턴스는 변경된 결과를 받게 됩니다.

rreee 프로토타입 객체의 공유 특성은 배열 중복 제거와 같은 일부 내장 객체에 대한 일부 메소드를 쉽게 확장할 수 있습니다.

function CreateObj( uName, uAge ) {
      this.userName = uName;
      this.userAge = uAge;
    }
    var obj1 = new CreateObj( 'ghostwu', 22 );
    CreateObj.prototype = {
      showUserName : function(){
        return this.userName;
      }
    }
    console.log( obj1.showUserName() ); //报错

이 기사의 사례를 읽은 후 메소드를 마스터했다고 생각합니다. 더 흥미로운 내용을 보려면 다른 메소드에 주목하세요. php 중국어 웹사이트 관련 기사!

추천 도서:

js에서 요소 스타일을 설정하는 단계에 대한 자세한 설명

html+canvas에서 화면 캡처 구현

jQuery에서 타이머 기능을 자세히 구현

위 내용은 js 프로토타입 객체 사용 단계에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!