一些很经典的JavaScript的问题

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();
});