上次分享了一道题,大家反响不错,很开心自己写的东西有人愿意花时间去看,也给了自己莫大的鼓舞,其实做题虽然不比真正的编程,但是也能够让你发现一些你之前没有注意到的语言层面的问题。所以,这次再分享一道稍微有难度的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();
new new Foo().getName();

请问上述代码在浏览器环境下,输出结果是多少?    揭晓一下最终答案:

2 4 1 1 2 3 3

前四道难度不是很大,主要是后三道,基本是全军覆没,感叹实在是太绕了了。后面慢慢分析了一下,逐个讲一下吧。   首先必须注意一个问题

function Foo() {
getName = function () {
console.log('1');
};
return this;
}

在函数内部声明的getName变量,前面是不带有varlet,const的,所以其实根据LHS(这个的介绍可以去的我博客看一下关于LHS和RHS的总结),声明的getName是在全局范围内(也是就window)。   其次需要明确你是否知道下面代码在浏览器中的执行结果:

var getName = function () {
console.log('4');
};
function getName() {
console.log(5);
}
getName();

上述代码的执行结果是:4。原因是这样的,var声明的变量和函数声明function都会被提升,但是函数声明的提升的级别是比 var要高的,所以上面的代码的实际执行结果是:

function getName() {
console.log(5);
}
var getName = function () {
console.log('4');
};
getName();

后一个函数表达式getName覆盖了前面的函数声明getName,实际执行的是函数表达式(也就是是为什么JavaScript永远不会有函数重载这么一说了),所以输出的是4。   首先我给下面的代码添加一下必要的注释:

//函数声明
function Foo() {
//全局变量
getName = function () {
console.log('1');
};
return this;
}
//为函数添加属性getName,其类型是Function,所以这里也可以看出来,Function也是一种Object
Foo.getName = function () {
console.log('2');
};
//为Foo的原型添加方法getName
Foo.prototype.getName = function () {
console.log('3');
};
var getName = function () {
console.log('4');
};
function getName() {
console.log(5);
}

下面执行第一条语句:

Foo.getName();

函数Foo本身并没有执行,执行的是函数的属性getName,当然输出的是:2.   接下来执行:

getName();

这是在全局范围内执行了getName(),有两条对应的getName的声明,根据前面我们所提到的提升的级别来看实际执行是函数表达式:

var getName = function () {
console.log('4');
};

所以输出的是4。   接下来执行

Foo().getName();

首先看一下JavaScript的操作符优先级,从高到低排序   从上面可以看出来().优先级相同,所以Foo().getName()从左至右执行。首先运行Foo(),全局的getName被覆盖成输出console.log('1'),并且返回的this此时代表的是window。随后相当于执行的window.getName(),那么输出的实际就是1(被覆盖)。   下面到了

getName();

这个不用说了,执行的还是:1(和上面一毛一样)。   下面到了三个最难的部分:

new Foo.getName();

对于这条语句的执行,有两种可能:

(new Foo).getName()

new (Foo.getName)()

但是我们根据操作符优先级表可以得知,其实上.操作符要比new优先级要高,所以实际执行的是第二种,所以是对

Foo.getName = function () {
console.log('2');
};

函数执行了new操作,当然输出的是2。 下面到了执行

new Foo().getName();

这个语句的可能性也有两种:

(new Foo()).getName();

或者

new (Foo().getName)();

那么应该是那种的呢?原来我以为会是第二种的执行方式,后面通过浏览器调试发现真实的执行的方式是第一种。我看到题目的作者是这么解释的:

首先看运算符优先级括号高于new。实际执行为(new Foo()).getName()。遂先执行Foo函数。

我觉得上面的解释是有问题的,对比上面两种执行方式,第一种是先执行new,然后执行的是.操作符,然后执行的是()。第二种是先执行了(),再执行的是.,最后执行new操作符。如果真的按照引用所说的用优先级的方式判别,其实恰恰应该执行的是第二种而不是第一种。   后来总算找到原因了,原来之前那个出现的比较多的JavaScript优先级的表并不完整,万能的MDN给出了最权威的JavaScript优先级表运算符优先级   我列举出最重要的部分(由高到低):      所以带参数的new操作符是优先级最高的,这下就没有问题了,执行顺序确实应该是第一种。   那么按照(new Foo()).getName();来执行,情况就就很简单了,(new Foo())返回了新生成的对象,该对象没有getName()方法,所以在prototype中找到了getName()方法。所以输出的是3。   胜利就在眼前,我们看一下最后一问。

new new Foo().getName();

和上一步一样的方法,我们按照优先级表给分析一下这个语句到底是怎么执行的。   首先带参数的new操作符优先级最高,第一步划分为:

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

第二步划分为:

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

所以执行(new Foo()).getName这个函数是对应的Foo.prototype.getName,所以执行new (Foo.prototype.getName)()肯定输出的是3。   哈哈哈,这么难得题终于解决了,开心~总结一下吧,首先JavaScript知识最好去MDN去查,万一别的地方写错了真的是害人不浅。其次,如果在写代码的时候还是少利用操作符优先级这种东西,一旦不明确的地方就立刻用(),代码的可阅读性真的是很重要!很重要!很重要!毕竟代码还是给人看~

