원형 부분

구조 함수와 인스턴스를 간단히 만듭니다.

function Person() {

}
Person.prototype.name = 'Zhar';
Person.prototype.age = 30;
Person.prototype.say = function(){
  console.log(this.name);
}
var person1 = new Person();
var person2 = new Person();
console.log(person1.name) // Zhar
console.log(person2.name) // Zhar

Person은 구조 함수인person은 Person의 실례 대상이다

1、instanceof

instanceof는 한 대상이 다른 대상인지 아닌지를 판단하는 실례입니다. (이 방법은 원형 체인에서 여전히 유효합니다.)
주:instance를 예로 들면, 실례적인 의미

console.log(person1 instanceof Person);//true
console.log(person2 instanceof Person);//true
var arr = new Array();
console.log(arr instanceof Array);//true

2、prototype

모든 함수에는 프로토타입 속성 (함수만 있는) 함수가 있는 프로토타입 속성은 이 구조 함수가 만든 실례의 원형 (함수의 원형이 아니라 실례의 원형) 을 가리킨다.

3、constructor

기본적으로 원형 대상은 자동으로 constructor (구조기) 속성을 얻을 수 있습니다. 이 속성은 구조 함수를 가리킵니다.
원형은 무엇입니까?모든 대상은 그와 관련된'원형'대상이 있고, 모든 대상은 원형에서 속성을 계승한다
어떻게 대상의 원형에 접근합니까?ECMA에서 대상의 원형에 직접 접근하는 방법은 규정되어 있지 않지만 Firefox/Chrome/safari는 모든 대상에 프로토 속성을 가지고 원형 대상에 접근합니다.

4、_proto__

console.log(Person.prototype);
console.log(person);
console.log(person.__proto__);

__proto__ 실례와 구조 함수의 원형 대상 사이에 존재하는 것이지 실례와 구조 함수 사이에 존재하는 것이 아니다

소결

구조 함수의prototype 속성과 실례의proto는 구조 함수의 원형을 가리킨다

구조 함수 원형의constructor(구조기)는 이 구조 함수를 가리킨다

원형PNG

5、isPrototypeOf

object1을 통해 가능합니다.isPrototypeOf(object2)는 한 대상이 다른 대상의 원형 체인에 존재하는지, 즉object1이object2의 원형 체인에 존재하는지 판단한다.다시 말하면object2가object1을 가리키는 바늘이 있는지 판단한다.

Person.prototype.isPrototypeOf(person1);//true
Person.prototype.isPrototypeOf(person2);//true

6、getPrototypeOf（ES5）

대상의 원형을 되돌려줍니다.
일부 판단:

person.__proto__ === Person.prototype;//true
person.__proto__.constructor === Person.prototype.constructor;//true
person1.__proto__ === person2.__proto__;//true
person1.say === person2.say;//true
Object.getPrototypeOf(person1) === Object.getPrototypeOf(person2);//true
Object.getPrototypeOf(person1) === Person.prototype;//true

7、hasOwnProperty

hasOwnProperty(propertyName)를 통해 하나의 속성이 실례에 존재하는지 원형에 존재하는지 검사합니다

console.log(person1.hasOwnProperty("name"));//false;
person1.name = "newName";
console.log(person1.hasOwnProperty("name"));//true

8、in

in 키워드를 통해 어떤 대상이 어떤 속성을 포함하는지 판단할 수 있다. 이 속성이 실례에 속하든 원형에 속하든

console.log("name" in person1);//true;
person1.name = "newName";
console.log("name" in person1);//true

hasOwnProperty()와 in을 결합하여 하나의 속성이 원형인지 실례인지 정확하게 정할 수 있다

8、keys(obj) ES5

키 (object) 방법은 대상의 모든 열거 가능한 속성을 되돌려줍니다.

console.log(Object.keys(person1));//[]
person1.name = "newName";
console.log(Object.keys(person1));//["name"]
console.log(Object.keys(Person.prototype));//[ 'name', 'age', 'say' ]

keys () 는 이 대상의 속성 그룹을 되돌려줍니다. 구조 함수의 속성을 포함하지 않습니다.

상속 부분

1. 원형 체인 계승

