几道前端试题

in   Less than 1 minute read

有学长参加了UC2014的校招笔试题，并带回来了一张试卷，我就试着自己做了下。

1.下面的代码输出结构分别是什么

function Person() {
	this.myName = 'Tom';
}
Person.prototype.sayName = function() {
	var myName = 'Jerry';
	console.log(this.myName);
}
Person.prototype.sayHello = function() {
	setTimeout(this.sayName,100);
}
var p = new Person();
p.sayName();
p.sayHello();

上面的代码输出结果为Tom和undefined

后面为undefined是因为没有正确调用方法，将setTimeout(this.sayName,100)改为setTimeout(this.sayName（）,100)就能正确返回Tom了

2.以下是一段js代码，其中element是一个dom元素。请说出该函数是否存在问题，如果有，请指出问题所在，并提供解决方案。

function foo(element) {
	var str = 'uc';
	element.onclick = function() {
		console.log(str + element.tagName);
	};
}

该函数为元素绑定了一个onclick事件，但是如果后面想继续为该元素绑定事件时，事件会被覆盖 解决方法是

var header = document.getElementById("header");
	addEvent(header,'click',test);
function addEvent(element,ev,func) {
	if(element.attachEvent) {
		element.attachEvent('on' + ev,function() {
			func();
		});
	}
	else {
		element.addEventListener(ev,function(event) {
			func();
		});
	}
}
function test() {
	alert("test");
}

3.请用js实现对象的深度克隆

查了下资料，这里有篇资料讲的挺好的 http://sentsin.com/web/21.html

4.设计一个页面的布局

a)页面自适应屏幕宽度

b)侧边栏固定宽度300px,其他元素均自适应宽度

c）页头、导航栏、页脚固定宽度40px，正文部分按内容自动撑高 具体可参见https://github.com/c1avie/UC2014