JavaScript总结及面试.docx
《JavaScript总结及面试.docx》由会员分享,可在线阅读,更多相关《JavaScript总结及面试.docx(19页珍藏版)》请在冰豆网上搜索。
![JavaScript总结及面试.docx](https://file1.bdocx.com/fileroot1/2022-12/1/1cdd5ca9-c4a1-4565-bff2-cb03e2ba8025/1cdd5ca9-c4a1-4565-bff2-cb03e2ba80251.gif)
JavaScript总结及面试
1、JavaScript中的对象.
JavaScript中的Object是一组数据的key-value的集合,有点类似于Java中的有这些数据都是Object里的property.通常情况下,JavaScript中建立一个对象用”new”加上constructorfunction来实现.如newDate(),newObject()等.
varbook=newObject();
book.name="JavaScriptisCool";
book.author="tom";
book.pages=514;HashMap,所
上面例子中的name和page就是名为book的对象中的property.我们可以用delete来删除Object中的property:
“deletebook.name;”.除了Object,Date等buildin的对象外,我们可以写自己的constructorfunction,然后使用new就可以建立自己的对象.如上面的book可以写成:
functionBook(name,author,page){
this.name=name;
this.author=author;
this.page=page;
}
varabook=newBook("JavaScriptisCool","tom",514);
2、function的用法
在JavaScript中,function是一种数据类型,所有的function都是从buildin的Functionobject衍生的对象.所以在JavaScript中function可以作为参数传递,可以作为Object的property,也可以当作函数返回值.function在JavaScript中有两种用法,一种是当作constructor,前面加上newkeyword用来建立对象.一种是当作method,为其他对象调用.
注意function和method在中文里的意思相当,在有些语言里也可以通用.但是在JavaScript中,它们还是有所区别的.function本身是是一个对象,而当作为一个方法他属于一个对象时,就成为了一个这个对象的method,相当于一个对象种的属性.也就是说method是相对于一个对象而言的,function在某些情况下成为了一个对象的method.
functionBook(name,author,page){
this.name=name;
this.author=author;
this.page=page;
this.getReader=Book_getReader;
}
functionBook_getReader(){
//....
}
上面的例子种,functionBook_getReader()就成为了Book的一个名为getReader的method.call()和apply()是Functionobject的两个方法,它们也可以使一个function作为另一个对象的method来调用用.call()和apply()都需要参数,而第一个参数就是调用对象,也就是当function内部出现this时,this所指的对象.call()和apply()的区别在于call()可以传递任意长度参数,只要第一个参数时调用对象.而apply只接受两个参数,需要将除调用对象外的所有参数放入一个数组中.即:
functiongetBooksWithSameAuthor(form,to){
varname=this.author;
varbooks=...
//getbookswrittenbynameandfromyear"from"toyear"to"
returnbooks;
}
varabook=newBook("JavaScriptisCool","tom",514);
varbooks=getBooksWithSameAuthor.call(abook,1990,2005);
或
varbooks=getBooksWithSameAuthor.apply(abook,[1990,2005]);
当一个function不作为一个对象的method时,JavaScript会认为它是属于一个GlobleObject对象的method,这个GlobleObject在Browser中就是window类.所以从这个角度来说,function和method又可以统一起来了.
Functionobject还有一个非常重要的property:
prototype.它是一个predefined的prototypeobject.当一个Function用作对象的constructor时,protptypeproperty将发挥作用,中文翻译叫原型.JavaScript的新对象就是通过function的原型来建立的.同时我们还可以利用prototype来动态的向对象中添加属性,如:
functionBook(name,author,page){
this.name=name;
this.author=author;
this.page=page;
}
varabook=newBook("JavaScriptisCool","tom",514);
Book.prototype.getInfo=getInfo;
functiongetInfo(){
returnthis.name+"writtenby"+this.author+"with"+this.page+"pages";
}
alert(abook.getInfo());
这里有一个例子,用prototype方法来实现callback:
Function.prototype.andThen=function(g){
varf=this;
returnfunction(){
f();g();
}
};
functionManager(){
this.callback=function(){};//donothing
this.registerCallback=function(callbackFunction){
this.callback=(this.callback).andThen(callbackFunction);
}
}
varmanager=newManager();
manager.registerCallback(sayHi);
manager.registerCallback(sayBye);
manager.callback();
3、对象的继承
JavaScript有多种方式模拟继承.
1.利用function:
functionsuperClass(){
this.bye=superBye;
this.hello=superHello;
}
functionsubClass(){
this.inheritFrom=superClass;
this.inheritFrom();
this.bye=subBye;
}
或者:
functionsubClass(){
superClass.call(this);
}
先定义subClass的inheritFrom方法,再调用这个方法(方法名称并不重要),或者直接使用FunctionObject的call方法将this做参数,都可以模拟实现从superClass的继承.注意调用superClass时的this指向.这个方法就是在执行subClass的cunstructorfunction时,先执行supperClass的cunstructorfunction.这个方法的缺点在于子类仅仅是在自己的构造函数中,将this作为参数调用了父类的构造函数,将构造函数赋予父类的所有域赋予子类.所以,任何父类在构造函数之外(通过prototype)定义的域,子类都无法继承.而且子类的构造函数一定要在定义自己的域之前调用父类的构造函数,免得子类的定义被父类覆盖.使用这种方法子类也尽量不要使用prototype来定义子类的域,因为prototype的定义在子类new的之后就执行,所以它一定会在调用父类构造函数前,同样会有被父类的定义覆盖的危险.
2.利用prototype:
functionsuperClass(){
this.bye=superBye;
this.hello=superHello;
}
functionsubClass(){
this.bye=subBye;
}
subClass.prototype=newsuperClass();
subClass.prototype.constructor=superClass;
这里将一个superClass的实例设置成subclass的原型:
protytype,由于newsuperClass实例一定会调用父类prototype定义的所有域,所以这种方法避免了上一种方法的一个问题,父类可以通过prototype来描述域.可以实现从superClass的继承.而这个方法也有缺点,由于子类的peototype已经是父类的实例(Object实例),不能再被实例化,所以new子类实例的时候,父类的所有非基本数据类型(见JavaScript数据类型)都将是referencecopy而非数据copy.简单说就是所有的父类域在子类中虽然存在,但看起来就像Java中的static域一样在子类间share.被一个子类改变,所有子类都会改变.
注意这里的最后一句,改变了子类prototype中的constructor属性.它对子类使用没有影响,仅仅是为了在调用instanceOf方法时它使得子类实例返回subClass.
3.ParasiticInheritance(寄生继承)
functionsuperClass(){
this.bye=superBye;
this.hello=superHello;
}
functionsubClass(){
this.base=newsupperClass();
base.sayBye=subBye;
returnbase;
}
这种继承其实是一种扩展,因为在调用instanceOf时,子类会返回父类名称,它的好处在于在构造函数继承的基础上解放了父类,父类可以使用prototype定义自己的域,但是子类仍然不建议使用prototype,以免被父类覆盖.为了可以使子类的instanceof返回正确类型,我们可以再改进一下:
functionsubClass(){
this.base=newsupperClass();
for(varkeyinthis.base){
if(!
this[key]){
this[key]=this.base[key];
}
}
this.sayBye=subBye;
}
将所有的父类域拷贝给子类一份,不再返回父类,instanceof子类实例时就可以返回正确类型.
4、this的用法
通常情况下,this代表的是前面提到的GlobleObject.也就是Browser环境时的windowObject.当function作为某一对象的method时,this代表这个function所属的object.下面这段代码有格错误,涉及到this的使用:
functionEmployee(a){
this.name=a;
}
functioninit(){
John=Employee("Johnson");
alert(John.name);
}
在init()中我们少了一个newkeyword.于是这个代码就会报错,因为Browser把Employee当作是windowobect的一个method,里面的this指的就是windowobject.init()应该改为:
functioninit(){
John=newEmployee("Johnson");
alert(John.name);
}
同时我们也可以将Employee的constructor函数修改,防止类似的错误:
functionEmployee(a){
if(!
(thisinstanceofEmployee))returnnewEmployee(a);
this.name=a;
}
这样,我们即使使用原来的init()方法,也不会报错了.
5、ArrayinJavaScript
Array和Object本质上是一样的,只是Array需要由index来索引它其中的属性.index为>=0的整数.
Array有一系列buildin的方法:
1.jion()将array中的所有element以string的形式连在一起:
1
2
3
vara=[1,2,3];
s=a.join();//s=="1,2,3"
s=a.join(":
");//s=="1:
2:
3"
2.reverse()将Array的element顺数颠倒
vara=[1,2,3];
a.reverse();
s=a.join();//s=="3,2,1"
3.sort()排序,默认按字母顺序排序casesensitive,可以自定义排序方式.
vara=[111,4,33,2];
a.sort();//a==[111,2,33,4]
a.sort(function(a,b){//a==[2,4,33,111]
returna-b;//Returns<0,0,or>0
});
4.concat()连接多个Array
vara=[1,2,3];
a.concat(4,5);//return[1,2,3,4,5]
a.concat([4,5]);//return[1,2,3,4,5]
a.concat([4,5],[6,7])//return[1,2,3,4,5,6,7]
a.concat(4,[5,[6,7]]);//return[1,2,3,4,5,6,7]
5.slice()返回Array的切片,原Array不变.
vara=[1,2,3,4,5];
a.slice(0,3);//Returns[1,2,3]
a.slice(3);//Returns[4,5]
a.slice(1,-1);//Returns[2,3,4],-1meansthelastindexofthearray
a.slice(-3,-2);//Returns[3],fromthethirdlastindextothesecondlastindex
6.splice向一个Array中添加或删除element.第一个参数表示位置,第二个参数表示删除长度,后面任意长的参数表示在1删除位置添加的elements.
vara=[1,2,3,4,5,6,7,8];
a.splice(4);//Returns[5,6,7,8];ais[1,2,3,4]
a.splice(1,2);//Returns[2,3];ais[1,4]
a.splice(1,1);//Returns[4];ais[1]
vara=[1,2,3,4,5];
a.splice(2,0,'a','b');//Returns[];ais[1,2,'a','b',3,4,5]
a.splice(2,2,[1,2],3);//Returns['a','b'];ais[1,2,[1,2],3,3,4,5]
7.push()andpop()向Array末尾添加或删除element
8.unshift()andshift()向Array的开头添加或删除eleme
9.用js实现时间控件、模态窗口、非空验证、非法字符验证。
10.用js实现主、二级页面刷新、传值以及实现页面跳转
6、jsp有哪些内置对象?
作用分别是什么?
JSP共有以下9种基本内置组件(可与ASP的6种内部组件相对应):
request用户端请求,此请求会包含来自GET/POST请求的参数
response网页传回用户端的回应
pageContext网页的属性是在这里管理
session与请求有关的会话期
applicationservlet正在执行的内容
out用来传送回应的输出
configservlet的构架部件
pageJSP网页本身
exception针对错误网页,未捕捉的例外
7、jsp有哪些动作?
作用分别是什么?
JSP共有以下6种基本动作
jsp:
include:
在页面被请求的时候引入一个文件。
jsp:
useBean:
寻找或者实例化一个JavaBean。
jsp:
setProperty:
设置JavaBean的属性。
jsp:
getProperty:
输出某个JavaBean的属性。
jsp:
forward:
把请求转到一个新的页面。
jsp:
plugin:
根据浏览器类型为Java插件生成OBJECT或EMBED标记
8、JSP中动态INCLUDE与静态INCLUDE的区别?
动态INCLUDE用jsp:
include动作实现
includepage="included.jsp"flush="true"/>它总是会检查所含文件中的变化,适合用于包含动态页面,并且可以带参数
静态INCLUDE用include伪码实现,定不会检查所含文件的变化,适用于包含静态页面
<%@includefile="included.htm"%>
9、两种跳转方式分别是什么?
有什么区别?
有两种,分别为:
includepage="included.jsp"flush="true">
forwardpage="nextpage.jsp"/>
前者页面不会转向include所指的页面,只是显示该页的结果,主页面还是原来的页面。
执行完后还会回来,相当于函数调用。
并且可以带参数.后者完全转向新页面,不会再回来。
相当于goto语句。
10、如何执行一个线程安全的JSP?
只需增加如下指令
<%@ page isThreadSafe="false" %>
11、JSP如何处理HTML FORM中的数据?
通过内置的request对象即可,如下:
<%
String item = request.getParameter("item");
int howMany = new Integer(request.getParameter("units")).intValue();
%>
12、在JSP如何包含一个静态文件?
静态包含如下:
<%@ include file="copyright.html" %>
动态包含如下:
include page="copyright.html" flush="true"/>
13、在JSP中如何使用注释?
主要有四中方法:
1。
<%-- 与 --%>
2。
//
3。
/**与**/
4。
--与-->
14、在JSP中如何执行浏览重定向?
使用如下方式即可:
response.sendRedirect("
tml");
也能物理地改变HTTP HEADER属性,如下:
<%
response.setStatus(HttpServletResponse.SC_MOVED_PERMANENTLY);
String newLocn="/newpath/index.html";
response.setHeader("Location",newLocn);
%>
15、如何防止在JSP或SERVLET中的输出不被BROWSER保存在CACHE中?
把如下脚本加入到JSP文件的开始即可:
<%
response.setHeader("Cache-Control","no-store"); //HTTP 1.1
response.setHeader("Pragma","no-cache"); //HTTP 1.0
response.setDateHeader ("Expires", 0); //prevents caching at the proxy server
%>
16、在JSP中如何设置COOKIE?
COOKIE是作为HTTP HEADER的一部分被发送的,如下方法即可设置:
<%
Cookie mycookie = new Cookie("aName","aValue");
response.addCookie(mycookie);
%>
17、在JSP中如何删除一个COOKIE?
<%
Cookie killMyCookie = new Cookie("mycookie", null);
killMyCookie.setMaxAge(0);
killMyCookie.setPath("/");
response.addCookie(killMyCookie);
%>
18、在一个JSP的请求处理中如何停止JSP的执行
如下例:
<%
if (request.getParameter("wen") !
= null) {
// do something
} else {
return;
}
%>
19、在JSP中如何定义方法
你可以定义方法,但是你不能直接访问JSP的内置对象,而是通过参数的方法传递。
如下:
<%!
public String howBadFrom(HttpServletRequest req) {
HttpSession ses = req.getSession();
...
return req.getRemoteHost();
}
%>
<%
out.print("in general,lao lee is not baddie ");
%>
<%= ho