Förderung der Variablendeklaration, Prototyp, dieser Zeiger

Die Frage lautet wie folgt:

function Foo() {
    getName = function () { console.log(1); };
    return this;
}
Foo.getName = function () { console.log(2);};
Foo.prototype.getName = function () { console.log(3);};
var getName = function () { console.log(4);};
function getName() { console.log(5);}

//请写出以下输出结果：
Foo.getName();
getName();
Foo().getName();
getName();
new Foo.getName();
new Foo().getName();
new new Foo().getName();

Die Antwort lautet:

function Foo() {
    getName = function () { console.log(1); };
    return this;
}
Foo.getName = function () { console.log(2);};
Foo.prototype.getName = function () { console.log(3);};
var getName = function () { console.log(4);};
function getName() { console.log(5);}

//答案：
Foo.getName();//2
getName();//4
Foo().getName();//1
getName();//1
new Foo.getName();//2
new Foo().getName();//3
new new Foo().getName();//3

Diese Frage beinhaltet viele Wissenspunkte, einschließlich der Förderung der Variablendeklaration, dieses Zeigerzeigens, der Operatorpriorität, Prototyp, Vererbung, globale Variablenverschmutzung, Objekteigenschaften und Priorität der Prototypeigenschaft usw.

Diese Frage enthält 7 Fragen, bitte erläutern Sie diese unten.

Erste Frage

Schauen wir uns an, was in der ersten Hälfte dieser Frage gemacht wurde. Zuerst haben wir eine Funktion namens Foo definiert und dann eine statische Eigenschaft namens getName für Foo erstellt, um a zu speichern Anonyme Funktion und erstellen Sie dann eine neue anonyme Funktion namens getName für das Prototypobjekt von Foo. Anschließend wird über den Funktionsvariablenausdruck eine getName-Funktion erstellt und schließlich eine getName-Funktion deklariert.

Die erste Frage, Foo.getName, besteht natürlich darin, auf die in der Foo-Funktion gespeicherten statischen Eigenschaften zuzugreifen, was natürlich 2 ist. Es gibt nichts zu sagen.

Zweite Frage

Zweite Frage: Rufen Sie die getName-Funktion direkt auf. Da es direkt aufgerufen wird, greift es auf die Funktion namens getName im aktuellen Gültigkeitsbereich oben zu, hat also nichts mit 1 2 3 zu tun. Hier gibt es zwei Fallstricke: Die eine ist die Förderung der Variablendeklaration und die andere der Funktionsausdruck.

Variablendeklarationsförderung

Das heißt, alle deklarierten Variablen oder deklarierten Funktionen werden an die Spitze der aktuellen Funktion befördert.

Zum Beispiel der folgende Code:

console.log(‘x’ in window);//true
var x;

x = 0;

Wenn der Code ausgeführt wird, hebt die js-Engine die Deklarationsanweisung an den Anfang des Codes und wird zu:

var x;
console.log(‘x’ in window);//true
x = 0;

Funktion Der Ausdruck

var getName und function getName sind beide Deklarationsanweisungen. Der Unterschied besteht darin, dass var getName ein Funktionsausdruck ist, während function getName eine Funktionsdeklaration ist.

Das größte Problem bei Funktionsausdrücken besteht darin, dass js diesen Code in zwei Codezeilen aufteilt und diese separat ausführt.

Zum Beispiel der folgende Code:

console.log(x);//输出：function x(){}
var x=1;
function x(){}

Der tatsächlich ausgeführte Code lautet: Zuerst wird var x=1 in zwei Zeilen aufgeteilt: var x; und x = 1; und dann var x; und Funktion x(){} werden nach oben gehoben und werden zu:

var x;
function x(){}
console.log(x);
x=1;

Am Ende überdeckt also das von der Funktion deklarierte x das von der Variable deklarierte x, und die Protokollausgabe lautet die x-Funktion.

In ähnlicher Weise lautet die endgültige Ausführung des Codes in der ursprünglichen Frage:

function Foo() {
    getName = function () { console.log(1); };
    return this;
}
var getName;//只提升变量声明
function getName() { console.log(5);}//提升函数声明，覆盖var的声明

Foo.getName = function () { console.log(2);};
Foo.prototype.getName = function () { console.log(3);};
getName = function () { console.log(4);};//最终的赋值再次覆盖function getName声明

getName();//最终输出4

Die dritte Frage

Die dritte Frage Foo().getName(); Die Foo-Funktion wird ausgeführt und dann wird die getName-Attributfunktion des Rückgabewertobjekts der Foo-Funktion aufgerufen.

Der erste Satz der Foo-Funktion getName = function () { console.log(1); ist eine Funktionszuweisungsanweisung, also suchen Sie zuerst nach getName Variable im Bereich der aktuellen Foo-Funktion. Schauen Sie dann auf die obere Ebene des aktuellen Funktionsbereichs, also den äußeren Bereich, um zu sehen, ob er die getName-Variable enthält. Dies ist die Funktion „alert(4)“ in der zweiten Frage Variable zu function(){alert(1) }.

Hier wird tatsächlich die getName-Funktion im äußeren Bereich geändert.

Hinweis: Wenn es hier immer noch nicht gefunden wird, wird bis zum Fensterobjekt gesucht. Wenn im Fensterobjekt kein getName-Attribut vorhanden ist, erstellen Sie eine getName-Variable im Fensterobjekt.

之后Foo函数的返回值是this，而JS的this问题博客园中已经有非常多的文章介绍，这里不再多说。

简单的讲， this的指向是由所在函数的调用方式决定的 。而此处的直接调用方式，this指向window对象。

遂Foo函数返回的是window对象，相当于执行 window.getName() ，而window中的getName已经被修改为alert(1)，所以最终会输出1

此处考察了两个知识点，一个是变量作用域问题，一个是this指向问题。

第四问

直接调用getName函数，相当于 window.getName() ，因为这个变量已经被Foo函数执行时修改了，遂结果与第三问相同，为1

第五问

第五问 new Foo.getName(); ,此处考察的是js的运算符优先级问题。

js运算符优先级:

参考链接： https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Operator_Precedence

通过查上表可以得知点.的优先级高于new操作，遂相当于是:

new (Foo.getName)();

所以实际上将getName函数作为了构造函数来执行，遂弹出2。

第六问

第六问 new Foo().getName() ，首先看运算符优先级()高于new，实际执行为

(new Foo()).getName()

遂先执行Foo函数，而Foo此时作为构造函数却有返回值，所以这里需要说明下js中的构造函数返回值问题。

构造函数的返回值

在传统语言中，构造函数不应该有返回值，实际执行的返回值就是此构造函数的实例化对象。

而在js中构造函数可以有返回值也可以没有。

1、没有返回值则按照其他语言一样返回实例化对象。

function F(){}
new F()
//>F {}

2、若有返回值则检查其返回值是否为 引用类型 。如果是非引用类型，如基本类型（string,number,boolean,null,undefined）则与无返回值相同，实际返回其实例化对象。

function F(){return 1;}
new F()
//>F {}

原题中，返回的是this，而this在构造函数中本来就代表当前实例化对象，遂最终Foo函数返回实例化对象。

之后调用实例化对象的getName函数，因为在Foo构造函数中没有为实例化对象添加任何属性，遂到当前对象的原型对象（prototype）中寻找getName，找到了。

遂最终输出3。

第七问

第七问, new new Foo().getName(); 同样是运算符优先级问题。

最终实际执行为：

new ((new Foo()).getName)();

先初始化Foo的实例化对象，然后将其原型上的getName函数作为构造函数再次new。

遂最终结果为3