题目1

if (!("a" in window)) {
var a = 1;
}
alert(a); // undefined, ~~~所有全局变量都是window的属性,声明语句会被提升至作用域顶部

代码含义:如果window不包含属性a,就声明一个变量a,然后赋值为1。

你可能认为alert出来的结果是1,然后实际结果是“undefined”。要了解为什么,需要知道JavaScript里的3个概念。

首先,所有的全局变量都是window的属性,语句 var a = 1;等价于window.a = 1; 你可以用如下方式来检测全局变量是否声明:

"变量名称" in window

第二,所有的变量声明都在范围作用域的顶部,看一下相似的例子:

alert("a" in window);
var a;

此时,尽管声明是在alert之后,alert弹出的依然是true,这是因为JavaScript引擎首先会扫墓所有的变量声明,然后将这些变量声明移动到顶部,最终的代码效果是这样的:

var a;
alert("a" in window);

这样看起来就很容易解释为什么alert结果是true了。

第三,你需要理解该题目的意思是,变量声明被提前了,但变量赋值没有,因为这行代码包括了变量声明和变量赋值。

你可以将语句拆分为如下代码:

var a;    //声明
a = 1; //初始化赋值

当变量声明和赋值在一起用的时候,JavaScript引擎会自动将它分为两部以便将变量声明提前,不将赋值的步骤提前是因为他有可能影响代码执行出不可预期的结果。

所以,知道了这些概念以后,重新回头看一下题目的代码,其实就等价于:

var a;
if (!("a" in window)) {
a = 1;
}
alert(a);

这样,题目的意思就非常清楚了:首先声明a,然后判断a是否在存在,如果不存在就赋值为1,很明显a永远在window里存在,这个赋值语句永远不会执行,所以结果是undefined。

提前这个词语显得有点迷惑了,你可以理解为:预编译。

题目2

var a = 1,
b = function a(x) { // ~~~ 函数表达式
x && a(--x);
};
alert(a); //~~~ 声明语句提升 函数名在函数体内总是可见的

这个题目看起来比实际复杂,alert的结果是1;这里依然有3个重要的概念需要我们知道。

首先,在题目1里我们知道了变量声明在进入执行上下文就完成了;第二个概念就是函数声明也是提前的,所有的函数声明都在执行代码之前都已经完成了声明,和变

量声明一样。澄清一下,函数声明是如下这样的代码:

function functionName(arg1, arg2){
//函数体
}

如下不是函数,而是函数表达式,相当于变量赋值:

var functionName = function(arg1, arg2){ //~~~function前面有=号,function被认为是函数对象而并非函数声明,然后赋值给变量
//函数体
};

澄清一下,函数表达式没有提前,就相当于平时的变量赋值。

第三需要知道的是,函数声明会覆盖变量声明,但不会覆盖变量赋值,为了解释这个,我们来看一个例子:

function value(){
return 1;
}
var value;
alert(typeof value); //"function"

尽管变量声明在下面定义,但是变量value依然是function,也就是说这种情况下,函数声明的优先级高于变量声明的优先级,但如果该变量value赋值了,那结果就完全不一样了: ~~~函数是一等对象

function value(){
return 1;
}
var value = 1;
alert(typeof value); //"number"

该value赋值以后,变量赋值初始化就覆盖了函数声明。

重新回到题目,这个函数其实是一个有名函数表达式,函数表达式不像函数声明一样可以覆盖变量声明,但你可以注意到,变量b是包含了该函数表达式,而该函数表达式的名字是a;不同的浏览器对a这个名词处理有点不一样,在IE里,会将a认为函数声明,所以它被变量初始化覆盖了,就是说如果调用a(–x)的话就会出错,而其它浏览器在允许在函数内部调用a(–x),因为这时候a在函数外面依然是数字。基本上,IE里调用b(2)的时候会出错,但其它浏览器则返回undefined。

理解上述内容之后,该题目换成一个更准确和更容易理解的代码应该像这样:

var a = 1,
b = function(x) {
x && b(--x);
};
alert(a);

这样的话,就很清晰地知道为什么alert的总是1了。

题目3

function a() {
return 1 ;
}
var a;
alert(a);

这个题目比较简单:即函数声明和变量声明的关系和影响,遇到同名的函数声明,不会重新定义

题目4

function b(x, y, a) {
arguments[2] = 10;
alert(a);
}
b(1, 2, 3);

关于这个题目,ECMAsCRIPT 262-3的规范有解释的。

活动对象是在进入函数上下文时刻被创建的,它通过函数的arguments属性初始化。arguments属性的值是Arguments对象.

关于 Arguments对象的具体定义,看这里:ECMAScript arguments 对象

题目5

function a() {
alert(this);
}
a.call(null);

这个题目可以说是最简单的,也是最诡异的!关于这个题目,我们先来了解2个概念。

这个问题主要考察 Javascript 的 this 关键字,具体看这里:

关于Javascript语言中this关键字的用法

关于 a.call(null);  根据ECMAScript262规范规定:如果第一个参数传入的对象调用者是null或者undefined的话,call方法将把全局对象(也就是window)作为this的值。所以,不管你什么时候传入null,其this都是全局对象window,所以该题目可以理解成如下代码:

