JavaScript函数调用的经典例题-白红宇

JavaScript函数调用的经典例题

阅读量：6157 次

发布时间：2019-06-21

本文共 3819 字，大约阅读时间需要 12 分钟。

JavaScript函数调用的经典例题

很多初学JavaScript的人对函数的调用理解有些模糊的，话不多说，直接上题:

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();

此题涉及的知识点比较广泛，包括变量的作用域、变量提升、this指针指向、运算符优先级、原型、继承、等等。

解题之前，我们先分析一下代码：

//① 函数声明，声明了一个Foo函数，里面有个全局变量getName指向一个匿名函数    function Foo() {        getName = function () {         console.log(1);         };        return this;    }    //② Foo函数的创建了一个静态属性getName指向一个匿名函数    Foo.getName = function () {        console.log(2);    };        //③ Foo函数的原型上创建了一个getName方法    Foo.prototype.getName = function () {        console.log(3);    };        //④ 函数表达式，定义一个变量getName指向一个匿名函数     var getName = function () {         console.log(4);    };        //⑤ 函数声明，声明了一个叫getName的有名函数    function getName() {         console.log(5);    }

第一问

Foo.getName(); //2

访问Foo函数上存储的静态属性getName，所以结果为2。

第二问

getName(); //4

直接调用getName函数，相当于调用window.getName，那么与函数①、②、③无关。在分析题目前我们首先知道什么变量提升以及JS引擎工作的执行顺序。

变量提升

所有的变量声明都会被提升到它所在作用域的最开始的部分

例如:

console.log(a); //undifined    var a = 10;

js引擎执行代码的顺序为：

var a;     console.log(a);    a = 10;

例如：

var a = 10;    function test(){        conlose.log(a); //undifined        var a = 20;    }    test();

js引擎执行代码的顺序为：

var a;    a = 10;    function test(){        var a;        conlose.log(a); //undifined        a = 20;    }

JS引擎工作的执行顺序：

解析器会预先读取函数声明和变量声明，并使其在执行任何代码前可以访问；

再由上而下逐行执行，函数表达式必须等到解析器执行到它所在的代码行才会真正被解释执行

我们再看原题，函数④的变量会被提升，再结合上述JS引擎工作的执行顺序，因此代码的执行顺序是：

function Foo(){        getName = function(){        console.log(1);         };        return this;    }    var getName;    function getName(){        console.log(5);    }    Foo.getName = function(){         console.log(2);    };    Foo.prototype.getName = functio() {         console.log(3);    };    getName = function(){         console.log(4); //最终的赋值覆盖function getName声明    };

所以结果为4。

第三问

Foo().getName(); //1

Foo().getName(); 先执行了Foo函数，然后调用Foo函数的返回值对象的getName属性函数。

先看前面的Foo()
显然调用了函数①，Foo函数第一句getName = function(){alert(1);};是一句赋值语句，因为它没有var声明，所以先向当前Foo函数作用域内寻找getName变量，没有。再向当前函数作用域上层，即外层作用域内寻找是否含有getName变量，找到函数④var getName=function(){alert(1)};，将此变量getName赋值为function(){alert(1)}。

我们将相关的代码单独拿出：
```
function Foo() {        getName = function () { //全局变量         console.log(1);         };    }    var getName = function () {         console.log(4);    };    Foo();    console.log(getName);  //function(){console.log(1); }
```
实质上就是将外层作用域内的getName函数修改了。

再看Foo().getName()
Foo函数的返回值结果是this那么Foo().getName()=>this.getName()。
this的指向在函数定义的时候是确定不了的，只有函数被调用执行时才能确定this到底指向谁，谁调用指向谁。而此处是直接调用，this指向window对象。
this.getName()=> window.getName(),而window中的getName已经被修改为console.log(1)，所以最终会输出1。

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

关于变量作用域，如果将代码变为：

function Foo() {        var getName = function () { // 局部变量，只能在函数内部访问        console.log(1);         };     }     var getName = function () {          console.log(4);     };     Foo();     console.log(getName);//function(){console.log(4);}

那么此题结果则为4了。