5가지 JS 디자인 패턴-JS 튜토리얼-php.cn

5가지 JS 디자인 패턴

零到壹度

풀어 주다： 2018-03-21 16:59:11

원래의

2805명이 탐색했습니다.

이 글은 주로 5가지 js 디자인 패턴을 소개합니다. 필요한 친구들이 참고하면 도움이 될 것입니다. 아래 에디터와 함께 살펴보겠습니다.

1. 팩토리 패턴

팩토리 패턴은 많은 유사한 객체의 문제를 해결하지만 종료 객체를 식별하는 데 문제가 없습니다

function createPerson(name, age, job){
var o = new Object();
o.name = name;
o.age = age;
o.job = job;
o.sayName = function(){
alert(this.name);
};
return o;
}
var person1 = createPerson("Nicholas", 29, "Software Engineer");
var person2 = createPerson("Greg", 27, "Doctor");

로그인 후 복사

2 . 생성자 패턴

Construction 함수 패턴의 각 인스턴스에 있는 sayName이 다르기 때문에 프로토타입 체인

function Person(name, age, job){
this.name = name;
this.age = age;
this.job = job;
this.sayName = function(){
alert(this.name);
};
}
var person1 = new Person("Nicholas", 29, "Software Engineer");
var person2 = new Person("Greg", 27, "Doctor");

로그인 후 복사

hasOwnProperty() 메서드가 도입되어 속성이 인스턴스에 있는지 아니면 프로토타입에 있는지 감지합니다. true는 인스턴스이고 false는 프로토타입의

입니다. 3. 프로토타입 모드의 이름

function Person(){
}
Person.prototype.name = "Nicholas";
Person.prototype.age = 29;
Person.prototype.job = "Software Engineer";
Person.prototype.sayName = function(){
alert(this.name);
};
var person1 = new Person();
var person2 = new Person();
person1.name = "Greg";
alert(person1.name); //"Greg"——来自实例
alert(person2.name); //"Nicholas"——来自原型
delete person1.name;
alert(person1.name); //"Nicholas" ——

로그인 후 복사

person1이 새로운 값으로 차단됩니다. 하지만 person1.name 또는 person2.name에 액세스하면 정상적으로 값을 반환할 수 있는지

function Person(){
}
Person.prototype.name = "Nicholas";
Person.prototype.age = 29;
Person.prototype.job = "Software Engineer";
Person.prototype.sayName = function(){
alert(this.name);
};
var person1 = new Person();
var person2 = new Person();
alert(person1.hasOwnProperty("name")); //false
alert("name" in person1); //true
person1.name = "Greg";
alert(person1.name); //"Greg" ——来自实例
alert(person1.hasOwnProperty("name")); //true
alert("name" in person1); //true
alert(person2.name); //"Nicholas" ——来自原型
alert(person2.hasOwnProperty("name")); //false
alert("name" in person2); //true
delete person1.name;
alert(person1.name); //"Nicholas" ——来自原型
alert(person1.hasOwnProperty("name")); //false
alert("name" in person1); //true

로그인 후 복사

위 코드 실행 전체 과정에서 name 속성은 객체에서 직접 액세스되거나 프로토타입
을 통해 액세스됩니다. 따라서 person1에서 "name"을 호출하면 해당 속성이 인스턴스에 있는지 프로토타입에 있는지 여부에 관계없이 항상 true가 반환됩니다.
hasOwnProperty() 메소드와 in 연산자를 동시에 사용하면 아래와 같이 속성이 객체에 있는지 아니면
프로토타입에 있는지 확인할 수 있습니다.
name 속성이 프로토타입에 먼저 존재하므로 hasPrototypeProperty()가 반환됩니다. true
이 속성은 인스턴스에 존재하므로 hasPrototypeProperty()는 false를 반환합니다.
프로토타입 모드가

Person.prototype = {
constructor: Person,
name : "Nicholas",
age : 29,
job : "Software Engineer",
friends : ["Shelby", "Court"],
sayName : function () {
alert(this.name);
}
}

로그인 후 복사

로 작성된 경우 생성자를 위 형식으로 작성해야 합니다. 그렇지 않으면 함수 생성자가 window

var friend = new Person();
alert(friend instanceof Object); //true
alert(friend instanceof Person); //true
alert(friend.constructor == Person); //false
alert(friend.constructor == Object); //true

로그인 후 복사

를 가리킵니다. 4. 프로토타입 패턴

function Person(name, age, job){
this.name = name;
this.age = age;
this.job = job;
this.friends = ["Shelby", "Court"];
}
Person.prototype = {
constructor : Person,
sayName : function(){
alert(this.name);
}
}
var person1 = new Person("Nicholas", 29, "Software Engineer");
var person2 = new Person("Greg", 27, "Doctor");
person1.friends.push("Van");
alert(person1.friends); //"Shelby,Count,Van"
alert(person2.friends); //"Shelby,Count"
alert(person1.friends === person2.friends); //false
alert(person1.sayName === person2.sayName); //true

로그인 후 복사

5과 함께 생성자를 사용하세요. 동적 프로토타입 패턴

function Person(name, age, job){
//属性
this.name = name;
this.age = age;
this.job = job
// 方法
if (typeof this.sayName != "function"){
Person.prototype.sayName = function(){
alert(this.name);
};
}
}
var friend = new Person("Nicholas", 29, "Software Engineer");
friend.sayName();

로그인 후 복사

이 코드는 생성자가 처음 호출될 때만 실행됩니다. 그 후에는 프로토타입이 초기화되었으며 더 이상 수정이 필요하지 않습니다. 하지만 여기에서 프로토타입에 대한 변경 사항은 모든 인스턴스에 즉시 반영된다는 점을 명심하세요.
동적 프로토타입 모드를 사용하는 경우 객체 리터럴을 사용하여 프로토타입을 재정의할 수 없습니다. 앞서 설명했듯이 인스턴스가 이미 생성된 상태에서 프로토타입을 재정의하면 기존 인스턴스와 새 프로토타입 간의 연결이 끊어집니다.

위 내용은 5가지 JS 디자인 패턴의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!