요약: Javascript---함수 계승편

원형 규칙

의 모든 인용 유형(수조 대상 함수)은 대상의 특징을 가지고 있어 속성을 자유롭게 확장할 수 있다('null'제외).

모든 인용 유형 (수조 대상 함수) 은proto__[스텔스 원형] 속성, 속성 값은 일반 대상;

모든 함수는prorotype[현식 원형] 속성이 있고 속성 값도 일반적인 대상이다.

모든 참조 유형(배열 객체 함수),proto__속성 값은 구조 함수의'prototype'속성 값을 가리킨다.

대상의 어떤 속성을 얻으려고 시도할 때 그 대상 자체에 이 속성이 없으면 그 대상의proto__속성은 (구조 함수의prototype)에서 찾아 원형 체인을 형성한다.

var obj = {}; obj.a = 100;
var arr = []; arr.a = 100;
function fn(){};  fn.a = 100;

console.log(obj.__proto__,arr.__proto__,fn.__proto__) 
console.log(fn.prototype)
console.log(obj.__proto__ === Object.prototype)//true

----------------------------------------------
// 
// 
function Person(name, age){this.name = name;}
Person.prototype.alertName = function(){
    alert(this.name)
}

// 
var f = new Person('jerry');
f.printName = function(){alert(this.name)}

f.printName();// 
f.alertName();// prototype alertName 
f.toString();// f.__proto__.__proto__ 

console.log(f instanceof Foo )    //true       
console.log(f instanceof Object)  //true     Object  

2. 계승 방식 실현

상위 코드:

//  
function Animal (name) {
  //  
  this.name = name || 'Animal';
  this.data = [1];
  //  
  this.sleep = function(){
    console.log(this.name + ' ！');
  }
}
//  
Animal.prototype.eat = function(food) {
  console.log(this.name + ' ：' + food);
};

1. 원형 체인 계승

코어:  

function Cat(){ 
}
Cat.prototype = new Animal();//  ` `
Cat.prototype.name = 'cat';

//　 
var cat = new Cat();
console.log(cat.name);
console.log(cat.eat('fish'));
console.log(cat.sleep());
console.log(cat instanceof Animal); //true 
console.log(cat instanceof Cat); //true

//　 
var kitty = new Cat();
console.log(kitty.data);//[1];
cat.data.push(2)//   data 
console.log(kitty.data);//[1,2]

특징: 1.매우 순수한 계승 관계로 실례는 자류의 실례이자 부류의 실례이다.부모 클래스에 원형 방법/원형 속성을 추가하여 하위 클래스에 접근할 수 있습니다.간단하다
단점하위 클래스에 새로운 속성과 방법을 추가하려면 new Animal()이라는 문장 다음에 실행해야 하며 구조기에 넣을 수 없습니다.상속 단일 서브클래스 원형은 하나의 부류만을 가리키며 다중 상속을 실현할 수 없다.모든 새 인스턴스는 상위 인스턴스의 속성을 공유합니다.(원형의 속성은 공유된 것으로 한 실례가 원형 속성을 수정하면 다른 실례의 원형 속성도 수정됩니다!)4. 부류에게 총괄할 수 없음: 최대 결함 3, 4

2. 차용 구조 함수 계승

코어: .call() .apply() （ （ ））

function Cat(name){
  Animal.call(this); //  ` this `
  this.name = name || 'Tom';
}

// Test Code
var cat = new Cat();
console.log(cat.name);
console.log(cat.sleep());
console.log(cat instanceof Animal); // false
console.log(cat instanceof Cat); // true

특징: 1.하위 클래스의 실례가 부모 클래스의 인용 속성을 공유하는 문제를 해결합니다.하위 클래스 실례를 만들 때 부모 클래스에 파라미터를 전달할 수 있습니다.다중 계승 가능 (call 다중 부류 대상)
단점실례는 부류의 실례가 아니라 하류의 실례일 뿐이다.부류의 실례 속성과 방법만 계승할 수 있다. /방법3.모든 새로운 실례는 부류 구조 함수의 부본이 있는데 비대하고 성능에 영향을 미친다.

3. 그룹 계승(상용)

핵심: 조합 원형 체인 계승과 구조 함수 계승

function Cat(name){
  Animal.call(this); // 
  this.name = name || 'Tom';
}
Cat.prototype = new Animal(); // 

var cat = new Cat();
console.log(cat.name);  //tom;   
console.log(cat.sleep()); //tom ！;   
console.log(cat.eat(' '));//tom ;  
console.log(cat instanceof Animal); // true
console.log(cat instanceof Cat); // true

특징: 1.부류 원형의 속성을 계승할 수 있고, 전참할 수 있으며, 복용할 수 있다.2. 모든 새로운 실례가 도입한 구조 함수 속성은 사유이다.
단점: 부류 구조 함수(메모리 소모)를 두 번 호출하면 부류의 구조 함수는 원형의 부류 구조 함수를 대체할 수 있다.

4. 기생 조합 계승(상용)

핵심: 기생 방식을 통해 부류의 실례 속성을 잘라내면 두 번의 부류의 구조를 호출할 때 두 번의 실례 방법/속성을 초기화하지 않고 조합 계승의 단점을 피할 수 있다.

function Cat(name){
  Animal.call(this); // 
  this.name = name || 'Tom';
}
//     
(function(){
  //  
  var Super = function(){};
  Super.prototype = Animal.prototype;
  // 
  Cat.prototype = new Super();
})();

var cat = new Cat();
console.log(cat.name);
console.log(cat.sleep());
console.log(cat instanceof Animal); // true
console.log(cat instanceof Cat); //true

