eredità JavaScript con .Call (questo)

Question

codice ottenuto da MDN:

function Employee() { 
    this.name = ""; 
    this.dept = "general"; 
} 

function Manager() { 
    Employee.call(this); 
    this.reports = []; 
} 

Manager.prototype = Object.create(Employee.prototype); 

function WorkerBee() { 
    Employee.call(this); 
    this.projects = []; 
} 

WorkerBee.prototype = Object.create(Employee.prototype); 

var x = new WorkerBee(); 

console.log(x); 

uscita: WorkerBee {name: "", dept: "general", projects: Array[0]}

Che effetto ha Employee.call(this); ha? So per aver eseguito il codice che è necessario che l'ereditarietà abbia successo. La documentazione per .call() semplicemente affermano,

metodo richiama una funzione con un dato questo valore ed argomenti addotti individualmente.

OK quindi chiama il costruttore Employee() ma non c'è new dell'operatore utilizzato e non return che sarebbe tornato l'oggetto e le sue proprietà. In che modo Employee.call(this) l'oggetto figlio eredita le proprietà padre?

Se questa riga viene omessa, solo la matrice projects è presente come proprietà.

Answer 1

Ciò che call fa è semplicemente invocare la funzione con il contesto dato this. Nel tuo esempio significa che la funzione Employee viene chiamata con this all'interno di essa istanza di WorkerBee. Quindi, ciò che accade in questo caso è che quando viene eseguito Employee crea e imposta proprietà proprie sull'oggetto this che al momento è WorkerBee.

Verifica a quanto i registri console quando si esegue il codice:

function Employee() { 
    console.log(this instanceof WorkerBee); 
    this.name = ""; 
    this.dept = "general"; 
} 

... e vedrete che è davvero this punti per l'istanza dell'oggetto di WorkerBee.

Questo modello viene utilizzato per fare in modo che un costruttore crei le proprie proprietà sull'oggetto host esterno (contesto). Si chiama anche "costruttore in prestito".

Answer 2

Employee è solo una funzione, come qualsiasi altra funzione. Se utilizzato con l'operatore new, agisce su un oggetto appena assegnato del "tipo" Employee, ma non è l'unico modo per richiamarlo.

Nello scenario a cui ti riferisci, riempie semplicemente il name & dept proprietà di this.

Answer 3

Employee.call(this); esegue la funzione Employee con this all'interno della funzione associata al parametro. Un po 'confusamente, il parametro è this. Quando viene eseguito Employee.call(this);, this è un riferimento all'oggetto WorkerBee che viene creato con new.

Con Employee.call(this);, la funzione Employee aggiunge proprietà aggiuntive all'oggetto WorkerBee.