JavaScript 프로토타입 사용 소개

JavaScript를 사용해 본 학생들은 프로토타입에 대해 잘 알고 있을 텐데, 초보자들은 함수에 프로토타입 속성이 있다는 것과 인스턴스 액세스를 위해 함수를 추가할 수 있다는 것만 알고 있습니다. 최근 일부 고급 JavaScript 프로그래밍을 살펴보고 마침내 그 미스터리를 공개했습니다.

각 함수에는 객체에 대한 참조인 프로토타입 속성이 있습니다. 이 객체를 프로토타입 객체라고 합니다. 프로토타입 객체에는 함수 인스턴스가 공유하는 메서드와 속성이 포함되어 있습니다. 생성자 함수가 호출되면(new 연산자를 사용하여 호출됨) 새로 생성된 객체는 프로토타입 객체의 속성과 메서드를 상속합니다.

개인변수와 함수

프로토타입에 대해 자세히 이야기하기 전에 프로토타입의 디자인 의도를 더 잘 이해할 수 있도록 몇 가지 관련 사항에 대해 이야기해 보겠습니다. 이전에 작성한 JavaScript 네임스페이스 기사에서는 JavaScript의 함수 범위에 대해 언급했습니다. 함수 내에 정의된 변수와 함수가 외부 세계에 대한 인터페이스를 제공하지 않으면 외부에서 접근할 수 없습니다. 즉, 프라이빗 변수가 됩니다. 그리고 개인 기능.

function Obj(){
                var a=0; //私有变量
                var fn=function(){ //私有函数

                }
            }

이런 방식으로 변수 a와 함수 fn은 함수 개체 Obj 외부에서 액세스할 수 없습니다. 이들은 비공개가 되며 Obj 함수의 인스턴스에서도 여전히 이러한 변수에 액세스할 수 없습니다.

var o=new Obj();
            console.log(o.a); //undefined
            console.log(o.fn); //undefined

정적 변수 및 함수

함수가 정의되고 "."을 통해 함수에 추가된 속성과 함수는 여전히 객체 자체를 통해 액세스할 수 없습니다. 아시다시피 이러한 변수와 함수를 각각 정적 변수, 정적 함수라고 합니다. Java와 C#을 사용해 본 학생들은 static의 의미를 쉽게 이해할 수 있습니다.

function Obj(){

            }

            Obj.a=0; //静态变量

            Obj.fn=function(){ //静态函数

            }

            console.log(Obj.a); //0
            console.log(typeof Obj.fn); //function

            var o=new Obj();
            console.log(o.a); //undefined
            console.log(typeof o.fn); //undefined

인스턴스 변수, 함수

객체 지향 프로그래밍에서는 일부 라이브러리 함수 외에도 객체를 정의할 때 일부 속성과 메서드를 동시에 정의하기를 희망합니다. , 인스턴스화 후 접근할 수 있는 JavaScript 이렇게 할 수도 있습니다

function Obj(){
                this.a=[]; //实例变量
                this.fn=function(){ //实例方法

                }
            }

            console.log(typeof Obj.a); //undefined
            console.log(typeof Obj.fn); //undefined

            var o=new Obj();
            console.log(typeof o.a); //object
            console.log(typeof o.fn); //function

이렇게 하면 위의 목적을 달성할 수 있습니다. 그러나

function Obj(){
                this.a=[]; //实例变量
                this.fn=function(){ //实例方法

                }
            }

            var o1=new Obj();
            o1.a.push(1);
            o1.fn={};
            console.log(o1.a); //[1]
            console.log(typeof o1.fn); //object
            var o2=new Obj();
            console.log(o2.a); //[]
            console.log(typeof o2.fn); //function

위 코드 실행 결과는 완전히 다릅니다. 예상과 일치하지만 o1 a 및 fn에서는 수정되었지만 o2에서는 변경되지 않은 문제도 설명합니다. 배열과 함수는 모두 객체이자 참조 유형이므로 이는 o1의 속성과 메서드가 o2의 속성 및 메서드와 동일한 이름을 가지며 참조가 아니라 Obj 개체에 의해 정의된 속성 및 메서드의 복사본입니다.

