1、作用域

(function() {
var a = b = 5;
})();
console.log(b);

输出:5

陷阱是,在函数表达式中有两个赋值,但a是用关键字var 来声明的,这意味着a是局部变量,而b则被赋予为全局变量。另一个陷阱是,它并没有使用严格模式(use strict)。在函数里面,如果启用了严格模式,代码就会报错:“Uncaught ReferenceError: b is not defined”。请记住,严格模式需要你显式地引用全局作用域,代码应该写成:

(function() {
'use strict';
var a = window.b = 5;
})();
console.log(b);

2、创建“内置”方法

给String对象定义一个repeatify方法。该方法接收一个整数参数,作为字符串重复的次数,最后返回重复指定次数的字符串。例如:

console.log('hello'.repeatify(3));

输出的是

hellohellohello

一个可行的做法如下:

String.prototype.repeatify = String.prototype.repeatify || function(times) {
var str = '';
for (var i = 0; i < times; i++) {
str += this;
}
return str; };

这个测试开发者对Javascript的继承及原型属性的知识,它同时也检验了开发者是否能扩展内置数据类型的方法。 这里的另一个关键点是,看你怎样避免重写可能已经定义了的方法。这可以通过在定义自己的方法之前,检测方法是否已经存在

String.prototype.repeatify = String.prototype.repeatify || function(times) {
/* code here */
};

3、上下文,声明提前

下面这段代码的结果是什么?为什么?

function test() {
console.log(a);
console.log(foo());
var a = 1;
function foo() {
return 2;
}
}
test();

代码的运行结果:undefined和 2

理由是,JavaScript中的函数运行在它们被定义的作用域里,而不是它们被执行的作用域里,变量和函数的声明都被提前至函数体的顶部,而同时变量并没有被赋值。因此,当打印变量a时,它虽存在于函数体(因为a已经被声明),但仍然是undefined。换句话说,上面的代码等同于下面的代码:

function test() {
var a;
function foo() {
return 2;
}
console.log(a);
console.log(foo());
a = 1;
}
test();

还要明白函数表达式(expression)和函数声明(declaration)的区别

4、JavaScript中的context和this

下面代码的运行结果是什么并做解释

var fullname = 'John Doe';
var obj = {
fullname: 'Colin Ihrig',
prop: {
fullname: 'Aurelio De Rosa',
getFullname: function() {
return this.fullname;
}
}
};
console.log(obj.prop.getFullname());
var test = obj.prop.getFullname;
console.log(test());

代码输出:Aurelio De Rosa 和 John Doe

理由是,Javascript中关键字this所指代的函数上下文,取决于函数是怎样被调用的,而不是怎样被定义的。

在第一个console.log(),getFullname()被作为obj.prop对象被调用。因此,当前的上下文指代后者,函数返回这个对 象的fullname属性。相反,当getFullname()被赋予test变量,当前的上下文指代全局对象window,这是因为test被隐式地作 为全局对象的属性。基于这一点,函数返回window的fullname,在本例中即为代码的第一行。

如果说想要实现和第一次输出一样的效果,还可以这样写

console.log(test.call(obj.prop));

var test = obj.prop.getFullname.bind(obj.prop);
console.log(test());

通常有一些老的浏览器是不支持bind函数,我们可以使用apply和call

Function.prototype.bind = Function.prototype.bind || function(context){
var self = this;
return function(){
return self.apply(context, arguments);
};
}

 5、Overlay库

对于overlay covers,最好使用 position: fixed 而不是 position: absolute,这样即使窗口滚动的时候也可以保证层铺满整个窗口

.overlay {
position: fixed;
left: 0;
right: 0;
bottom: 0;
top: 0;
background: rgba(0,0,0,.8);
}

从把内容放置到层的中心位置的方式也可以

.overlay article {
position: absolute;
left: 50%;
top: 50%;
margin: -200px 0 0 -200px;
width: 400px;
height: 400px;
}

实现单击关闭层的功能,可以为层设置一个事件监听器

$('.overlay').click(closeOverlay);

看着是对的,但很快你就会发现在这个层的子元素上单击也会关闭层,这明显不是我们预期的效果。解决方法是先检查事件的targets来确保不是一个传播事件,像这样:

$('.overlay').click(function(e){
if (e.target == e.currentTarget)
closeOverlay();
});

