JavaScript变量提升的综合性考法（很绕）

it2023-10-06 71

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <script> function Foo() { getName = function () { alert(1) }; return this; } Foo.getName = function () { alert(2) }; Foo.prototype.getName = function () { alert(3) }; var getName = function () { alert(4) }; function getName() { alert(5) }; // 写出下列结果 Foo.getName(); getName(); Foo().getName(); getName(); new Foo.getName(); new Foo().getName(); new new Foo().getName(); // 变量提升 /* function Foo() { getName = function () { alert(1) }; return this; } // var getName;(变量名与函数名重合保留函数名) function getName() { alert(5) }; Foo.getName = function () { alert(2) }; Foo.prototype.getName = function () { alert(3) }; // 重写getName方法 getName = function () { alert(4) }; */ /* 结果 Foo.getName(); //调用Foo.getName()方法输出2 getName(); //调用getName方法输出4 Foo().getName(); //先调用Foo()方法，在全局查找getName方法，重写输出4的方法改为输出1，，， =>window.getName 结果输出1 getName(); //调用重写后的方法输出1 new Foo.getName(); // => new (Foo.getName()) =>new(function () {alert(2)})，输出2 new Foo().getName(); // =>(new Foo()).getName() => foo.__proto__.getName() =>Foo.prototype.getName() , 输出3 new new Foo().getName(); // =>new ((new Foo()).getName()) =>new (foo.getName()) =>new (foo.__proto__.getName())=>new(Foo.prototype.getName()) =>new ( function () {alert(3)}) 输出3 */ </script> </body> </html>

最新回复(0)