前端面试题.docx
- 文档编号:11661011
- 上传时间:2023-03-29
- 格式:DOCX
- 页数:17
- 大小:29.36KB
前端面试题.docx
《前端面试题.docx》由会员分享,可在线阅读,更多相关《前端面试题.docx(17页珍藏版)》请在冰豆网上搜索。
前端面试题
每当你在全局作用域中使用“this”关键字时(没在函数内部),它通常指向全局对象
(globalobject)。
JavaScript对象继承一瞥
functionPeople(age){
this.age=age;
this.getAge=function(){returnthis.age};
}
varp1=newPeople(20);//People的实例1
varp2=newPeople(40);//People的实例2
js采用了牺牲时间,获取空间的方法,js引入了原型理念,将方法放入原型中:
functionPeople(age){
this.age=age
}
People.prototype.getAge=function(){
returnthis.age
};
CSS3如何实现旋转图片:
transform:
rotate;
setTimeout和setInterval的区别:
setTimeout指定在某时间段后调用一次,setInterval调用多次;
用setTimeout如何调用多次:
在回调函数里再次调用setTimeout;
JavaScript怎么处理异常:
throw和catch
JSON和XML的优缺点:
JSON和JavaScript的Object关联更大,没有特殊需求就用JSON。
XML应该是有特殊需求的时候再用的吧?
JSON的编码更为清晰且冗余更少些,而XML比较适合于标记文档。
JSON网站提供了对JSON语法的严格描述,只是描述较简短。
JSON更适于进行数据交换处理。
编码可读性之间的区别
XML有明显的优势,毕竟人类的语言更贴近这样的说明结构。
JSON读起来更像一个数据块,读起来就比较费解了。
不过,我们读起来费解的语言,恰恰是适合机器阅读。
三、XML的优缺点
优点:
1.格式统一,符合标准
2.容易与其他系统进行远程交互,数据共享比较方便。
3.调用将XML用作传输的现有服务。
4.使用XSLT可以动态转换XML。
这是企业服务总线(ESB)方案中的理想功能。
缺点:
1.XML文件格式文件庞大,格式复杂,传输占用带宽
2.服务器端和客户端都需要花费大量代码来解析XML,不论服务器端和客户端代码变的异常复杂和不容易维护
3.客户端不同浏览器之间解析XML的方式不一致,需要重复编写很多代码
4.服务器端和客户端解析XML花费资源和时间
四、JSON的优缺点
优点:
1.数据格式比较简单,易于读写,格式都是压缩的,占用带宽小,浏览器解析快
2.易于解析这种语言,客户端JavaScript可以简单的通过eval()进行JSON数据的读取
3.构造友好,支持多种语言,包括ActionScript,C,C#,ColdFusion,Java,JavaScript,Per,PHP,Python,Ruby等语言服务器端语言,便于服务器端的解析
4.在PHP世界,已经有PHP-JSON和JSON-PHP出现了,便于PHP序列化后的程序直接调用,PHP服务器端的对象、数组等能够直接生JSON格式,便于客户端的访问提取
5.因为JSON格式能够直接为服务器端代码使用,大大简化了服务器端和客户端的代码开发量,但是完成的任务不变,且易于维护
6.相当稳定。
JSON的附加内容将成为超集
缺点:
1.没有XML格式这么推广的深入人心和使用广泛,没有XML那么通用性
2.JSON格式目前在WebService中推广还属于初级阶段
JavaScript面向对象基础:
对象是JavaScript的基础。
JavaScript的大部分功能都是基于对象的。
从最基本的层次而言
,对象是一系列属性的集合。
//创建一个新的Object对象,存放在'obj'变量中
varobj=newObject();
//给这个对象设置一个属性
obj.val=5;
obj.click=function(){
alert("hello");
};
//简写方式,键值对(key/valuepair)来定义属性
varobj={
//用键值对(key/valuepairs)方式来设置属性名和属性值
val:
5,
click:
function(){
alert("hello");
}
};
2.对象的创建
和大部分的其它面向对象的语言不同,JavaScript并没有类(class)的概念。
其它面向对象语言大多需要实例化某个具体的类。
但JavaScript不同,JavaScript里对象本身可以用来创建新对象,而对象也可以继承自其它对象。
这个概念称为原型化继承(prototypalinheritance)。
不管JavaScript使用何种对象方案,首先还是应该有一个创建新对象的方法。
JavaScript的做法是,任何函数都可以被实例化为一个对象。
constructor属性在每个对象中都存在,并一直指向创建它的函数。
这样就可以有效地复
制对象,用同一个基类创建对象并赋予不同的属性。
//创建一个新的简单的User对象
functionUser(){}
//创建一个User对象
varme=newUser();
//用前一个对象的constructor引用来创建对象
varyou=newme.constructor();
//这两个对象的constructor实质上是一致的
alert(me.constructor==you.constructor);
3.公共方法(publicmethod)在对象的上下文中是最终用户始终可以接触到的。
要实现这种在对象的每个实例都可以使用的公共方法。
必须了解prototype(原型)的属性,这个属性包含一个对象,该对象可以作为所有新副本的基引用(basereference)。
本质上说,所有对象原型的属性都能在该对象的每个实例中找到。
因为对象的原型仍然是对象,和其他任何对象一样,可以给它添加新的属性。
给原型加属性的结果是由该原型实例化的每个对象都会获得这些属性,也就使这些属性公有化了。
//创建一个新的User构造函数
functionUser(name,age){
this.name=name;
this.age=age;
}
//将一个新函数加到对象的prototype对象中
User.prototype.getName=function(){
returnthis.name;
};
//再次给prototype对象添加一个函数
User.prototype.getAge=function(){
returnthis.age;
};
//实例化一个新的User对象
varuser=newUser("Bob",44);
//添加的这两个属性都在刚才创建的对象中,并且有合适的上下文
alert(user.getName()=="Bob");
alert(user.getAge()==44);
4.私有方法
私有方法(privatemethod)和私有变量只允许其他的私有方法、私有变量和特权方法访问。
这种方法可以定义一些只让对象内部访问,而外部访问不到的代码。
//表示教室的一个对象构造函数
functionClassroom(students,teacher){
//用于显示班级所有学生的私有方法
functiondisp(){
alert(this.names.join(","));
}
//将班级数据存入公共属性中
this.students=students;
this.teacher=teacher;
//调用私有方法来显示错误
disp();
}
//创建一个新的classroom对象
varclass=newClassroom(["John","Bob"],"Mr.Smith");
//调用disp方法会失败,因为它不是该对象的公共方法
class.disp();
end
jQuery:
$.each()函数不同于JQuery对象的each()方法,它是一个全局函数,不操作JQuery对象,而是以一个数组或者对象作为第1个参数,以一个回调函数作为第2个参数。
回调函数拥有2个参数:
第1个为对象的成员或数组的索引,第2个为对应变量或内容。
JQuery中$.ajax()方法参数详解:
url:
要求为String类型的参数,(默认为当前页地址)发送请求的地址。
type:
要求为String类型的参数,请求方式(post或get)默认为get。
注意其他http请求方法,例如put和delete也可以使用,但仅部分浏览器支持。
timeout:
要求为Number类型的参数,设置请求超时时间(毫秒)。
此设置将覆盖$.ajaxSetup()方法的全局设置。
async:
要求为Boolean类型的参数,默认设置为true,所有请求均为异步请求。
如果需要发送同步请求,请将此选项设置为false。
注意,同步请求将锁住浏览器,
用户其他操作必须等待请求完成才可以执行。
cache:
要求为Boolean类型的参数,默认为true(当dataType为script时,默认为false)。
设置为false将不会从浏览器缓存中加载请求信息。
data:
要求为Object或String类型的参数,发送到服务器的数据。
如果已经不是字符串,将自动转换为字符串格式。
get请求中将附加在url后。
防止这种自动转换,可以查看processData选项。
对象必须为key/value格式,例如{foo1:
"bar1",foo2:
"bar2"}转换为&foo1=bar1&foo2=bar2。
如果是数组,JQuery将自动为不同值对应同一个名称。
例如{foo:
["bar1","bar2"]}转换为&foo=bar1&foo=bar2。
dataType:
要求为String类型的参数,预期服务器返回的数据类型。
如果不指定,JQuery将自动根据http包mime信息返回responseXML或responseText,并作为回调函数参数传递。
可用的类型如下:
xml:
返回XML文档,可用JQuery处理。
html:
返回纯文本HTML信息;包含的script标签会在插入DOM时执行。
script:
返回纯文本JavaScript代码。
不会自动缓存结果。
除非设置了cache参数
。
注意在远程请求时(不在同一个域下),所有post请求都将转为get请求。
json:
返回JSON数据。
jsonp:
JSONP格式。
使用SONP形式调用函数时,例如myurl?
callback=?
,JQuery
将自动替换后一个“?
”为正确的函数名,以执行回调函数。
text:
返回纯文本字符串。
beforeSend:
要求为Function类型的参数,发送请求前可以修改XMLHttpRequest对象的函数,例如添加自定义HTTP头。
在beforeSend中如果返回false可以取消本次ajax请求。
XMLHttpRequest对象是惟一的参数。
function(XMLHttpRequest){
this;//调用本次ajax请求时传递的options参数
}
complete:
要求为Function类型的参数,请求完成后调用的回调函数(请求成功或失败时均
调用)。
参数:
XMLHttpRequest对象和一个描述成功请求类型的字符串。
function(XMLHttpRequest,textStatus){
this;//调用本次ajax请求时传递的options参数
}
success:
要求为Function类型的参数,请求成功后调用的回调函数,有两个参数。
(1)由服务器返回,并根据dataType参数进行处理后的数据。
(2)描述状态的字符串。
function(data,textStatus){
//data可能是xmlDoc、jsonObj、html、text等等
this;//调用本次ajax请求时传递的options参数
error:
要求为Function类型的参数,请求失败时被调用的函数。
该函数有3个参数,即
XMLHttpRequest对象、错误信息、捕获的错误对象(可选)。
ajax事件函数如下:
function(XMLHttpRequest,textStatus,errorThrown){
//通常情况下textStatus和errorThrown只有其中一个包含信息
this;//调用本次ajax请求时传递的options参数
}
contentType:
要求为String类型的参数,当发送信息至服务器时,内容编码类型默认
为"application/x-www-form-urlencoded"。
该默认值适合大多数应用场合。
dataFilter:
要求为Function类型的参数,给Ajax返回的原始数据进行预处理的函数。
提供data和type两个参数。
data是Ajax返回的原始数据,type是调用
jQuery.ajax时提供的
dataType参数。
函数返回的值将由jQuery进一步处理。
function(data,type){
//返回处理后的数据
returndata;
}
global:
要求为Boolean类型的参数,默认为true。
表示是否触发全局ajax事件。
设置为
false将不会触发全局
ajax事件,ajaxStart或ajaxStop可用于控制各种ajax事件。
ifModified:
要求为Boolean类型的参数,默认为false。
仅在服务器数据改变时获取新数据
。
服务器数据改变判断的依据是Last-Modified头信息。
默认值是false,即忽略头信息。
jsonp:
要求为String类型的参数,在一个jsonp请求中重写回调函数的名字。
该值用来替代在"callback=?
"这种GET或POST请求中URL参数里的"callback"部分,例如:
{jsonp:
'onJsonPLoad'}会导致将"onJsonPLoad=?
"传给服务器。
username:
要求为String类型的参数,用于响应HTTP访问认证请求的用户名。
password:
要求为String类型的参数,用于响应HTTP访问认证请求的密码。
processData:
要求为Boolean类型的参数,默认为true。
默认情况下,发送的数据将被转换为对象(从技术角度来讲并非字符串)以配合默认内容类型"application/x-www-form-urlencoded"。
如果要发送DOM树信息或者其他不希望转换的信息,请设置为false。
scriptCharset:
要求为String类型的参数,只有当请求时dataType为"jsonp"或者"script",并且type是GET时才会用于强制修改字符集(charset)。
通常在本地和远程的内容编码不同时使用。
对闭包的理解:
在程序语言范畴内的“闭包”指的是函数把其中的变量作用域都“包”在该函数的作用域内,形成一个“包”,外部函数无法访问内部变量。
所以严格意义上来说,JavaScript中的函数都是闭包。
但我们常说的闭包,通常是指为了让外部函数访问到内部函数中变量,使内部函数返回一个函数,在其中操作内部变量。
RESTful的操作名:
GET,POST,DELETE
HTTP404、302、500、403状态名是什么意思?
?
?
404:
服务器找不到请求的网页。
例如,对于服务器上不存在的网页经常会返回此代码。
302(临时移动):
302Found是HTTP协议中的一个状态码(StatusCode)。
可以简单的理
解为该资源原本确实存在,但已经被临时改变了位置;
500(服务器内部错误):
服务器遇到错误,无法完成请求。
403(禁止):
服务器拒绝请求。
你认为前端是做什么的?
我会从广义和狭义两方面来说,狭义的前端是实现设计师的设计稿;广义的前端是所有用户打交道的环节。
模块化了解吗?
AMD、CMD
移动平台的开发经验?
响应式设计、Zepto;@media、viewport、JavaScript正则表达式判断平台。
如果一个元素absolute,它是相对谁说的?
如果它的父元素是非static值,则相对父元素;否则相对是非static值的父元素的父元素……直到找到一个最近的非static值的祖先元素。
如果都没有,则是相对window而言。
如果一个元素absolute,没设left、top,位置是哪里?
正确答案是,相当于static的默认位置。
左上角之所以不准确,是因为如果父元素在本元素之前如果还有子元素的话,那就不是左上角了。
vara=["a","b","c","d"]每过1秒alert一下数组中的值?
?
for(varj=0;j<4;j++){
(function(i){
setTimeout(function(){
alert(i);
},(i+1)*1000);
})(j);
}
如何加快页面加载速度?
减少HTTP访问次数、CDN、minify、服务器增加缓存、CSS放前面JS放后面、图片压缩、
CSSSprite等。
为什么要减少HTTP访问次数?
浏览器进程请求链接的数目是有限的,如果有很多HTTP请求,有些就得等着;另外,建立HTTP链接的开销比较大,需要三次握手之类,而相对地,一次连接中文件大小的边际成本就很小。
从浏览器输入URL到页面渲染发生了什么事?
1,当用户输入网页URL的时候,WebKit调用其资源加载器加载该URL对应的网页。
2,加载器依赖网络模块建立连接,发送请求并接收答复。
3,WebKit接收到各种网页或者资源的数据,其中某些资源可能是同步或异步获取的。
4,网页被交给HTML解释器转变成一系列的词语(Token)。
5,解释器根据词语构建节点(Node),形成DOM树。
6,如果节点是JavaScript代码的话,调用JavaScript引擎解释并执行。
7,JavaScript代码可能会修改DOM树的结构
如果节点需要依赖其他资源,例如图片、CSS、视频等,调用资源加载器来加载它们,但是它们是异步的,不会阻碍当前DOM树的创建,直到JavaScript的资源加载并被JavaScript引擎执行后才继续DOM树的创建。
CSSselector优先级
分为id>class>标签>伪类四类,计算每个类别中的选择器个数,然后先比较id个数,越多越优先,在id个数相同的情况下,再比较class个数,以此类推。
带有!
important的优先级最高,都带!
important的再以之前的顺序计算优先级。
inline>internal>external
碰撞检测的AABB
投影到两个互相垂直的直线上,如果有交点需要进一步判断是否相交,如果没有交点可以确
定一定不相交。
十,js中的this详解:
在web前端开发中,javascript中的this和其他的JAVA,C#等大型语言一样,是一个重要概念
。
但是要注意的是,在javascript中,由于javascript的动态性,this的指向在运行时才确
定,这就需要我们掌握它的工作原理。
Javascript下,所有的属性都默认为window对象所有,所以说this也不例外;
不指定事件元素的时候this指定的是window,指定事件元素的时候,this指定当前发生事件的元素。
十一,内存泄露是指一块被分配的内存既不能使用,又不能回收,直到浏览器进程结束。
当页面中元素被移除或替换时,若元素绑定的事件仍没被移除,
闭包的时候
十二,目前浏览器端跨域访问常用的两种方法有两种:
1、通过jQuery的ajax进行跨域,这其实是采用的jsonp的方式来实现的。
2.使用jquery的getJson进行跨域读取数据。
jsonp是英文jsonwithpadding的缩写。
它允许在服务器端生成scripttags至返回至客户端
,也就是动态生成javascript标签,通过javascriptcallback的形式实现数据读取。
十三,JavaScript对象继承一瞥
js创建之初,正值java大行其道,面向对象编程春风正盛,js借鉴了java的对象机制,但仅
是看起来像,也就是js的构造函数,如下:
functionPeople(age){
this.age=age;
this.getAge=function(){returnthis.age};
}
varp1=newPeople(20);//People的实例1
varp2=newPeople(40);//People的实例2
上面的代码很像java了,通过newconstructor()的方式,可以创建多个实例。
但上面代码问题是getAge方法会在每个People的实例中存在,如果实例多的话,会浪费很多空间,js采用了牺牲时间,获取空间的方法,js引入了原型理念,将方法放入原型中:
functionPeople(age){
this.age=age
}
People.prototype.getAge=function(){returnthis.age};
默认模式
我们可以利用js的原型机制,将子构造函数的原型属性设置为父构造函数的实例,这是js
比较常用的方式:
functionStudent(num){
this.num=num;
}
Student.prototype=newPeople();
Student.prototype.getNum=function(){returnthis.num;};
varstu1=newStudent('123');
这样做其实基本实现了我们的需求,但如果深入思考上面的方式,其实有几个缺点:
子类无法继承父类的实例属性会将父类的实例属性,扩展到子类的原型上修改了子类的原型属性,会导致在stu1上获取constructor属性为People,而不是Student哦!
!
!
借用构造函数
先来看看如何解决第一个问题,我们可以巧用js的call方法,如果你还不知道这个方法,请
移步这里。
functionStudent(age,num){
People.call(this,age);
this.num=num;
}
我们在子构造函数内部,借用父构造函数,这样就巧妙地在子类中继承了父类的实例化属性
。
这其
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 前端 试题