특징: 1.부류 원형의 속성을 계승할 수 있고, 전참할 수 있으며, 복용할 수 있다.2. 모든 새로운 실례가 도입한 구조 함수 속성은 사유이다.3. 부류 구조 함수를 두 번 호출하는 것을 피했다

3. Es6 추가

class 클래스 constructor 구조 함수 static 정적 방법 정의하기

// 
class Parent{
    constructor(place = "china"){
      this.from=place;
    }
    // 
    static tell(){ 
      console.log('tell'); //` ，     `super` 。 
    }
}
// 
class Child extends Parent{
    // 
    constructor(name,birth,age){
        this.args = ["hello","world"];
        this.name = name;
        this.age = age;
        
        super("USA"); // 
    }
    
    // （getter） （setter）
    get age(){
        return this.age;
    }
    set age(val){
        this.age = val;
    }
    // 
    goSchool(str){
        console.log(this.name+' '+str);
    }
    
    // *   Generator  
    * [Symbol.iterator]() {
        for (let arg of this.args) {
          yield arg; 
        }
     }
}

보충 call apply 와 bind

call (), apply (),bind () 세 함수는 모두 함수 호출을 완성하고this 지향을 설정합니다.
call () 와 apply () 는 함수를 즉시 호출하고 apply 두 번째 인자는 하나의 그룹을 받아들인다
bind () 는 즉시 호출되지 않고 함수의 복사본을 되돌려줍니다.또한 트리거 호출이 필요합니다. 다른 한편, 복사된 곳에서 전송된 매개 변수를 호출하면 원시 함수에 전달됩니다
(1)call( )

var dist = 'Beijing';

function greet(name, hometown) {
  var word =  `Welcome ${name} from ${hometown} to ${this.dist}!`
  console.log(word);
}

var obj1 = {
  dist: 'Chengdu'
};

greet.call(obj1, "Tom", "Dallas");  // Welcome Tom from Dallas to Chengdu!

greet("Jerry", "Houston"); // Welcome Jerry from Houston to Beijing!

그레이트 때문에.call(obj)는obj1을 첫 번째 인자로 전송했기 때문에greet() 함수가 실행될 때this는obj1을 가리킨다.나머지 매개 변수는greet () 함수에 매개 변수로 전달됩니다.콜 () 을 사용하지 않고 greet () 를 직접 호출할 때this는 window 대상을 가리킨다.
(2)apply()

var dist = 'Beijing';

function greet(name, hometown) {
  var word =  `Welcome ${name} from ${hometown} to ${this.dist}!`
  console.log(word);
}

var obj1 = {
  dist: 'Chengdu'
};

var args = ["Tom", "Dallas"];
greet.apply(obj1, args);  // Welcome Tom from Dallas to Chengdu!

greet("Jerry", "Houston"); // Welcome Jerry from Houston to Beijing!

apply () 함수와call () 함수는 매우 비슷합니다. 첫 번째 파라미터는 목표 함수가 실행될 때의this 지향을 설정하는 데 사용됩니다.유일한 차이점은 apply()의 두 번째 매개 변수가 하나의 그룹을 받아들이고 다른 표현은 같다는 것이다.
(3)bind( )

var dist = 'Beijing';

function greet(name, hometown) {
    var word = `Welcome ${name} from ${hometown} to ${this.dist}!`;
    console.log(word);
}

var obj1 = {
    dist: 'Chengdu',
};

var obj2 = {
    dist: 'Chongqing',
};

var greet1 = greet.bind(obj1, 'Tom', 'Dallas');
var greet2 = greet.bind(obj2, 'Spike', 'San Antonio');

greet('Jerry', 'Houston');

greet1();
setTimeout(function() {
    greet2();
}, 1000);

 ：
  Welcome Jerry from Houston to Beijing!
  Welcome Tom from Dallas to Chengdu!
  Welcome Spike from San Antonio to Chongqing!

결론:bind() 함수 역시this가bind()를 가리키는 첫 번째 인자를 완성했습니다.그러나 목표 함수를 즉시 실행하지 않고 함수의 복사를 되돌려줍니다. 나머지 bind () 에 전달된 매개 변수는 순서대로 되돌아오는 함수에 전달됩니다.우리는 이 함수의 반환 값을 비동기적으로 호출할 수 있다.그러나 주의해야 할 것은bind () 방법으로 되돌아오는 함수 복사는 new 작업을 사용할 때 첫 번째 인자는 무시된다는 것이다.
되돌아오는 함수 복사를 호출할 때 새로운 인자가 들어왔다면 무슨 일이 일어날까요? 예를 하나 더 써 보세요.

var obj1 = {
    dist: 'Chengdu',
};

function greet(name, hometown) {
    console.log(Array.prototype.slice.call(arguments));
    var word = `Welcome ${name} from ${hometown} to ${this.dist}!`;
    console.log(word);
}

var greet1 = greet.bind(obj1, 'Tom', 'Dallas');

greet1('Jerry', 'Houston');


 ：
[ "Tom", "Dallas", "Jerry", "Houston" ]
Welcome Tom from Dallas to Chengdu!

결론: 두 곳에서 전송된 매개 변수는 모두 목표 함수에 전송되고 함수 복사 호출 시 전송된 매개 변수는bind() 함수 호출 시 전송된 매개 변수 뒤에 추가됩니다.물론 원함수는 두 개의 매개 변수만 사용하기 때문에 결과에 표시됩니다: Welcome Tom from Dallas to Chengdu!
참고 자료: https://www.cnblogs.com/humin... https://www.cnblogs.com/ranyo... https://www.jianshu.com/p/a00... https://juejin.im/post/5c433e...