> 웹 프론트엔드 > JS 튜토리얼 > 자바스크립트 프로토타입 패턴 사용법에 대한 자세한 설명

자바스크립트 프로토타입 패턴 사용법에 대한 자세한 설명

WBOY
풀어 주다: 2016-05-16 15:56:38
원래의
1192명이 탐색했습니다.

이 기사의 예에서는 JavaScript 프로토타입 모드의 사용법을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 구체적인 분석은 다음과 같습니다.

일반적으로 팩토리 패턴과 생성자 패턴의 단점을 이해하고 나면 프로토타입 패턴이 왜 필요한지 알게 됩니다

프로토타입 패턴 i의 정의: 모든 함수에는 특정 유형의 모든 인스턴스가 공유할 수 있는 속성과 메서드를 포함하는 목적을 가진 객체인 프로토타입 속성이 있습니다. 예를 들어 생성자 모델의 sayInformation() 메소드에서 두 개의 인스턴스가 선언되면 sayInformation 메소드를 두 번 생성해야 하는데 굳이 두 번 선언할 필요가 없다는 것이 프로토타입 패턴이 나타나는 이유이다(니마, 그 블로그들). 인터넷상에는 모두 말이 안되는 것인지, 아니면 책을 읽을 때 이해하기 쉬운 것인지), sayInformation()을 프로토타입 모드로 선언한 후 인스턴스를 공유하므로 두 번 선언할 필요가 없습니다

function Person(){}
Person.prototype.name="jack";
Person.prototype.age=10;
Person.prototype.sayInformation=function()
{
  console.log("my name is"+this.name+" age is"+this.age);
}
var person1 = new Person();
person1.sayInformation();
console.info(person1.name);
//来自原型的属性name
person1.name="Greg";
//修改实例的name属性
console.info(person1.name);
//来自实例的属性name
delete person1.name ;
//来自实例的属性,这里删除的是实例的属性,但是原型的属性依然存在
console.info(person1.name);
//来自原型的属性name
var person2 = new Person();
person2.sayInformation();
console.info(person1.hasOwnProperty("name"));
//hasOwnProperty检查属性是属于实例还是原型中,如果是实例中就返回true
console.info(person1.name==person2.name);
console.info(person1.sayInformation==person2.sayInformation);
console.info(person1.constructor);
//指向person1的构造函数
//原型更加简便的写法
function Person2(){}
Person2.prototype={
  name:"jack",
  age:29,
  sayInformationfunction:function()
    {
      console.log("my name is"+this.name+" age is"+this.age);
    }
}
로그인 후 복사

이 기사가 모든 사람의 JavaScript 프로그래밍 설계에 도움이 되기를 바랍니다.

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