자바스크립트 객체지향

1. 함수(생성자), 프로토타입, 인스턴스 객체의 관계

A. 함수와 프로토타입의 관계

1. 다음과 같은 특정 규칙 세트에 따라 함수에 대한 프로토타입 속성(프로토타입 객체)
을 생성합니다.
function fun(){
 
}
console.log(fun.prototype ); / /fun {}, 프로토타입이 객체임을 나타냅니다
참고: 프로토타입에 정의된 속성과 메서드는 생성자를 호출하는 모든 인스턴스화된 객체에서 공유됩니다

2. 생성자(생성자) 함수) 속성을 얻으려면 생성자 속성에는 프로토타입 속성이 있는 함수(fun)에 대한 포인터가 포함되어 있으며(매우 중요) 프로토타입에 정의된 속성과 메서드가 생성자에서 액세스할 수 있음을 나타냅니다( fun),
생성자에 프로토타입이 정의된 경우 함수가 객체를 인스턴스화하기 위해 new 연산자를 사용할 때 인스턴스화된 객체의 유형을 식별하는 데 사용됩니다(실용적인 의미는 별로 없습니다) 예:
function fun(name){
console.log(fun.prototype.name == this.name);//true(yjh)
this.name = "yjh1" ;
console.log(this.name);//yjh1
console.log(fun.prototype.name == this.name);//false(yjh,yjh1)
}
재미있어요. 프로토타입 = {
생성자: fun,
이름: "yjh"
}
var fun1 = new fun();
console.log(fun.prototype.constructor == fun ); //true
console.log(fun1.constructor == fun); //true

B. 인스턴스화된 객체와 프로토타입의 관계

1. 연산자가 객체를 인스턴스화하면 객체에는 프로토타입을 가리키는 고유한 __proto__ 속성이 포함됩니다. 이 속성은 인스턴스 객체와 프로토타입 객체 사이에만 존재합니다.

예:

function fun(name, age){

this.name = 이름;
this.age = age;
this.sayName = function(){
Alert(this.name)
}
}
fun .prototype = {
생성자: fun,
연령: 22,
sayName: function(){
Alert(this.age);
}
}
var fun1 = new fun("yjh","23");
console.log(fun1.__proto__) //fun { age="22", sayAge=function()}
console.log (fun1.__proto__ == fun.prototype); //true

C. 인스턴스 객체와 함수(생성자)의 관계

1. 함수가 객체를 인스턴스화하는 경우 인스턴스 객체는 내부 속성인 __proto__를 통해 프로토타입을 가리키며, 프로토타입(prototype)에 정의된 속성과 메서드를 공유합니다.

프로토타입(prototype)의 생성자 속성은 생성자를 가리키므로 인스턴스 객체도 해당 속성을 갖습니다. 및 생성자에 정의된
속성 및 메서드:
function fun(name,age){
this.name = name;
this.age = age;
this .sayName = function(){
경고(this.name);
}
}
var fun1 = new fun("yjh","23");
fun1.sayName( ); //yjh

D. 함수(생성자), 인스턴스 객체 및 프로토타입 간의 관계

1. 인스턴스화된 객체 속성 및 메소드를 호출할 때 인스턴스가 정의한 속성 및 메소드 객체 자체가 먼저 검색됩니다. 그렇지 않은 경우

function fun(name,age){
this.name = name;
this과 같은 프로토타입
을 계속 검색합니다. .age = 나이;
this.sayName = function(){
경고(this.name)
}
}
fun.prototype.age = "22";
fun.prototype.sayAge = function(){
Alert(this.age);
}
var fun1 = new fun("yjh","23");
fun1.age = 24 ;
fun1.sayAge(); //24, 프로토타입의 메소드가 호출됩니다.
먼저 인스턴스 객체에 없는 sayAge 메소드를 검색하고, sayName 메소드를 찾으세요. 프로토타입에서 age 속성을 계속 검색하여 fun1 인스턴스 객체에 age 값이 정의되어 있음을 확인합니다. 따라서 age 속성이 fun1 인스턴스 객체에 직접 정의되어 있지 않으면 더 이상 검색하지 마세요. 결과는 23이 됩니다. 그 이유는 생성자가 인스턴스 객체의 age 속성을 재정의하기 때문입니다.

____________________________________________

2. 객체 지향 모드:
함수에 대한 초기 이해:
a. JavaScript의 모든 함수는 함수 유형의 인스턴스이자 객체 유형의 인스턴스입니다. 인스턴스 객체의 내부 속성 __proto__는 Object 생성자의 프로토타입 속성을 가리키므로 인스턴스는 Object 객체의 기본 속성과 메서드를 상속합니다.
b. 기본적으로 정의되지 않은 함수를 반환합니다. 이 함수는 인스턴스 객체를 반환합니다.

1. 객체를 생성하려면 특정 인터페이스 new Object()를 사용하세요
단점: 동일한 인터페이스를 사용하여 여러 객체를 생성하면 중복 코드가 많이 생성됩니다

2. 팩토리 패턴, 함수를 사용하여 특정 인터페이스로
객체를 캡슐화하고 생성합니다.
function createObj(name,age){
var o = new Object();
o.name = name ;
o .age = age;
return o;
}
var o1 = createObj("yjh",23)
장점: 인터페이스를 사용하여 유사한 여러 개를 만드는 문제 해결
단점: 객체 인식 문제, 즉 o1은 어떤 객체 유형인지 해결하지 못한다

