JavaScript의 프로토타입 사용에 대한 자세한 설명

JavaScript를 사용해 본 많은 친구들은 프로토타입에 대해 어느 정도 이해하고 있을 것이라고 생각합니다. 그러나 프로토타입이 정확히 무엇인지 초보자들은 함수에 프로토타입 속성이 있고, 예제를 위해 함수를 추가할 수 있다는 것만 알고 있습니다. 나머지는 잘 모르겠네요. 오늘은 자바스크립트에서 프로토타입의 상세한 사용법을 소개해드리겠습니다!

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

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

개인 변수 및 함수

프로토타입에 대해 자세히 이야기하기 전에 프로토타입의 설계 의도를 더 잘 이해할 수 있도록 몇 가지 관련 사항에 대해 이야기해 보겠습니다. 이전에 작성한 JavaScript namespace 기사에서는 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#을 사용해 본 학생들은 정적의 의미를 쉽게 이해할 수 있습니다.

코드는 다음과 같습니다.

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

The 위의 코드 실행 결과는 예상과 완전히 일치하지만 문제도 보여줍니다. A는 o1과 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 속성이 포함되어 있으며 proto 속성이 자동으로 생성되어 Person의 프로토타입을 가리키며 프로토타입에 정의된 printName 메서드에 액세스할 수 있습니다. 이렇게

写段程序测试一下看看prototype内属性、方法是能够共享

代码如下:

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);
            }

总结：

相信通过对本文的详细学习，很多小伙伴都知道JavaScript中prototype的使用有了进一步的了解，希望对你的工作有所帮助！

相关推荐：

JavaScript向对象添加属性和方法的属性prototype

Js如何使用prototype实现自定义数组的案例

JavaScript原型链prototype属性和方法实例详解

详细介绍javascript使用prototype实现OOP继承的方法

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