자바스크립트 학습 노트(9) js 객체 디자인 패턴_기본 지식

1. 객체 생성

코드 복사 코드는 다음과 같습니다.

var person = new Object ();
person.name = "RuiLiang";
person.age = 30;
person.job = "선생님"; >alert( this.name);
};


공장 모드
단점: 개체를 식별할 수 없습니다

코드 복사

코드는 다음과 같습니다. function createPerson(name,age) ,job) {

var o = new Object();

o.name = 이름;
o.job = job; () {
alert (this.name);
return o;

var person1 = createPerson("A Liang",30,"선생님") ;
var person2 = createPerson("Junjun",24,"실업자");

person1.sayName(); //"A Liang"
person2.sayName(); 준준"


3. 생성자 패턴
단점 : 캡슐화 부족

코드 복사


코드는 다음과 같습니다.

function Person(name,age,job) { this.name = name; this.age = this; job = job; this.sayName = sayName; }

function sayName() {

alert(this.name)
}

var person1 = new Person ("A Liang",30 ,"선생님");
var person2 = new Person("Junjun",24,"실업자")
person1.sayName()
person2.sayName() ;


4. 프로토타입 모드
단점: 모든 속성이 인스턴스에 의해 공유됩니다.

코드 복사


코드는 다음과 같습니다.

function Person() { } Person.prototype.name = "ALiang" Person.prototype; .age = 30; Person.prototype.job = "선생님";

Person.sayName = function () {

alert(this.name);

🎜>hasOwnProperty() 메소드는 특정 속성을 감지합니다. 인스턴스 속성이라면 true를 반환합니다.

person1.hasOwnProperty("name") //이름은 person1의 속성인가요?
: 객체를 통해 접근한 속성이 존재하는지 여부, 존재한다면 속성이 인스턴스에 존재하는지 프로토타입에 존재하는지에 관계없이 true를 반환합니다.

alert("name" in person1); 존재하면 true를 반환
속성이 프로토타입에 있는지 아니면 객체에 있는지 확인하는 방법:

코드 복사


코드는 다음과 같습니다.


function hasPrototypeProperty(object,name) {

return !object.hasOwnProperty(name) && (객체의 이름) } // Usagevar person = new Person(); alert(hasPrototypeProperty(person,"name")); //true person.name = "Grey"; 프로토타입 alert(hasPrototypeProperty(person,"name")); //false

isPrototypeOf () 메소드는 지정된 객체 object1이 다른 객체의 프로토타입 체인에 존재하는지 확인하는 데 사용됩니다. object2. 그렇다면 true를 반환하고, 그렇지 않으면 false를 반환합니다.
형식은 다음과 같습니다.
object1.isPrototypeOf(object2);
object1은 객체의 인스턴스입니다.
object2는 프로토타입 체인이 확인되는 또 다른 객체입니다.
프로토타입 체인을 사용하여 동일한 객체 유형의 여러 인스턴스 간에 기능을 공유할 수 있습니다.
object2의 프로토타입 체인에 object1이 포함되어 있으면 isPrototypeOf 메서드는 true를 반환합니다.
object2가 객체가 아니거나 object1이 object2의 프로토타입 체인에 나타나지 않으면 isPrototypeOf 메서드는 false를 반환합니다.

코드 복사


코드는 다음과 같습니다.


//리터럴 재정의 프로토타입 객체

function Person(){ } Person.prototype = { constructor : Person, name : "ALiang", age : 30,

job : "선생님",

sayName : function() {
alert(this.name);
}
};


5. 🎜> 생성자 모드와 프로토타입 모드의 장점이 있습니다. 생성자 모드는 속성에 사용되고 프로토타입 모드는 메소드에 사용됩니다. // 이 모드가 가장 널리 사용됩니다




코드 복사


코드는 다음과 같습니다.

함수 사람(이름,나이,직업) {
this.name = 이름;
this.age = 나이
this.job = job; ["xuyun","wuxueming"];
}
Person.prototype = {
constructor : Person,
sayName : function() {
alert(this.name); >}
};

var person1 = new Person("ALiang",30,"선생님");
var person2 = new Person("ZuNan",26,"선생님");
person1.friends.push("JunJun");
alert(person1.friends); //"xuyun","wuxueming","JunJun"
alert(person2.friends) //" xuyun","wuxueming"


6. 동적 프로토타입 모드

코드 복사 코드 다음과 같습니다:

function Person(name,age,job) {

this.name = name;
this.age = age
this.job

if (typeof this.sayName != "function"){ //여기서 sayName은 초기화 이후에 존재하는 모든 메서드나 속성이 될 수 있습니다.
Person.prototype.sayName = function() { //사용할 수 없습니다. 리터럴 양적 형식
alert(this.name);
}


7. 안전한 생성자 패턴