JavaScript 프로토타입 사용 소개

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

JavaScript를 사용해 본 학생들은 프로토타입에 익숙할 것입니다. 그러나 그것이 정확히 무엇인지 초보자들은 함수에만 프로토타입 속성이 있고 함수가 있다는 것을 알고 있습니다. 인스턴스 액세스를 위해 추가될 수 있습니다. 나머지는 명확하지 않습니다. 최근에 일부 고급 JavaScript 프로그래밍을 읽었으며 마침내 그 신비를 공개했습니다.

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

개인변수와 함수

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

코드는 다음과 같습니다.

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

이런 식으로 변수 a와 함수 fn은 함수 객체 Obj 외부에서 접근할 수 없으며, Obj 내부에서 사용되면 함수 Obj의 인스턴스라도 여전히 이러한 변수 및 함수에 액세스할 수 없습니다.

코드는 다음과 같습니다.

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

정적 변수, 함수

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

코드는 다음과 같습니다.

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

인스턴스 변수, 함수

객체 지향에서 프로그래밍은 일부 라이브러리 함수를 제외하고 객체가 정의될 ​​때 일부 속성과 메서드를 동시에 정의하기를 희망하며, 이는 인스턴스화 후에 액세스할 수 있습니다.

코드는 다음과 같습니다.

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의 속성 및 메서드와 다르다는 것을 의미합니다. 이름은 동일하지만 참조가 아니라 에서 정의한 속성 및 메서드의 복사본입니다. 객체입니다.

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

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 속성이 포함되어 있으며 자동으로 __proto__ 속성은 Person의 프로토타입을 가리킵니다. 프로토타입에 정의된 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]

果不其然！实际上当代码读取某个对象的某个属性的时候，都会执行一遍搜索，目标是具有给定名字的属性，搜索首先从对象实例开始，如果在实例中找到该属性则返回，如果没有则查找prototype，如果还是没有找到则继续递归prototype的prototype对象，直到找到为止，如果递归到object仍然没有则返回错误。同样道理如果在实例中定义如prototype同名的属性或函数，则会覆盖prototype的属性或函数。

 代码如下:

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

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

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

构造简单对象

当然prototype不是专门为解决上面问题而定义的，但是却解决了上面问题。了解了这些知识就可以构建一个科学些的、复用率高的对象，如果希望实例对象的属性或函数则定义到prototype中，如果希望每个实例单独拥有的属性或方法则定义到this中，可以通过构造函数传递实例化参数。

 代码如下:

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