我觉得有意思的JavaScript题目(01-05更新中)
对于以下js题目均来至于网络中。有的来至于文章之中,有的也许来至于问答题型中。
如果您有更好的问题解释,请留言交流!
1.相关问题描述:到底该怎么去理解闭包?
代码片段A
!function(){
var num=1;
var exp={};
function add(num){
return num++;
}
exp.getAddNum=function(){
return add(num);
}
window.a=exp;
}()
console.log(a.getAddNum());
console.log(a.getAddNum());
代码片段B
!function(){
var num=1;
var exp={};
function add(){
return num++;
}
exp.getAddNum=function(){
return add();
}
window.a=exp;
}()
console.log(a.getAddNum());
console.log(a.getAddNum());
解释:
第一个里面是你传递进去的,他会使用当前作用域接收到的这个形参的值,它并没有去改变外层num的值,因此你每次用它来传递,值都是1。
而第二个的'add'方法中并没有num变量,他会通过作用域链找到外层的num,那么你这样调用时每次都是操作的外层变量的值,而这个值在你return之后是会累加的。
关于上下文和作用域链你可以看看这篇文章
图解Javascript上下文与作用域 :http://blog.rainy.im/2015/07/04/scope-chain-and-prototype-chain-in-js/
2.javascript关于闭包的面试题
function f1(){
var n=999;
nAdd=function(){n+=1}
function f2(){
alert(n);
}
return f2;
}
var result=f1();
result();
nAdd();
result();
问:
在这段代码中,result()它一共运行了两次,第一次的值是999,第二次的值是1000。这证明了,函数f1中的局部变量n一直保存在内存中,并没有在f1调用后被自动清除。为什么会这样呢?尤其是第二次,为何输出的不是999呢?
nAdd=function(){n+=1}又起到了什么作用呢?
解释:
首先f1 函数的作用域链。1 指向全局,2 指向自身。自身里面包括,n=999 f2, nAdd这个函数没有加var声明,是全局变量。但是里面的n引用的是f1内部的n=999
然后 f2函数的作用域链。1 指向全局 2 指向f1的作用域 3,指向自己作用域
nAdd这个作用域链 1 指向全局,2 持有n=999引用,(我觉得也指向f1作用域),3 指向自己作用域
执行 var result=f1(); 这个楼主应该清楚,就是result就是指向f2函数
调用 result();弹出n.就是先去自己作用域找。没有。然后就去上级作用域f1里找。找到了。n=999,弹出999
执行nAdd(),这时,去自己作用域里找。没有n,所以去上级作用域。f1里。发现n,执行n=n+1,n变1000
再次执行result();和上一次一样。就是先去自己作用域找。没有。然后就去上级作用域f1里找。找到了 这时n=1000了。所以弹出1000
3.[] 和 Array 调用 slice 方法引起的问题
问题表示:在某些场景下,需要将函数的 arguments 参数作为一个数组调用,但是 arguments 是一个奇异对象,所以试着将 arguments 转化为一个数组;
function argToArr(){
return [].slice.call(arguments, 0);
}
console.log(argToArr(1,2,3)); //[1,2,3]
function argToArr(){
return Array.slice.call(arguments, 0);
}
console.log(argToArr(1,2,3)); //[]
问:这是为什么呢?
另外还有一个问题,是关于 Array 是怎么找到 slice 方法的?
Array 本身是没有 slice 方法,它的方法在 Array.prototype 中,而我们在调用 slice 方法的时候,如果在 Array 本身没有找到 slice 方法的话,会通过它的原型链往上查找,而 Array.proto 并没有指向 Array.prototype,而是指向 Function(),那么它是怎么找到 slice 方法的呢?
解释:
第二段代码报错是因为Array是构造函数,不是对象,打开控制台,输入 typeof Array,结果是 function
你也说了slice()方法在其原型对象中,而[]就是Array的原型对象,在控制台中输入 Array.prototype,结果是[],所以第一段代码可以顺利执行。
第二段代码如下修改就可以了:
functionargToArr(){
returnArray.prototype.slice.call(arguments, 0); // 改这一行
}
console.log(argToArr(1,2,3));
其实你的本质问题就在于误认为Array是数组对象,然而它是构造函数。
4.预解析相关
myname = "global"; // 全局变量
function func() {
alert(myname); // "undefined"
var myname = "local";
alert(myname); // "local"
}
func();
在这个例子中,你可能会以为第一个alert弹出的是”global”,第二个弹出”loacl”。这种期许是可以理解的,因为在第一个alert 的时候,myname未声明,此时函数肯定很自然而然地看全局变量myname,但是,实际上并不是这么工作的。第一个alert会弹 出”undefined”是因为myname被当做了函数的局部变量(尽管是之后声明的),所有的变量声明当被悬置到函数的顶部了。因此,为了避免这种混 乱,最好是预先声明你想使用的全部变量。
上面的代码片段执行的行为可能就像下面这样:
myname = "global"; // global variable
function func() {
var myname; // 等同于 -> var myname = undefined;
alert(myname); // "undefined"
myname = "local";
alert(myname); // "local"}
func();
为了完整,我们再提一提执行层面的稍微复杂点的东西。代码处理分两个阶段,第一阶段是变量,函数声明,以及正常格式的参数创建,这是一个解析和进入上下文 的阶段。第二个阶段是代码执行,函数表达式和不合格的标识符(为声明的变量)被创建。但是,出于实用的目的,我们就采用了”hoisting”这个概念, 这种ECMAScript标准中并未定义,通常用来描述行为。
我觉得有意思的JavaScript题目(01-05更新中)的更多相关文章
- 【web开发 | 移动APP开发】 Web 移动开发指南(2017.01.05更新)
版本记录 - 版本1.0 创建文章(2016.12.30) - 版本1.1 更正了hybird相关知识:增加了参考文章(2017.01.05): + Web APP更正为响应式移动站点与页面,简称响应 ...
- javascript算法汇总(持续更新中)
1. 线性查找 <!doctype html> <html lang="en"> <head> <meta charset="U ...
- ACM - KMP题目小结 (更新中)
KMP算法题型大致有两类,一类是next数组的应用,一类是匹配问题. next数组大多数是求字符串周期,或者是与前缀后缀有关,也可以应用在DP中.需要对next数组有一定理解才能做得出. next数组 ...
- JavaScript对象(持续更新中)
1Array对象 2.Boolean对象 3.Date对象 4.Math对象 5.Number对象 6.String对象 ※String.replace():替换字符串 实例: str.replace ...
- 试试看 ? 离奇古怪的javascript题目
来源地址: http://dmitrysoshnikov.com/ecmascript/the-quiz/#q1 另一篇帖子 看看国外的javascript题目,你能全部做对吗? http://www ...
- JavaScript进阶系列05,事件的执行时机, 使用addEventListener为元素同时注册多个事件,事件参数
本篇体验JavaScript事件的基本面,包括: ■ 事件必须在页面元素加载之后起效■ 点击事件的一个简单例子■ 为元素注册多个点击事件■ 获取事件参数 ■ 跨浏览器事件处理 □ 事件必须在页面元素加 ...
- javascript基础01
javascript基础01 Javascript能做些什么? 给予页面灵魂,让页面可以动起来,包括动态的数据,动态的标签,动态的样式等等. 如实现到轮播图.拖拽.放大镜等,而动态的数据就好比不像没有 ...
- 看看国外的javascript题目,你能全部做对吗?(分享)
本文转自@Aaron的博客,拿过来分享一下.原文:看看国外的javascript题目,你能全部做对吗? 题目一: (function(){ return typeof arguments; })(); ...
- 【JavaScript从入门到精通】第一课 初探JavaScript魅力-01
第一课 初探JavaScript魅力-01 JavaScript是什么 如今我们打开一个大型的网站,都会有很多JS效果的功能和应用.对于学过CSS+HTML的同学,即使是像淘宝那样的网站,用一两天时间 ...
随机推荐
- 生成树形结构的json字符串代码(c#)供前端angular tree使用.
框架是使用EF6.0.可以针对返回的值使用Newtonsoft.Json.dll(百度搜一下)来对返回的值序列化为json字符串,如果对以下值那就是使用JsonConvert.SerializeObj ...
- [译]Godot系列教程一 - 场景与节点
场景(Scene)与节点(Node) 简介 先设想有那么一瞬间你自己不再是一名游戏开发者了,而是一名大厨! 你的装备换成了一套大厨的制服.不要考虑制作游戏的事情,你现在的职责是为你的顾客创建新的可口的 ...
- javascript快速入门
这个在w3school在线文档讲解的很详细,还能在线练习. 所以我只写一些入门的东西和最常用的总结以及注意事项: JavaScript 是脚本语言 一般被人们称为JS,Jquery就是对js语言的封装 ...
- 解决使用Skia图形库时遇到的几个问题
Skia是一个开源的2D图形库,提供通用的API,适用于工作中遇到的各种硬件和软件平台.这是谷歌浏览器Chrome OS,Android的图形引擎,Mozilla Firefox浏览器和Firefox ...
- Hibernate 表映射 主键生成策略与复合主键
主要分析三点: 一.数据表和Java类的映射 : 二.单一主键映射和主键的生成策略 : 三.复合主键的表映射 : 一.数据表和Java类的映射 Hibernate封装了数据库DDL语句,只需要将数据 ...
- JAVA基础,字符串
字符串String(一个字符数组,常量,不可变): 1. 创建并初始化字符串: 1). 使用字符串常量直接初始化 String s="hello!"; 2). 使用构造方法创建并初 ...
- entityframework学习笔记--001
最近想重新好好学习一下entityframework,于是在院子里找到了一篇不错的博客.下面把学习的过程记录下来,方便以后复习. 学习过程参考大神的博客:http://www.cnblogs.com/ ...
- MySQL的SSL加密连接与性能开销
本文转载自:http://www.innomysql.net/article/23959.html(只作转载, 不代表本站和博主同意文中观点或证实文中信息) Contents [hide] 1 前言 ...
- Hibernate 参数设置一览表
Hibernate 参数设置一览表 属性名 用途 hibernate.dialect 一个Hibernate Dialect类名允许Hibernate针对特定的关系数据库生成优化的SQL. 取值 fu ...
- CSS常用背景图片定位方法
CSS背景图片定位其实对于每一位学习前端的同学来说,都已经非常熟悉了.网上铺天盖地的最常见的一种方案就是在父元素中relative,然后子元素absolute.这种方案当然好,不过带来的一个缺点就是会 ...