function a() {
alert(this);
}
a.call(window);

所以弹出的结果是[object Window]就很容易理解了。

—————

总结:

这5个题目虽然貌似有点偏,但实际上考察的依然是基本概念,只有熟知了这些基本概念才能写出高质量代码。

转:你真的懂得JS吗?的更多相关文章

  1. UCloud EIP 你真的懂得如何使用么? - SegmentFault

    UCloud EIP 你真的懂得如何使用么? - SegmentFault UCloud EIP 你真的懂得如何使用么?

  2. 你真的了解js伪数组吗?深入js伪数组

    关于js伪数组 具有length属性: 按索引方式存储数据: 不具有数组的push().pop()等方法: 你可能知道怎么把伪数组转换为数组,但是你知道这里边的原理吗? 假如页面有一组li元素 < ...

  3. 真的了解js生成随机数吗

    由js生成一切随机数的基础都是Math.random()这个方法,这个方法比较特别,生成的随机数落在的区间是[0,1),进行一次操作的话,js只能生成一个类似于[n,m)这样,左闭右开的区间.所以当有 ...

  4. 你真的理解js的赋值语句么

    之前谢亮兄和我一起讨论的一个问题: var a = {}; a.x = a = 3; a 的值是什么. 其实当执行赋值语句的时候,js 的 = 左侧不是原始变量地址,而是一个新值.怎么理解这句话呢? ...

  5. 8个问题看你是否真的懂 JS

    文章转载: https://juejin.im/post/5d2d146bf265da1b9163c5c9#heading-20 原文地址: https://dev.to/aman_singh/so- ...

  6. 你真的了解JS里的"new"吗?

    我们常常喜欢用new关键字去创建一些对象如new Vue(),但是这个关键字的背后究竟做了什么其实没太多人去关注. 想象我们是苹果公司,要生产30部iPod,规定: 每台iPod都会有自己的ID 每台 ...

  7. 真的了解JS么?

    1.setTimeout setTimeout(function(){ }),1000) setTimeout(function(num){ alert(num)    //弹123 },1000,1 ...

  8. 【灵魂拷问】你真的懂得Mysql的管理和使用吗?

    作者 | Jeskson 来源 | 达达前端小酒馆 MySQL管理,数据库管理和数据表管理,用户管理. 初始化数据库,创建数据库,查看数据库,删除数据库. 创建数据表,查看数据表,修改数据表,删除数据 ...

  9. JavaScript的基础语法,你真的了解吗?

    这篇文章是在我们熟悉了JS的基础语法后,很少有人去关注的一些细节部分.如果掌握了某些细节也许会对代码的改善有着非凡的作用.也许会使我们的代码更严谨,更高效. 1.if语句的条件 if条件中,括号里是布 ...

随机推荐

  1. josscrowcroft / Simple-JavaScript-DOM-Inspector

    josscrowcroft / Simple-JavaScript-DOM-Inspector josscrowcroft / Simple-JavaScript-DOM-Inspector

  2. addEventlistener监听的事件完成一次后自动取消与jquery的one方法比较;animate动画制作,arguments.callee的用法

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. MyEclipse性能调优初体验

    MyEclipse性能调优初体验 简介一下工作环境,MyEclipse2014,你懂的 项目中有一个基于web的工作流引擎,仅仅要执行起来就CPU差点儿耗尽(尽管看似27%,事实上已经把俺4核的CPU ...

  4. Set 与 Multiset

    Set 与 Multiset 会根据待定的排序准则,自动将元素排序,两者不同之处在于前者不允许元素重复,后者允许,下面介绍一下set中的函数: 一.set 中的 begin.end.rbegin.re ...

  5. BZOJ 4305: 数列的GCD( 数论 )

    对于d, 记{ai}中是d的倍数的数的个数为c, 那么有: 直接计算即可,复杂度O(NlogN+MlogM) --------------------------------------------- ...

  6. USACO Section 5.3 Milk Measuring (IDDFS+dp)

    迭代加深搜索,从小到大枚举桶数的上限maxd:对每个maxd,枚举每个组合,判断是否能够倒出q:直到得到answer.判断的部分就用dp(完全背包). ------------------------ ...

  7. Apache与Nginx网络模型

    Nginx的高并发得益于其采用了epoll模型,与传统的服务器程序架构不同,epoll是linux内核2.6以后才出现的.下面通过比较Apache和Nginx工作原理来比较. 传统Apache都是多进 ...

  8. [置顶] How to create Oracle 11g R2 database manually in ASM?

    Step 1: Specify an Instance Identifier (SID) export ORACLE_SID=maomi Step 2: Ensure That the Require ...

  9. Nmon的安装及使用

    1.安装软件 1) 用root用户登录系统,建立目录:#mkdir  /nmon 2) 通过FTP将下载的nmon工具上传至服务器 192.168.40.212目录/nmon下. 3) 修改tar包权 ...

  10. Android 开发笔记 “android调试遇到ADB server didn't ACK以及顽固的sjk_daemon进程 ”

    资源来源:http://blog.csdn.net/wangdong20/article/details/20839533 做Android调试的时候经常会遇到,程序写好了,准备接上手机调试,可不一会 ...