자바스크립트 프로토타입 체인을 이해하는 방법

프로토타입 체인은 실제로 제한된 인스턴스 객체와 프로토타입 사이의 제한된 체인으로, 공유 속성과 상속을 구현하는 데 사용됩니다. 두 가지 주요 문제가 있습니다. 1. 상위 유형에 매개변수를 전달하는 것이 불편합니다. 2. 상위 유형의 참조 유형이 모든 인스턴스에서 공유됩니다.

이 튜토리얼의 운영 환경: Windows 7 시스템, JavaScript 버전 1.8.5, Dell G3 컴퓨터.

새 연산자는 정확히 무엇을 합니까? 실제로는 매우 간단합니다. 세 가지 작업을 수행합니다.

var obj  = {};
obj.__proto__ = Base.prototype;
Base.call(obj);

첫 번째 줄에서는 빈 개체 obj를 만듭니다

두 번째 줄에서는 이 빈 개체의 __proto__ 멤버가 Base 함수 개체 프로토타입 멤버 개체를 가리킵니다.

세 번째 줄에서는 Base 함수를 가리킵니다. 객체의 __proto__ 멤버 this 포인터를 obj로 대체한 다음 Base 함수를 호출하므로 obj 객체에 id 멤버 변수를 할당합니다. 호출 함수 사용과 관련하여 이 멤버 변수의 값은 "base"입니다.

프로토타입 체인에 대해 이야기하기 전에 먼저 사용자 정의 함수와 함수 간의 관계를 이해해야 하며, 생성자, 프로토타입 및 인스턴스 간의 불가분의 관계는 무엇입니까? 실제로 모든 함수는 Function의 인스턴스입니다. 생성자에는 역시 객체인 프로토타입 속성이 있고, 프로토타입 객체에는 생성자를 가리키는 생성자 속성이 있고, 프로토타입을 가리키는 인스턴스 객체에도 _proto_ 속성이 있습니다. . 개체이며 이 속성은 표준 속성이 아니므로 프로그래밍에 사용할 수 없습니다. 이 속성은 브라우저에서 내부적으로 사용됩니다.

// _proto_
在函数里有一个属性prototype
由该函数创建的对象默认会连接到该属性上
    //prototype 与 _proto_ 的关系
_proto_是站在对象角度来说的
prototype 是站在构造函数角度来说的

다음으로, 말할 수 있는 사진을 살펴보겠습니다.

1. 생성자, 프로토타입, 인스턴스의 관계

①+Object

　 ②+Function+Object+Array

이것을 이해한 후 프로토타입 체인이 무엇인지 논의해 봅시다. 직설적으로 말하면 실제로는 공유 속성과 상속을 구현하는 데 사용되는 제한된 인스턴스 개체와 프로토타입 사이에 형성된 제한된 체인입니다. 다음으로 코드를 살펴보겠습니다.

 var obj = new Object();
对象是有原型对象的
原型对象也有原型对象
   obj._proto_._proto_._proto_
原型对象也有原型对象，对象的原型对象一直往上找，会找到一个null
// 原型链示例
   var arr = [];
   arr -> Array.prototype ->Object.prototype -> null
   var o = new Object();
   o -> Object.prototype -> null;

function Foo1(){
   this.name1 = '1';
}
function Foo2(){
   this.name2 = '2';
}
Foo2.prototype = new Foo1();
function Foo3(){
   this.name = '3';
}
Foo3.prototype = new Foo2();
var foo3 = new Foo3();
console.dir(foo3);

　다음 단계는 상속 문제입니다.

2. 상속

　1) 프로토타입 상속

function Animal(name){
       this.name = name;
   }
   function Tiger(color){
       this.color = color;
   }
//   var tiger = new Tiger('yellow');
//   console.log(tiger.color);
//   console.log(tiger.name);  //undefined
//      Tiger.prototype = new Animal('老虎');   //一种方式
   Object.prototype.name = '大老虎';   //第二种方式
        var tiger = new Tiger('yellow');
        console.log(tiger.color);
        console.log(tiger.name);

여기에는 두 가지 주요 문제가 있다는 점에 주목할 가치가 있습니다. ① 매개변수를 부모 유형에 전달하는 것이 불편합니다. ② 부모 유형의 참조 유형을 모두 사용합니다. 인스턴스 공유

2) ES5는 상속을 구현하기 위한 Object.create() 메서드를 제공합니다.

————做兼容
  //shim垫片
    function create(obj){
        if(Object.create){
            return Object.create(obj);
        }else{
            function Foo(){}
            Foo.prototype = obj;
            return new Foo();
        }
    }