3. 생성자 모드, JavaScript에는 클래스 개념이 없습니다.
예:
function CreateObj(name, age){
this.name = name;
this.age = age;
this.sayName = function(){
Alert ("hi" + this.name);
}
}
var obj1 = new CreateObj("yjh1",23);
var obj2 = new CreateObj("yjh2",23);
장점: 인스턴스 객체 유형 식별 문제를 해결합니다. obj1, obj2 객체는 CreateObj 유형 www.2cto.com입니다.
단점: 생성자가 정의한 속성 및 메서드는 모든 인스턴스에서 공유되지 않으며 메서드는 각 인스턴스에서 호출되는 두 개의 다른 함수 유형(obj1.sayName != obj2.sayName)

4. 프로토타입 모드
예:
function CreateObj(){
}
CreateObj.prototype = {
생성자: CreateObj,
이름: "yjh",
연령: 23,
색상: ["a","b"],
sayName: function(){
경고(this.name);
}
}
var obj1 = new CreateObj();
var obj2 = new CreateObj();
alert(obj1 .sayName == obj2.sayName);//true
obj1.colors .push("c");
alert(obj2.colors);//a,b,c
설명: 호출할 때 obj1 및 obj2 인스턴스의 속성 및 메서드, 인스턴스 자체에서 정의한 속성 및 메서드가 먼저 검색됩니다. 그렇지 않은 경우 인스턴스의 __proto__ 내부 속성이 프로토타입을 가리키므로
계속 검색됩니다. 프로토타입에 정의된 속성과 메서드

장점: 프로토타입에 정의된 속성과 메서드는 모든 인스턴스 객체에서 공유되므로 동일한 함수를 구현하는 여러 함수의 문제를 해결합니다.
단점: 속성이 프로토타입에 정의된 참조 유형 값이 포함되어 있으면 한 인스턴스의 속성 값을 수정하면 다른 인스턴스의 속성 값에 영향을 미칩니다. 이는 프로토타입의 공유 특성 때문입니다

5. 생성자 모드 및 프로토타입 모드)
예:
function CreateObj(name,age){
console.log( this.name);//yjhyjh
this.name = name;
this.age = age;
this.colors = ["a","b"];
}
CreateObj.prototype = {
생성자: CreateObj,
이름: "yjhyjh" ,
sayName: function(){
return this.name;
}
}
var obj1 = new CreateObj("yjh1",23);
var obj2 = new CreateObj ("yjh2",23);
alert(obj1.sayName == obj2.sayName);//true
alert(obj1.sayName());//yjh1
alert(obj2.sayName( ));//yjh2
obj1.colors.push("c");
alert(obj2.colors); //a,b
설명: 공유할 필요가 없는 속성을 정의합니다. 생성자의 모든 인스턴스에 의해 생성되고, 프로토타입에서 공유되어야 하는 속성과 메소드를 정의합니다. 보완적인 생성자 패턴과 프로토타입 패턴의 장점과 단점,
프로토타입은 인스턴스화된 모든 객체의 프로토타입 객체입니다. 인스턴스와 프로토타입은 인스턴스 내부 속성인 __proto__를 통해 프로토타입에 연결됩니다. 모든 인스턴스는 프로토타입의 속성과 메서드를 공유합니다. 생성자가 프로토타입, 메서드,
에서 동일한 이름으로 속성을 재정의하면 인스턴스는 객체는 생성자에 정의된 속성과 메서드를 호출합니다.

6. 상속(구현 상속, 프로토타입 체인)
은 한 생성자의 프로토타입을 다른 생성자의 인스턴스화 객체로 사용하는 것입니다. 그러면 이 인스턴스화 프로토타입 객체가 프로토타입 속성과 메서드를 상속하게 됩니다. 호출된 프로토타입 체인
예:
function Fun1(){
this.name = ["yjh1","yjh2"];
}
Fun1.prototype = {
생성자 : Fun1,
sayName: function(){
Alert(this.name)
}
}
function Fun2(){}
Fun2.prototype = new Fun1();
var fun2 = new Fun2();
fun2.sayName();//yjh1,yjh2
fun2.name.push("yjh3"); //fun2.name = [ "yjh1", "yjh2","yjh3"];
var fun3 = new Fun2();
alert(fun3.name);//yjh1,yjh2,yjh3
단점: 참조 유형을 포함한다는 점에서 값, 프로토타입에 정의된 속성 및 메소드는 모든 인스턴스에서 공유됩니다. Fun2.prototype 프로토타입 객체는 Fun1 유형의 인스턴스입니다.
따라서 프로토타입 객체는 인스턴스화될 때 참조 유형 값을 포함하는 이름 속성을 갖습니다. multiple Fun2 형 객체가 생성되면 모든 인스턴스 객체는 프로토타입 name 속성을 공유합니다. 인스턴스의 name 속성 값을 수정하면
가 프로토타입

에 정의된 name 속성 값을 직접 수정합니다. 조합 상속(생성자 상속 및 차용)
예:
function Fun1(){
this.name = ["yjh1","yjh2"];
}
Fun1.prototype = {
생성자: Fun1,
sayName: function(){
Alert(this.name)
}
}
function Fun2(){
Fun1.call(this );
}
Fun2.prototype = new Fun1();
var fun2 = new Fun2();
fun2.sayName();//yjh1,yjh2
fun2.name. push(" yjh3"); //fun2.name = ["yjh1","yjh2","yjh3"];
var fun3 = new Fun2();
alert(fun2.name);// yjh1,yjh2 ,yjh3
alert(fun3.name);//yjh1,yjh2
설명: 생성자에 정의된 속성 및 메서드는 모든 인스턴스에서 공유되지 않으며, 생성자에 정의된 속성 및 메서드를 재정의하므로 참조 유형 값이 있는 속성을 포함하는 인스턴스화된 프로토타입 객체(Fun2.prototype)로 인해 발생하는 문제는 없습니다