一些很经典的JavaScript的问题的更多相关文章

  1. 推荐几款很棒的 JavaScript 表单美化和验证插件

    表单元素让人爱恨交加.作为网页最重要的组成部分,表单几乎无处不在,从简单的邮件订阅.登陆注册到复杂的需要多页填写的信息提交功能,表单都让开发者花费了大量的时间和精力去处理,以期实现好用又漂亮的表单功能 ...

  2. 5个经典的JavaScript面试题

    在IT界中公司对JavaScript开发者的要求还是比较高的,但是如果JavaScript开 发者的技能和经验都达到了一定的级别,那他们还是很容易跳到优秀的公司的,当然薪水就更不是问题了.但是在面试之 ...

  3. 5个经典的JavaScript面试基础问题

    JavaScript程序员在IT领域中的需求量非常巨大.如果你非常精通JavaScript,你会有很多换工作.涨薪水的机会.但是在一家公司录用你之前,你必须顺利通过面试,证明你的技能.在本文中,我将向 ...

  4. 一道很经典的 BFS 题

    一道很经典的 BFS 题 想认真的写篇题解. 题目来自:https://www.luogu.org/problemnew/show/P1126 题目描述 机器人移动学会(RMI)现在正尝试用机器人搬运 ...

  5. HTTP协议详解(真的很经典)(转载)

    HTTP协议详解(真的很经典):http://www.cnblogs.com/li0803/archive/2008/11/03/1324746.html 引言 HTTP是一个属于应用层的面向对象的协 ...

  6. 19个很有用的 JavaScript库推荐

    流行的 JavaScript 库有jQuery,MooTools,Prototype,Dojo和YUI等,这些 JavaScript 库功能丰富,加上它们众多的插件,几乎能实现任何你需要的功能 然而需 ...

  7. 为IT程序员量身定制的12个目标——很经典

    对程序员们来说挑战自我非常重要,要么不断创新,要么技术停滞不前.新年伊始,我整理了12个月的目标,每个目标都是对技术或个人能力的挑战,而且可以年复一年循环使用. 01. 变得有耐心 02. 保持健康 ...

  8. TTTTTTTTTTTT POJ 2112 奶牛与机器 多重二分匹配 跑最大流 建图很经典!!

    Optimal Milking Time Limit: 2000MS   Memory Limit: 30000K Total Submissions: 15682   Accepted: 5597 ...

  9. 100多个很有用的JavaScript函数以及基础写法大集合

    100多个很有用的JavaScript函数以及基础写法大集合 1.document.write("");为 输出语句2.JS中的注释为//3.传统的HTML文档顺序是:docume ...

随机推荐

  1. 算法:非平衡二叉搜索树(UnBalanced Binary Search Tree)

    背景 很多场景下都需要将元素存储到已排序的集合中.用数组来存储,搜索效率非常高: O(log n),但是插入效率比较低:O(n).用链表来存储,插入效率和搜索效率都比较低:O(n).如何能提供插入和搜 ...

  2. Selenium2+python自动化49-判断文本(text_to_be_present_in_element)

    前言 在做结果判断的时候,经常想判断某个元素中是否存在指定的文本,如登录后判断页面中是账号是否是该用户的用户名. 在前面的登录案例中,写了一个简单的方法,但不是公用的,在EC模块有个方法是可以专门用来 ...

  3. C结构体

    什么是结构体? 简单的来说,结构体就是个能够包含不同数据类型的一个结构,他是一种能够自己定义的数据类型,他的特点和数组主要有两点不同,首先结构体能够在一个结构中声明不同的数据类型,第二相同结构的结构体 ...

  4. linux的chmod,chown命令详解

    指令名称 : chmod 使用权限 : 所有使用者 使用方式 : chmod [-cfvR] [--help] [--version] mode file... 说明 : Linux/Unix 的档案 ...

  5. 使用HTML5开发离线应用 - cache manifest

    HTML5 是目前正在讨论的新一代 HTML 标准,它代表了现在 Web 领域的最新发展方向.在 HTML5 标准中,加入了新的多样的内容描述标签,直接支持表单验证.视频音频标签.网页元素的拖拽.离线 ...

  6. 3D屏保: 线圈

    LineFlower3DSP 一个3D屏保程序,算法的原理类似于圆内轮旋线的生成. 下载地址: http://files.cnblogs.com/WhyEngine/LineFlower3D_sp.z ...

  7. Android GUI之Window、WindowManager

    通过前几篇的文章(查看系列文章:http://www.cnblogs.com/jerehedu/p/4607599.html#gui ),我们清楚了Activity实际上是将视图的创建和显示交给了Wi ...

  8. cygwin64安装wget和apt-cyg

    说实话,网上的教程要么不适用,要么不能用,唯有多次试错之后才杀出一条血路. 1.安装cygwin 2.勾选wget 这个如果忘记勾选了,就再次打开setup.exe,选择如下操作,即可. 然后点击下一 ...

  9. [Algorithm] How to use Max Heap to maintain K smallest items

    Let's say we are given an array: [,,,,,,] We want to get K = 3 smallest items from the array and usi ...

  10. 【PHP 】伪静态 - 4. 实际运用

    伪静态的实际运用 1. 在一个项目中有两个文件夹,public和private, public文件夹的图片可以被所有人访问,private只能被自己访问.如何实现? 第一个方法是: 在public和p ...