이 메서드는 ES5의 새로운 기능으로 실제로는 복사 상속입니다.

3) 상속 복사

var obj = {};
obj.extend = function(obj){
    for(var k in obj){
      this[k] = obj[k];
    }
}

4) 빌려온 생성자 상속

- 빌려온 생성자의 프로토타입 멤버를 빌려오지 않음

function Animal(name){
    this.name = name;
}
function Mouse(nickname){
    Animal.call(this,'老鼠');
    this.nickname = nickname;
}
var m = new Mouse('杰瑞');
console.log(m.name);
console.log(m.nickname);

기존 문제: 프로토타입 상속의 매개변수 전달 문제는 해결 가능하지만 멤버(속성 및 메서드) ) 상위 유형의 프로토타입 객체에 대한 상속은

으로 상속될 수 없습니다. 5) 결합 상속

- 프로토타입 객체는 동적입니다.

function Person(name){
   this.name = name;
}
Person.prototype.showName = function(){
   console.log(this.name);
}
function Student(name,age){
   Person.call(this,name);
   this.age = age;
}
Student.prototype = new Person();
Student.prototype.contructor = Student;
Student.prototype.showAge = function(){
    console.log(this.age);
}
var stu = new Student('张三',12);
stu.showName();
stu.showAge();

[프로토타입 상속 + 빌린 생성자 상속] 특성 특성의 각 인스턴스에는 하나의 복사본이 있음을 의미합니다. , 그리고 그 방법이 공유됩니다

[요약] 아주 조잡한 말로 말하자면, 소위 프로토타입 체인은 어머니를 찾는 방법인데, 사람이 인간 어머니에게서 태어나고, 악마가 있다는 뜻으로 이해할 수 있습니다. 의 괴물에게서 태어났습니다. 실제로 프로토타입 체인의 핵심은 속성 공유와 독립 제어뿐입니다. 객체 인스턴스에 독립 속성이 필요한 경우 모든 메서드의 본질은 객체 인스턴스에 속성을 생성하는 것입니다. 너무 많이 생각하지 않는다면 프로토타입 속성을 재정의하기 위해 Person에서 필요한 독립 속성을 직접 정의할 수 있습니다. 즉, 프로토타입 상속을 사용할 때 프로토타입의 속성에 특별한 주의를 기울여야 합니다. 왜냐하면 프로토타입의 속성은 모두 전체 본문에 영향을 미치기 때문입니다. 현재 가장 일반적으로 사용되는 방법은 결합 모드입니다.

1. 프로토타입 체인

1) 생성자, 프로토타입 및 인스턴스의 관계

① 생성자는 객체(Object의 인스턴스)인 프로토타입 속성을 가집니다.

② 프로토타입 객체 프로토타입에는 생성자 속성이 있으며, 이 속성은 다음을 가리킵니다. 프로토타입 객체가 속한 생성자

③인스턴스 객체에는 생성자의 프로토타입 객체를 가리키는 _proto_ 속성이 있습니다. 이는 비표준 속성이며 프로그래밍에 사용할 수 없습니다.

를 사용합니다. 2) 프로토타입과 _proto_

의 관계 ①prototype은 생성자의 속성입니다.

②_proto_는 인스턴스 객체의 속성입니다.

向 - 둘 다 같은 객체를 가리킨다

[요약] i) 함수도 객체이고, 객체가 반드시 함수일 필요는 없다.

II) 객체의 객체: 무질서한 키 값 쌍; 값 ​​모든 데이터 유형의 값일 수 있습니다

        iii) 개체는 컨테이너이고 이 컨테이너에는 (속성 및 메서드)가 포함됩니다.

3) 속성 검색

  ① 개체의 멤버에 액세스할 때, 먼저 객체에

이 있는지 찾아보세요. ② 현재 객체에 없으면

을 찾습니다. ③ ③ 구조체 함수의 프로토타입 객체에서 프로토타입 객체에 없으면

을 찾습니다.

2. Function

- 모든 함수는 Function

의 인스턴스입니다. ①로컬 객체: 호스트 환경(브라우저)에 독립적인 객체 - Object, Array, Date, RegExp, Function, Error, Number, String , Boolean

②내장 객체 - Math, Global(js의 창, 전역 변수) 포함, 사용 시 new

필요 없음 ③호스트 객체 - 사용자 정의 객체, DOM, BOM

포함【추천 학습 :javascript 고급 튜토리얼

】🎜

위 내용은 자바스크립트 프로토타입 체인을 이해하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!