一道颇有难度的JavaScript题的更多相关文章

  1. 前端面试-----JavaScript题

    用面试题,复习一下,js基础. 1.综合题 function Foo() { getName = function () { alert (1); }; return this; } Foo.getN ...

  2. Javascript题库

    一.填空题 JavaScript有两种引用数据类型 :__数组___.__对象__. Javascript通过__setTimeout___延迟指定时间后,去执行某程序. Javascript里Str ...

  3. ZOJ2006 一道很尴尬的string操作题

    ZOJ2006(最小表示法) 题目大意:输出第一个字符串的最小字典序字串的下标! 然后我居然想试一试string的erase的能力,暴力一下,然后20msAC了,尴尬的数据.......... #in ...

  4. LeetCode 第 287 号问题:寻找重复数,一道非常简单的数组遍历题,加上四个条件后感觉无从下手

    今天分享的题目来源于 LeetCode 第 287 号问题:寻找重复数. 题目描述 给定一个包含 n + 1 个整数的数组 nums,其数字都在 1 到 n 之间(包括 1 和 n),可知至少存在一个 ...

  5. 算法是什么我记不住,But i do it my way. 解一道滴滴出行秋招编程题。

    只因在今日头条刷到一篇文章,我就这样伤害我自己,手贱. 刷头条看到一篇文章写的滴滴出行2017秋招编程题,后来发现原文在这里http://www.cnblogs.com/SHERO-Vae/p/588 ...

  6. 通过一道笔试题浅谈javascript中的promise对象

    因为前几天做了一个promise对象捕获错误的面试题目,所以这几天又重温了一下promise对象.现在借这道题来分享下一些很基础的知识点. 下面是一个面试题目,三个promise对象捕获错误的例子,返 ...

  7. 14 道 JavaScript 题?

    http://perfectionkills.com/javascript-quiz/ https://www.zhihu.com/question/34079683 著作权归作者所有.商业转载请联系 ...

  8. 关于定义顺序和内存分配的关系--记一道不严谨的C语言题

    include<stdio.h> #include<iostream> int main() { char a[] = "123"; char b[] = ...

  9. 一道int与二进制加减题

    int dis_data = 32769; if( dis_data > 0x7fff)  dis_data -= 0xffff; printf("%d\n",dis_dat ...

随机推荐

  1. LeetCode(86):分隔链表

    Medium! 题目描述: 给定一个链表和一个特定值 x,对链表进行分隔,使得所有小于 x 的节点都在大于或等于 x 的节点之前. 你应当保留两个分区中每个节点的初始相对位置. 示例: 输入: hea ...

  2. 【linux】ssh无法root免密解决

    在设置了root的私钥和公钥,添加authorized_keys,修改文件权限为600后,用root账号 ssh localhost结果失败了,还是要密码. 解决: vim /etc/ssh/sshd ...

  3. 使用react 在页面上引用静态图片,图片不显示

    const url='../assets/logo.png'; <img src={url} alt=''/> 1.使用require <img src={require('../a ...

  4. 蓝桥杯  历届试题 幸运数  dfs

    历届试题 幸运数 时间限制:1.0s   内存限制:256.0MB 问题描述 幸运数是波兰数学家乌拉姆命名的.它采用与生成素数类似的"筛法"生成 . 首先从1开始写出自然数1,2, ...

  5. OpenCV-Python入门教程5-阈值分割

    一.固定阈值分割 import cv2 import matplotlib.pyplot as plt # 灰度图读入 img = cv2.imread('gradient.jpg', 0) # 阈值 ...

  6. Git基础(二) 文件的生命周期

    使用Git时,文件的生命周期如下:

  7. java.lang.RuntimeException: Unable to instantiate org.apache.hadoop.hive.metastore.HiveMetaStoreClient

    1.启动hive的时候出现这个问题,报错如下所示: [hadoop@slaver1 conf]$ hive Logging initialized -cdh5.-cdh5.3.6.jar!/hive- ...

  8. [转] js中的钩子机制(hook)

    什么是钩子机制?使用钩子机制有什么好处? 钩子机制也叫hook机制,或者你可以把它理解成一种匹配机制,就是我们在代码中设置一些钩子,然后程序执行时自动去匹配这些钩子:这样做的好处就是提高了程序的执行效 ...

  9. Asp.net MVC - 使用PRG模式(附源码)

    阅读目录: 一. 传统的Asp.net页面问题 二.Asp.net MVC中也存在同样的问题 三.使用PRG模式 四.PRG模式在MVC上的实现 一. 传统的Asp.net页面问题 一个传统的Asp. ...

  10. 一起学Hadoop——MapReduce原理

        一致性Hash算法. Hash算法是为了保证数据均匀的分布,例如有3个桶,分别是0号桶,1号桶和2号桶:现在有12个球,怎么样才能让12个球平均分布到3个桶中呢?使用Hash算法的做法是,将1 ...