집 >웹 프론트엔드 >JS 튜토리얼 >JavaScript 코드 재사용 패턴에 대한 자세한 설명_기본지식

JavaScript 코드 재사용 패턴에 대한 자세한 설명_기본지식

WBOY원래의: 2016-05-16 16:32:001479검색

코드 재사용과 그 원칙

代码复用은 이름에서 알 수 있듯이 이전에 작성된 코드의 일부 또는 전체를 재사용하여 새 프로그램을 만드는 것입니다. 코드 재사용에 관해 이야기할 때 가장 먼저 떠오르는 것은 继承性입니다. 코드 재사용 원칙은 다음과 같습니다.

<code>优先使用对象组合，而不是类继承</code>

js에는 클래스 개념이 없기 때문에 인스턴스 개념은 별 의미가 없습니다. js의 객체는 단순한 키-값 쌍이며 동적으로 생성 및 수정될 수 있습니다.

그러나 js에서는 생성자와 new 연산자를 사용하여 클래스를 사용하는 다른 프로그래밍 언어와 구문 유사성을 갖는 객체를 인스턴스화할 수 있습니다.

예:

<code>var trigkit4 = new Person();</code>

js은 생성자 Person를 호출할 때 클래스인 것처럼 보이지만 실제로는 여전히 함수입니다. 이는 클래스를 기반으로 가정되는 몇 가지 개발 아이디어와 상속 패턴을 호출할 수 있습니다. "클래스 상속 패턴".

기존 상속 모드에는 class 키워드가 필요합니다. 위의 클래스 상속 모드는 클래스 측면에서 고려할 필요가 없는 모드인 现代继承模式라고 가정합니다.

클래스 상속 패턴

다음 두 생성자 Parent() 및 Child()의 예를 살펴보세요.

<code><script type="text/javascript"><br>    function Parent(name){<br>        this.name = name || 'Allen';<br>    }<br>    Parent.prototype.say = function(){<br>        return this.name;<br>    }<br>    function Child(name){}<br>    //用Parent构造函数创建一个对象，并将该对象赋值给Child原型以实现继承<br>    function inherit(C,P){<br>        C.prototype = new P();//原型属性应该指向一个对象，而不是函数<br>    }<br>    //调用声明的继承函数<br>    inherit(Child,Parent);<br></script></code>

new Child() 문을 사용하여 객체를 생성하면 프로토타입을 통해 Parent() 인스턴스에서 다음과 같은 기능을 가져옵니다.

<code>var kid = new Child();
kid.say();
//Allen</code>

프로토타입 체인

클래스 상속 모델에서 프로토타입 체인이 어떻게 작동하는지 논의합니다. 객체를 메모리 어딘가에 있는 블록으로 생각합니다. 이 메모리 블록에는 다른 블록에 대한 참조가 포함되어 있습니다. new Parent() 문을 사용하여 객체를 생성하면 아래 그림의 왼쪽과 같은 블록이 생성됩니다. 이 블록에는 name 메서드에 액세스하려는 경우 생성자 say()를 가리키는 (프로토타입) 속성의 암시적 링크 Parent()는 오른쪽 prototype에 있는 블록에 액세스할 수 있습니다. __proto__ Parent.prototype

그럼

을 사용하여 새 객체를 생성하면 어떻게 될까요? 아래와 같이:

var kid = new Child()

문을 사용하여 생성된 개체는 암시적 링크

를 제외하면 거의 비어 있습니다. 이 경우 new Child()는 __proto__ 함수의 __proto__ 문을 사용하여 생성된 inherit() 개체를 가리킵니다. new Parent()

실행 시 왼쪽 하단의 블록 객체에는

메서드가 없으므로 프로토타입 체인을 통해 중간 블록 객체를 쿼리하게 됩니다. 그러나 중간 블록 객체에는 메소드 중 하나이므로 프로토타입 체인을 따라 가장 오른쪽 블록 객체를 쿼리했고 이 객체는 우연히 kid.say() 메소드를 갖게 되었습니다. 끝났나요? say() 여기서는 say()이 실행되면 완료되지 않습니다. say() 메서드에서는

블록을 가리킵니다. 이 때문에 중간 블록이 쿼리되고, 중간 블록이

속성을 가지게 됩니다. 이 시점에서 프로토타입 체인의 쿼리가 완료됩니다. say() this.name자세한 논의는 내 기사를 확인하세요: new Child()Javascript Study Notes (5) 프로토타입 및 프로토타입 체인에 대한 자세한 설명new Child()name name

프로토타입 공유

이 패턴의 규칙은 재사용 가능한 멤버를 여기에 배치하는 대신 프로토타입으로 전송해야 한다는 것입니다. 따라서 상속 목적을 위해서는 상속할 가치가 있는 모든 것을 프로토타입으로 구현해야 합니다. 따라서 다음 예와 같이 하위 개체의 프로토타입을 상위 개체의 프로토타입과 동일하게 설정할 수 있습니다.

<code>function inherit(C,P){<br>    C.prototype = P.prototype;<br>}</code>

子对象和父对象共享同一个原型，并且可以同等的访问say()方法。然而，子对象并没有继承name属性

原型继承

原型继承是一种“现代”无类继承模式。看如下实例：

<code><script type="text/javascript"><br>    //要继承的对象<br>    var parent = {<br>        name : "Jack"  //这里不能有分号哦<br>    };</code>
<code>    //新对象<br>    var child = Object(parent);</code>
<code>    alert(child.name);//Jack<br></script></code>

在原型模式中，并不需要使用对象字面量来创建父对象。如下代码所示，可以使用构造函数来创建父对象，这样做的话，自身的属性和构造函数的原型的属性都将被继承。

<code><script type="text/javascript"><br>    //父构造函数<br>    function Person(){<br>        this.name = "trigkit4";<br>    }<br>    //添加到原型的属性<br>    Person.prototype.getName = function(){<br>        return this.name;<br>    };<br>    //创建一个新的Person类对象<br>    var obj = new Person();<br>    //继承<br>    var kid = Object(obj);<br>    alert(kid.getName());//trigkit4<br></script></code>

本模式中，可以选择仅继承现有构造函数的原型对象。对象继承自对象，而不论父对象是如何创建的，如下实例：

<code><script type="text/javascript"><br>    //父构造函数<br>    function Person(){<br>        this.name = "trigkit4";<br>    }<br>    //添加到原型的属性<br>    Person.prototype.getName = function(){<br>        return this.name;<br>    };<br>    //创建一个新的Person类对象<br>    var obj = new Person();<br>    //继承<br>    var kid = Object(Person.prototype);<br>    console.log(typeof kid.getName);//function，因为它在原型中<br>    console.log(typeof kid.name);//undefined，因为只有该原型是继承的<br></script></code>

성명：

이전 기사：JavaScript 함수 패턴에 대한 자세한 설명_기본지식다음 기사：JavaScript 함수 패턴에 대한 자세한 설명_기본지식

JavaScript 코드 재사용 패턴에 대한 자세한 설명_기본지식

관련 기사