转:你真的懂得JS吗?
题目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 关键字,具体看这里:
关于 a.call(null); 根据ECMAScript262规范规定:如果第一个参数传入的对象调用者是null或者undefined的话,call方法将把全局对象(也就是window)作为this的值。所以,不管你什么时候传入null,其this都是全局对象window,所以该题目可以理解成如下代码:
function a() {
alert(this);
}
a.call(window);
所以弹出的结果是[object Window]就很容易理解了。
—————
总结:
这5个题目虽然貌似有点偏,但实际上考察的依然是基本概念,只有熟知了这些基本概念才能写出高质量代码。
转:你真的懂得JS吗?的更多相关文章
- UCloud EIP 你真的懂得如何使用么? - SegmentFault
UCloud EIP 你真的懂得如何使用么? - SegmentFault UCloud EIP 你真的懂得如何使用么?
- 你真的了解js伪数组吗?深入js伪数组
关于js伪数组 具有length属性: 按索引方式存储数据: 不具有数组的push().pop()等方法: 你可能知道怎么把伪数组转换为数组,但是你知道这里边的原理吗? 假如页面有一组li元素 < ...
- 真的了解js生成随机数吗
由js生成一切随机数的基础都是Math.random()这个方法,这个方法比较特别,生成的随机数落在的区间是[0,1),进行一次操作的话,js只能生成一个类似于[n,m)这样,左闭右开的区间.所以当有 ...
- 你真的理解js的赋值语句么
之前谢亮兄和我一起讨论的一个问题: var a = {}; a.x = a = 3; a 的值是什么. 其实当执行赋值语句的时候,js 的 = 左侧不是原始变量地址,而是一个新值.怎么理解这句话呢? ...
- 8个问题看你是否真的懂 JS
文章转载: https://juejin.im/post/5d2d146bf265da1b9163c5c9#heading-20 原文地址: https://dev.to/aman_singh/so- ...
- 你真的了解JS里的"new"吗?
我们常常喜欢用new关键字去创建一些对象如new Vue(),但是这个关键字的背后究竟做了什么其实没太多人去关注. 想象我们是苹果公司,要生产30部iPod,规定: 每台iPod都会有自己的ID 每台 ...
- 真的了解JS么?
1.setTimeout setTimeout(function(){ }),1000) setTimeout(function(num){ alert(num) //弹123 },1000,1 ...
- 【灵魂拷问】你真的懂得Mysql的管理和使用吗?
作者 | Jeskson 来源 | 达达前端小酒馆 MySQL管理,数据库管理和数据表管理,用户管理. 初始化数据库,创建数据库,查看数据库,删除数据库. 创建数据表,查看数据表,修改数据表,删除数据 ...
- JavaScript的基础语法,你真的了解吗?
这篇文章是在我们熟悉了JS的基础语法后,很少有人去关注的一些细节部分.如果掌握了某些细节也许会对代码的改善有着非凡的作用.也许会使我们的代码更严谨,更高效. 1.if语句的条件 if条件中,括号里是布 ...
随机推荐
- Installing perl and writing your first perl program in Ubuntu
Installing perl and writing your first perl program in Ubuntu Installing perl and writing your f ...
- ios中的GCD
前面我们说了block中提到它用于多线程,而gcd则是其用于多线程的典型.gcd其全称(Grand Central Dispatch) 那到底什么叫gcd,官方的解释如下: Grand Central ...
- HDU 4464 Browsing History(最大ASCII的和)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4464 Problem Description One day when you are going t ...
- SQL Server使用LIKE运算符进行匹配查询
在查询的过程中,如果遇到不能明确的指明查询的限定条件时,就会用到LIKE运算符进行模式匹配查询.在查询时可以使用如下几个通配符: %:包含零个或多个字符的任意字符串 —(下划线):任何单个字符 []: ...
- SQL Server 判断表中是否存在某字段
功能:判断表中是否存在某字段,若不存在,则新增该字段 语句: IF NOT EXIST (SELECT 1 FROM [DATABASE].[SCHEMA].SYSCOLUMNS WHERE ID=O ...
- GBK转utf-8,宽字符转窄字符
//GBK转UTF8 string CAppString::GBKToUTF8(const string & strGBK) { string strOutUTF8 = "" ...
- Java Socket编程 标准范例(多线程)
链接地址:http://blog.csdn.net/benweizhu/article/details/6615542 服务器端(Server)非多线程 package com.zeph.server ...
- C++的常量折叠(二)
前面的C++的常量折叠(一)的最后留下了一个问题,那就是在声明i的时候,加上修饰符volatile关键字,发现结果输出的就不一样了,下面来说一下volatile这个关键字. C/C++中的volati ...
- VS2008一个小bug
vc工程的项目属性里MFC的使用有三项:默认“使用标准windows库”,修改为“在静态库中使用MFC”,然后再改回默认,项目变化如下: 今天的工程在改过后编译不能通过,手工把0改回2(1改回3)后O ...
- Vistual Studio 2010 调试无法进断点
系统是2003出现的问题 win8就没事 打sp1 补丁就行