JS 프로토타입과 프로토타입 체인에 대한 가장 자세한 설명

1. 일반 객체와 함수 객체

자바스크립트에서는 모든 것이 객체입니다! 하지만 대상도 다릅니다. 일반 객체와 함수 객체로 나뉘는데, 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을 가리키는 constructorconstructor （构造函数）属性，该属性（是一个指针）指向 Person。 即：

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

我们要记住两个概念（构造函数，实例）：  person1 和 person2 都是 构造函数 Person 的实例  一个公式：  实例的构造函数属性（constructor）指向构造函数。

三. 原型对象

在 JavaScript 中，每当定义一个对象（函数也是对象）时候，对象中都会包含一些预定义的属性。其中每个函数对象都有一个prototype 属性，这个属性指向函数的原型对象。（先用不管什么是 __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__ 属性，但只有函数对象才有 prototype 属性

那什么是原型对象呢？ 我们把上面的例子改一改你就会明白了：

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

原型对象，顾名思义，它就是一个普通对象（废话 = =!）。从现在开始你要牢牢记住原型对象就是 Person.prototype ，如果你还是害怕它，那就把它想想成一个字母 A： var A = Person.prototype

在上面我们给 A 添加了 四个属性：name、age、job、sayName。其实它还有一个默认的属性：constructor

在默认情况下，所有的原型对象都会自动获得一个 constructor（构造函数）属性，这个属性（是一个指针）指向 prototype 属性所在的函数（Person）

上面这句话有点拗口，我们「翻译」一下：A 有一个默认的 constructor 属性，这个属性是一个指针，指向 Person。即： Person.prototype.constructor == Person

在上面第二小节《构造函数》里，我们知道实例的构造函数属性（constructor）指向构造函数 ：person1.constructor == Person(생성자) 속성을 가지고 있습니다. 즉:

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

person1과 person2는 모두 Person 생성자의 인스턴스입니다. 공식: 인스턴스의 생성자 속성(생성자)은 생성자 . 3. 프로토타입 객체

var A = new Person();
Person.prototype = A; // 注：上面两行代码只是帮助理解，并不能正常运行

  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

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

🎜🎜기본 속성도 있습니다. 기본적으로 모든 🎜프로토타입 개체🎜🎜는 🎜자동으로 생성자🎜를 얻습니다🎜🎜. (생성자) 속성, 이 속성(포인터)은 prototype🎜 속성이 위치한 함수(Person)를 가리킵니다🎜🎜🎜🎜🎜🎜

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

var A = new Person();
Person.prototype = A; // 注：上面两行代码只是帮助理解，并不能正常运行

结论：原型对象（Person.prototype）是 构造函数（Person）的一个实例。

原型对象其实就是普通对象（但 Function.prototype 除外，它是函数对象，但它很特殊，他没有prototype属性（前面说道函数对象都有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）出来的普通对象就继承了这个属性。具体是怎么实现的继承，就要讲到下面的原型链了。

小问题，上面两个 this 都指向谁？

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

故两次 this 在函数执行时都指向 person1。

推荐教程：《JS教程》

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