JSprototype 객체 사용 튜토리얼

이번에는 JSprototype 객체 사용 방법에 대한 튜토리얼을 가져오겠습니다. JSprototype 객체 사용 시 주의사항은 무엇인가요?

프로토타입을 통해 여러 인스턴스 간의 메서드 공유 문제를 해결했습니다. 다음으로 프로토타입과 프로토타입 체인의 내용을 알아봅니다.

function CreateObj(uName) {
   this.userName = uName;
  }
  CreateObj.prototype.showUserName = function(){
   return this.userName;
  }
  var obj1 = new CreateObj('ghostwu');
  var obj2 = new CreateObj('卫庄');

1. 각 함수에는 프로토타입 속성(prototype)이 있습니다. 이 속성은 위 그림의 첫 번째 녹색 선에 표시된 대로 constructor 함수의 프로토타입 개체(CreateObj.prototype)를 가리키는 포인터입니다. 2. 기본적으로 모든 프로토타입 객체는 자동으로 생성자 속성을 얻습니다. 이 속성의 기능은 위 그림의 두 번째 녹색 선과 같은 프로토타입 속성을 가리키는 함수를 포함합니다. 3. 모든 인스턴스(새 생성자를 통해 생성됨, 프로토타입 객체(예: CreateObj.prototype, 위 그림은 그리지 않음) 등)에는 암시적 프로토타입(

proto

)이 포함되어 있습니다. 인스턴스.프로토타입 객체,

위 그림의 세 번째와 네 번째 줄에 표시된 것처럼 obj1의 생성자는 CreateObj이고 CreateObj의 프로토타입 개체는 CreateObj.prototype입니다. 따라서: obj1.proto === CreateObj.prototype //true

obj2.proto === CreateObj.prototype //true

4. 이에 값을 할당하는

속성 및 메서드

를 생성자에 작성합니다. 예를 들어 userName은 객체에 할당된 속성이므로 두 객체 obj1 및 obj2에서 그립니다. userName

속성이 있습니다. 5. 프로토타입 객체에 작성한 메소드나 속성은

CreateObj.prototype.showUserName = function(){
return this.userName;
}

와 같이 프로토타입 객체에 그려야 합니다. showUserName 메소드는 그림의 CreateObj.prototype 위에 그려져야 합니다

6. 객체가 속성과 메서드에 액세스할 때 해당 액세스 규칙이 호출됩니다(근접 원칙). 규칙은 다음과 같습니다.

인스턴스에 속성이나 메소드가 있으면 직접 사용하세요.

인스턴스에 속성이나 메서드가 없으면 인스턴스의 proto 포인터가 가리키는 프로토타입 개체를 따라 검색이 계속됩니다. 찾을 수 없으면 값이 정의되지 않습니다.

console.log( obj1.showUserName() ); //ghostwu
console.log( obj2.showUserName() ); //卫庄

showUserName 메소드는 obj1 및 obj2에 존재하지 않으므로 proto를 따라 CreateObj.prototype 프로토타입 객체

에서 showUser

Name 메소드를 찾으세요. CreateObj.prototype 프로토타입 객체에서 showUserName을 주석 처리하면 obj1.showUserName 및 obj2.showUserName이 오류를 보고합니다

// CreateObj.prototype.showUserName = function(){
// return this.userName;
// }

function CreateObj(uName) {
   this.userName = uName;
   this.showUserName = function(){
    return '100';
   }
  }
  CreateObj.prototype.showUserName = function(){
   return this.userName;
  }
  var obj1 = new CreateObj('ghostwu');
  var obj2 = new CreateObj('卫庄');
  console.log( obj1.showUserName() ); //100
  console.log( obj2.showUserName() ); //100

생성자에서 이에 showUserName 메서드를 추가하면 obj1과 obj2가 이를 직접 호출합니다. 왜냐하면 이 두 메서드는 그림의 인스턴스에 그려지기 때문입니다. 따라서:

console.log( obj1.showUserName === obj2.showUserName ); //false

이제 생성자의 프로토타입 객체에 여러 인스턴스의 속성과 메소드를 작성하여 공유하는 원리를 이해할 수 있을 것입니다

프로토타입 체인이란 무엇입니까?

앞서 프로토타입 객체를 포함한 모든 인스턴스에는 암묵적인 프로토타입 proto가 있다고 했는데, CreateObj.prototype의 프로토타입 객체는 누구를 가리킬까요?

rreee

CreateObj.prototype.proto는 Object.prototype을 가리키며, 이는 합동 연산자

(===) 테스트를 통과한 후 true

입니다. Object.prototype.proto는 NULL

을 가리킵니다. 이것은 암시적 프로토타입을 통해 일부 생성자를 계층별로 연결하는 프로토타입 체인입니다. 위 그림에서 사용자 정의 개체가 toString, valueOf 및 기타 메서드를 호출할 수 있는 이유를 알 수 있습니다.

모든 객체는 Object에서 상속되기 때문입니다.

이 기사의 사례를 읽고 나면 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 자료:

react-router4.0은 리디렉션 및 404 기능을 구현합니다.

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

JS 정렬 방법 요약

위 내용은 JSprototype 객체 사용 튜토리얼의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!