속성에는 문제가 되지 않지만 메소드에는 큰 문제가 됩니다. 왜냐하면 메소드가 완전히 동일한 기능을 수행하지만 함수 객체에 인스턴스가 수천 개 있는 경우 복사본이 두 개 있기 때문입니다. 그러면 각 인스턴스는 수천 개의 메소드 사본을 유지해야 합니다. 이는 분명히 비과학적인 일입니다.

prototype

새 함수가 생성될 때마다 특정 규칙 집합에 따라 해당 함수에 대한 프로토타입 속성이 생성됩니다. 기본적으로 프로토타입 속성은 기본적으로 생성자를 가져옵니다. (생성자) 속성. 이 속성은 프로토타입 속성이 위치한 함수에 대한 포인터입니다. 코드를 작성하고 위의 그림을 참조하세요.

function Person(){

            }

위 그림에서 볼 수 있듯이 Person 객체는 자동으로 프로토타입 속성을 획득하고 프로토타입도 객체이며 자동으로 Person 객체를 가리키는 생성자 속성을 획득합니다.

인스턴스를 생성하기 위해 생성자가 호출되면 인스턴스에는 생성자의 프로토타입을 가리키는 내부 포인터(많은 브라우저에서 이 포인터의 이름이 __proto__임)가 포함됩니다. 이 연결은 인스턴스의 프로토타입 사이에 존재합니다. 그리고 인스턴스와 생성자 사이에 있는 생성자입니다.

function Person(name){
                this.name=name;
            }

            Person.prototype.printName=function(){
                alert(this.name);
            }

            var person1=new Person('Byron');
            var person2=new Person('Frank');

Person 인스턴스 person1에는 name 속성이 포함되어 있으며 Person의 프로토타입을 가리키는 __proto__ 속성이 자동으로 생성됩니다. 프로토타입에 정의된 printName 메소드에 액세스할 수 있습니다.

프로토타입의 속성과 메소드를 공유할 수 있는지 테스트하고 확인하는 프로그램을 작성하세요

function Person(name){
                this.name=name;
            }

            Person.prototype.share=[];

            Person.prototype.printName=function(){
                alert(this.name);
            }

            var person1=new Person('Byron');
            var person2=new Person('Frank');

            person1.share.push(1);
            person2.share.push(2);
            console.log(person2.share); //[1,2]

역시! 실제로 코드는 객체의 속성을 읽을 때 검색을 수행합니다. 대상은 지정된 이름을 가진 속성입니다. 속성이 인스턴스에서 발견되면 검색이 시작됩니다. 찾을 수 없으면 프로토타입을 검색하고, 여전히 찾을 수 없으면 찾을 때까지 프로토타입의 프로토타입 개체를 계속 반복합니다. . 마찬가지로 프로토타입과 같은 이름의 속성이나 함수가 인스턴스에 정의되면 프로토타입의 속성이나 함수를 덮어쓰게 됩니다.

function Person(name){
                this.name=name;
            }

            Person.prototype.share=[];
            var person=new Person('Byron');
            person.share=0;

            console.log(person.share); //0而不是prototype中的[]

간단한 객체 구성

물론 프로토타입은 위의 문제를 해결하기 위해 특별히 정의된 것은 아니지만 위의 문제를 해결합니다. 이 지식을 이해한 후에는 재사용성이 높은 과학적인 객체를 구축할 수 있습니다. 인스턴스 객체의 속성이나 기능을 원한다면 프로토타입에서 이를 정의하세요. 매개변수는 생성자를 통해 전달될 수 있습니다.

function Person(name){
                this.name=name;
            }

            Person.prototype.share=[];

            Person.prototype.printName=function(){
                alert(this.name);
            }

JavaScript 프로토타입 사용과 관련된 더 많은 기사를 보려면 PHP 중국어 웹사이트를 주목하세요!