먼저 위 그림

원형 계승

원형 계승 실현

function Animal(name){
    //  
    this.name = name || 'Animal';
    //  
    this.sleep = function(){
        console.log(this.name + "  。");
    }
}
    //  
Animal.prototype.eat = function(food){
    console.log(this.name + "   "+food);
}

//  
function Tiger(){}
Tiger.prototype = new Animal();
Tiger.prototype.name = "Tiger";

var tiger = new Tiger();
console.log(tiger.name);
console.log(tiger.eat('sleep'));
console.log(tiger.sleep());
console.log(tiger instanceof Animal); //true 
console.log(tiger instanceof Tiger); //true

원형 사슬

무엇이 원형 체인입니까?원형 체인을 이해하려면 함수 대상,constructor,new,Prototype,proto 등 다섯 가지 개념에서 착수해야 한다.

원형 체인

상속에 대해 이야기할 때 JavaScript는 하나의 구조만 가지고 있다. 대상, 모든 대상은 프로토콜의 속성이 그의 구조 함수의 원형 대상을 가리킨다.이 원형 대상도 자신의 원형 대상이 있다.
함수는prototype 속성을 통해 찾기

조합 상속

function Animal(name){
    //  
    this.name = name || 'Animal';
    //  
    this.sleep = function(){
        console.log(this.name + "  。");
    }
}
    //  
Animal.prototype.eat = function(food){
    console.log(this.name + "   "+food);
}

//  
function Tiger(value){
    Animal.call(this, value)
}
Tiger.prototype = new Animal();
Tiger.prototype.name = "Tiger";

var tiger = new Tiger();
console.log(tiger.name);

class 키워드 구현

class Parent {
  constructor(value) {
    this.val = value
  }
  getValue() {
    console.log(this.val)
  }
}
class Child extends Parent {
  constructor(value) {
    super(value)
  }
}
let child = new Child(1)
child.getValue() // 1
child instanceof Parent // true

함수 대상

JavaScript에서 함수는 객체입니다.(함수는 일등 공민) 함수를 변수에 부여할 수 있고 매개 변수로 다른 함수에 전달할 수 있으며 속성과 호출 방법을 추가할 수 있다.키워드function에서 정의한 함수는 모두 함수 대상이며, 함수 대상만prototype 속성을 가지고 있다.이 함수의 원형 대상을 가리킨다.

constructor 구조 함수

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

우리는 일반적으로 대문자로 시작하는 사용자 정의 함수인 Person () 을 만들었습니다.

new

Person () 의 새 인스턴스를 만들려면 new 키워드를 사용해야 합니다.new 호출 구조 함수는 실제로 다음과 같은 네 가지 절차를 거친다.

새 대상을 만듭니다

구조 함수의 작용역을 새로운 대상(this는 새로운 대상을 가리킨다)에 부여한다

구조 함수의 코드를 실행합니다

새로운 대상을 되돌려줍니다

구조 함수는 다른 일반 함수와 별 차이가 없습니다. new 조작 기호를 사용하면 구조 함수로 호출할 수 있습니다.
주의: 구조 함수는 대상을 되돌려주면 새로 만든 대상을 덮어씁니다.
## 구조 함수의 문제
실례를 만들 때 구조 함수는 매번 실행해야 한다

const Tom = new Person('Tom', 12, 'cxy');
const lucy = new Person('lucy', 14, 'dd');
Tom.sayName === lucy.sayName // false

이렇게 하면 모든 실례에 독립된sayName 방법이 있습니다.일반적인 해결 방법은 방법을 원형 체인에 추가하는 것이다.

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

Person.prototype.sayName = function (){
    console.log(this.name);
}

prototype 원형

우리가 위에서 말한 바와 같이 원형을 사용하는 장점은 모든 대상의 실례를 그가 포함하는 속성과 방법을 공유하게 하는 것이다.

원형 대상

기본적으로 모든 원형 대상은 자동으로constructor 속성을 얻을 수 있습니다. 이 속성은prototype 속성이 있는 함수를 가리키는 바늘을 포함합니다.위에서 우리가 만든 Person.prototype.constructor는 Person을 가리킨다.이 구조 함수를 통해 우리는 원형 대상에 다른 속성과 방법을 추가할 수 있다.
원형에 저장된 값은 대상 실례를 통해 접근할 수 있지만, 원형에 저장된 값은 대상 실례를 통해 다시 쓸 수 없습니다.??만약 우리가 추가한 속성과 방법이 원형 대상의 속성과 방법과 같다면 어떻게 될까

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

Person.prototype.sayName = function (){
    console.log(this.name);
}
Person.prototype.tag = ' V';
const Tom = new Person('Tom', 12, ' ');
Tom.tag = 'dd';
Tom.sayName = function(){console.log(1)};

우리가 추가한 속성과 방법을 볼 수 있습니다. 이것은 대상의 속성과 방법을 읽는 메커니즘에 의해 결정됩니다.우선 원형에서 찾고, 원형에 없으면 원형 체인에서 찾고, 층층이 위로 찾습니다.
=v=우리가 원형 대상을 수정하면 어떻게 될까 헤헤

function Person(){}

const Tom = new Person();

Person.prototype = {
    constructor: Person,
    name : "Stone",
    age : 28,
    job : "Software Engineer",
    sayName : function () {
        console.log(this.name);
    }
};

Tom.sayName();   // Uncaught TypeError: Tom.sayName is not a function

Tom은 태어났을 때 이런 물건이 없었어요. 저처럼 기지가 넘쳤어요.

원생 대상의 원형

원본 대상도 이런 모델을 통해 만들어졌다.
모든 원생 인용 유형은 구조 함수의 원형에 방법을 정의했다.위의 예를 통해 우리는 원생 대상의 원형을 직접 수정하는 방법도 있지만 이런 방식을 추천하지 않으면 원생 방법을 다시 쓸 수 있다.

원형 체인의 문제

이것은 구조 함수에 초기화 파라미터를 전달하는 부분을 생략하였으며, 결과적으로 모든 실례는 기본적으로 같은 속성 값을 얻을 것이다.
참조 유형에 대한 공유 속성

function Person(name, age, job){
    this.name = name;
    this.age = age;
    this.job = job;
    this.friends = ["ZhangSan", "LiSi"];
}

Person.prototype = {
    constructor : Person,
    sayName : function(){
        console.log(this.name);
    }
}

const person1 = new Person("dd", 28, "Engineer");
const person2 = new Person("tt", 29, "Teacher");
person2.friends=[]
person1.friends  //  ["ZhangSan", "LiSi"]

공유 속성이 모두 백업된 것을 볼 수 있습니다.
다음으로 전송:https://juejin.im/post/5cf52ff451882552a826f40c