함수의 원형 객체(funtion.prototype)가 다른 원형을 가리키는 포인터 (예.__proto__),다른 원형에도 다른 구조 함수를 가리키는 바늘이 포함되어 있으며, 이 층층이 끼워져 원형 체인을 형성한다

function Animal() {
    this.topType = " ";
}
Animal.prototype.getTopType = function(){
    return this.topType;
}
function Person() {
    this.secondType = " ";
}

Person.prototype = new Animal();
Person.prototype.getSecondType = function(){
    return this.secondType;
}
var person = new Person();
console.log(person.topType+"--"+person.secondType);// -- 

위의 예에서, Person.prototype=new Animal () 은 Animal 인스턴스를 Person에게 부여한 것입니다.prototype
앞의 원형 중의 설명을 결합하여 new Animal은 하나의 Animal 실례를 생성한다. 이 실례 대상은 하나의_proto_구조 함수를 가리키는 프로토타입은 이 실례를 Person의 원형에 값을 부여한다. 이는 Person의 원형은 Animal의 모든 실례 속성이나 방법을 가지고 있고 Animal의 원형을 가리키는 바늘도 포함하고 있음을 의미한다.
결점
1. 참조 데이터 유형 문제
JS 대상 1절에서 우리는 인용 데이터 형식을 원형의 속성(창설 대상 1절의 원형 모델 참조)에 값을 부여하려고 시도했는데 그 결과 실례 간에 서로 영향을 미치고 원형이 계승될 때 이 문제가 발생할 수 있다. 다음 예를 살펴보자.

function Person(){
  this.desc = [" "];
}
function Student(){}
Student.prototype = new Person();
var s1 = new Student();
var s2 = new Student();
s1.desc.push(" ");
console.log(s1.desc);//[ ' ', ' ' ]
console.log(s2.desc);//[ ' ', ' ' ]

Person 함수는 하나의desc 속성을 포함하고 Person의 실례는 각각의desc 속성을 포함한다.그러나 이때의 Student는 원형 체인을 통해 Person을 계승했고 Student의prototype은 Person의 실례가 되었다. 그러면 Student는desc 속성을 가지고 Student를 사용하는 것과 같다.prototype.desc=[...] Student에 이러한 원형 속성을 추가한 결과는 명백히 알 수 있습니다.
2.전참문제
앞의 코드를 통해 원형 체인 계승을 사용할 때 부급 구조 함수에 파라미터를 전달할 수 없음을 발견할 수 있습니다

2. 차용 구조 함수식 계승

콜 또는 apply를 사용하여 대여식 계승을 실현합니다
call 또는 apply: 함수가 실행되는 상하문 환경 변경

function Person(name){
  this.name = name;
}
function Student(name){
  Person.call(this,name);
}
var student = new Student("zhar");
console.log(student.name);//zhar

위의 코드에서call을 사용하고 Student의 실례 환경에서 Person 구조 함수를 호출하여 Person의this가 현재 실례 환경으로 가리키는 것을 변경했습니다. 최종적으로 Student의 실례는name 속성을 가지고 있습니다.
이점
구조 함수를 호출할 때'부급'에 매개 변수를 전달할 수 있습니다. 전례와 같이, Person을 호출할 때name 값을 전달합니다.
열세
원형 속성이나 방법을 계승할 수 없습니다

function Person(name){
  this.name = name;
}
Person.prototype.say = function(){
  console.log(this.name);
}
function Student(name){
  Person.call(this,name);
}
var student = new Student("zhar");
console.log(student.name);//zhar
student.say();//   student.say is not a function

3. 그룹 상속

원형 체인식 계승과 차용 구조 함수식 계승을 조합하여 양자의 장점을 결합시킨다.원형 체인을 통해 원형 속성이나 방법에 대한 계승을 실현하고 구조 함수를 빌려 실례 속성에 대한 계승을 실현한다.

function Person(name){
  this.name = name;
}
Person.prototype.say = function(){
  console.log(this.name);
}
function Student(name){
  Person.call(this,name);
}
Student.prototype = new Person();
var student = new Student("zhar");
console.log(student.name);//zhar
student.say();//zhar