转:你真的懂得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条件中,括号里是布 ...
随机推荐
- Hostker云主机
Orz现在我的博客使用Hostker主机了,地址:http://wnjxyk.cn/ 速度一下子快了很多! Hostker真的是很便宜很好用的主机呢!大家可以去试一下! 注册时填写了有效邀请码的新用户 ...
- openStack windows2008 centos6.* img
1,下载 windows2008 系统iso介质包 http://download.microsoft.com/download/F/3/8/F384E78B-8F1D-42A6-A308-63E45 ...
- WebApi个人理解概要
WebApi概要 Global文件的作用: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 public class MvcApplication : System.We ...
- Hibernate中,left join、inner join以及left join fetch区别(转)
标签: hibernate hql inner join left right 杂谈 分类: SQL 原文地址:http://m33707.iteye.com/blog/829725 Select F ...
- vs2013 cpu占用100%问题
是由于显卡驱动支持wpf有问题 更新驱动或设置里取消自动调节视觉效果 http://support.microsoft.com/kb/2894215
- jQuery validate和form插件配套使用
参考 官网http://jqueryvalidation.org/documentation/ 博客http://www.cnblogs.com/buzzlight/archive/2010/06/3 ...
- jQuery json数据处理
一种是使用jQuery的ajax函数 另一种是使用getJSON函数 使用ajax函数的时候 对于返回值类型dataType 亲自指定为json格式 就无需自己手动处理格式 $.ajax({ url ...
- elk 分布式数据同步
zjtest7-redis:/elk/elasticsearch/data/es_cluster/nodes/0/indices/library# strings ./1/index/_3.cfs | ...
- 脑波设备mindwave介绍
脑波,又称之为脑电波,是人大脑发出的电波,非常的微弱,只能通过设备来检测. 人的脑波在不同状态下,会不同,因此可以通过脑波来量化分析人的精神状态. 科学家讲脑电波分为四种,以下为详细解释(摘自百度百科 ...
- C/C++程序员面试大纲
基础篇:操作系统.计算机网络.设计模式一:操作系统 1. 进程的有哪几种状态,状态转换图,及导致转换的事件. 2. 进程与线程的区别. 3. 进程通信的几种方式. 4. 线程同步几种方式.(一定要会写 ...