JS 프로토타입 및 프로토타입 체인에 대한 자세한 설명(1)

이번에는 JS 프로토타입과 프로토타입 체인에 대해 자세히 설명하고 주의사항을 알려드리겠습니다.

1. 일반 객체와 함수 객체

JavaScript에서는 모든 것이 객체입니다! 하지만 대상도 다릅니다. 일반 객체와 함수 객체로 구분됩니다. Object와 Function은 JS에 포함된 함수 객체입니다. 여기에 예가 있습니다

var o1 = {}; 
var o2 =new Object();
var o3 = new f1();
function f1(){}; 
var f2 = function(){};
var f3 = new Function('str','console.log(str)');
      console.log(typeof Object);  //function
      console.log(typeof Function);  //function 
      console.log(typeof f1); //function 
      console.log(typeof f2);//function
      console.log(typeof f3);//function 
      console.log(typeof o1);// object
      console.log(typeof o2);//object
      console.log(typeof o3);  //object

위의 예에서 o1 o2 o3은 일반 객체이고, f1 f2 f3은 함수 객체입니다. 구별하는 방법은 사실 매우 간단합니다. new Function()을 통해 생성된 모든 객체는 함수 객체이고, 나머지는 일반 객체입니다. f1, f2는 모두 최종 분석에서 new Function()을 통해 생성됩니다. 함수 객체는 New Function()을 통해서도 생성됩니다.

일반 객체와 함수 객체를 반드시 구별하세요. 아래에서는 자주 사용하겠습니다.

2. 생성자

먼저 생성자에 대한 지식을 검토해 보겠습니다.

function Person(name, age, job) {
 this.name = name; 
 this.age = age;
  this.job = job; 
  this.sayName = function() { alert(this.name) } 
}
var person1 = new Person('Zaxlct', 28, 'Software Engineer');
var person2 = new Person('Mick', 23, 'Doctor');

위 예에서 person1과 person2는 모두 Person의 인스턴스입니다. 두 인스턴스 모두 Person에 대한 포인터인 생성자 속성을 가지고 있습니다. 즉,

console.log(person1.constructor == Person); //true
  console.log(person2.constructor == Person); //true

두 가지 개념(생성자, 인스턴스)을 기억해야 합니다.
person1과 person2는 모두 생성자 Person의 인스턴스입니다.
공식:
인스턴스의 생성자 속성(생성자)은 생성자를 가리킵니다.

3. 프로토타입 객체

JavaScript에서는 객체(함수도 객체임)가 정의될 ​​때마다 객체에 미리 정의된 속성이 포함됩니다. 각 함수 객체에는 함수의 프로토타입 객체를 가리키는 프로토타입 속성이 있습니다. (먼저 __proto__를 사용합니다. 두 번째 과정에서 자세히 분석합니다.)

function Person() {}
Person.prototype.name = 'Zaxlct';
Person.prototype.age  = 28;
Person.prototype.job  = 'Software Engineer';
Person.prototype.sayName = function() {
  alert(this.name);
}  
var person1 = new Person();
person1.sayName(); // 'Zaxlct'var person2 = new Person();
person2.sayName(); // 'Zaxlct'console.log(person1.sayName == person2.sayName); //true

이 기사의 첫 번째 "법칙"을 얻었습니다.

모든 객체에는 __proto__ 속성이 있지만 함수 객체에만 프로토타입 속성이 있습니다

그래서 무엇입니까? 프로토타입 객체?
위의 예를 바꾸면 다음과 같이 이해하게 될 것입니다.

Person.prototype = {   name:  'Zaxlct',   age: 28,   job: 'Software Engineer',   sayName: function() {
     alert(this.name);
   }
}

프로토타입 개체는 이름에서 알 수 있듯이 일반 개체입니다(말도 안되는 = =!). 이제부터 프로토타입 객체가 Person.prototype이라는 것을 기억해야 합니다. 여전히 두렵다면 문자 A로 생각하세요: var A = Person.prototype

위에서 A 속성에 name, 나이, 직업, 이름. 실제로 기본 속성도 있습니다: constructor

기본적으로 모든 프로토타입 객체는 프로토타입 속성이 있는 함수(Person)를 가리키는 포인터인 생성자(생성자) 속성을 자동으로 얻습니다

위의 문장은 약간 혼란스럽습니다. 이를 "번역"해 보겠습니다. A에는 Person을 가리키는 포인터인 기본 생성자 속성이 있습니다. 즉,

Person.prototype.constructor == Person

위의 두 번째 섹션 "생성자"에서 인스턴스의 생성자 속성(생성자)이 생성자를 가리킨다는 것을 알고 있습니다. person1.constructor == Person

이 두 "공식"은 다소 비슷해 보입니다. 연결됨:

person1.constructor == Person
Person.prototype.constructor == Person

person1 왜 생성자 속성이 있나요? 이는 person1이 Person의 인스턴스이기 때문입니다.
그럼 Person.prototype에는 왜 생성자 속성이 있나요? ? 마찬가지로 Person.prototype(A로 생각)도 Person의 인스턴스입니다.
즉, Person이 생성되면 그 인스턴스 객체가 생성되어 프로토타입에 할당됩니다.

var A = new Person();
Person.prototype = A;

결론 : 프로토타입 객체(Person.prototype)는 생성자(Person)의 인스턴스입니다.

프로토타입 객체는 실제로는 일반 객체입니다(함수 객체인 Function.prototype은 제외하지만 매우 특별합니다. 프로토타입 속성이 없습니다(앞에서 언급했듯이 함수 객체는 모두 프로토타입 속성을 가집니다)). 아래 예를 보세요:

function Person(){}; console.log(Person.prototype) //Person{}
 console.log(typeof Person.prototype) //Object
 console.log(typeof Function.prototype) // Function，这个特殊
 console.log(typeof Object.prototype) // Object
 console.log(typeof Function.prototype.prototype) //undefined

Function.prototype 왜 함수 객체인가요?

var A = new Function (); Function.prototype = A;

위에서 언급했듯이 new Function()에 의해 생성된 모든 개체는 함수 개체입니다. A는 함수 개체이므로 Function.prototype은 함수 개체입니다.

프로토타입 객체는 무엇에 사용되나요? 주로 상속에 사용됩니다. 예:

 var Person = function(name){    this.name = name; // tip: 当函数执行时这个 this 指的是谁？
  };
  Person.prototype.getName = function(){    return this.name;  // tip: 当函数执行时这个 this 指的是谁？
  }  var person1 = new person('Mick');
  person1.getName(); //Mick

이 예에서 볼 수 있듯이 함수 객체의 속성을 Person.prototype으로 설정하면 Person 인스턴스(person1)에서 나오는 일반 객체가 이 속성을 상속합니다. 상속을 구현하는 방법은 구체적으로 아래 프로토타입 체인에 따라 다릅니다.

작은 질문입니다. 위의 두 가지 항목은 누구를 가리키는 것인가요?

 var person1 = new person('Mick');
  person1.name = 'Mick'; // 此时 person1 已经有 name 这个属性了
  person1.getName(); //Mick

따라서 두 번 모두 함수가 실행될 때 person1을 가리킵니다.

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