js面试题
1. 截取字符串abcdefg的efg
alert('abcdefg'.substring(4));
2. 写出3个使用this的典型应用
事件： 如onclick this->发生事件的对象
构造函数 this->new 出来的object
call/apply 改变this
3. JavaScript中如何检测一个变量是一个String类型？请写出函数实现
typeof(obj) == 'string'
obj.constructor == String;
4. 请说出三种减低页面加载时间的方法
1、压缩css、js文件
2、合并js、css文件，减少http请求
3、外部js、css文件放在最底下
4、减少dom操作，尽可能用变量替代不必要的dom操作
5. 什么是FOUC？你如何来避免FOUC？
由于css引入使用了@import 或者存在多个style标签以及css文件在页面底部引入使得css文件加载在html之后导致页面闪烁、花屏
用link加载css文件，放在head标签里面
6. 文档类型的作用是什么？你知道多少种文档类型？
影响浏览器对html代码的编译渲染
html2.0
xHtml
html5
7. 请解释什么是Javascript的模块模式，并举出实用实例。
js模块化mvc（数据层、表现层、控制层） seajs 命名空间
8. 如何组织自己的代码？是使用模块模式，还是使用经典继承的方法？
对内：模块模式
对外：继承
9. 你如何优化自己的代码？
代码重用 避免全局变量（命名空间，封闭空间，模块化mvc..）拆分函数避免函数过于臃肿
10. 12.请尽可能详尽的解释AJAX的工作原理。
创建ajax对象（XMLHttpRequest/ActiveXObject(Microsoft.XMLHttp)）
判断数据传输方式(GET/POST)
打开链接 open()
发送 send()
当ajax对象完成第四步（onreadystatechange）数据接收完成，判断http响应状态（status）200-300之间或者304（缓存）执行回调函数
11. js的继承模式: call()
基类:
function classA(sColor)
{
this.color = sColor;
this.sayColor = function(){
alert(this.color);
}
}
子类:
function classB(sColor,sName)
{
//call()方法是与经典的“对象冒充”方法最相似的方法，它的第一个参数是用作this的对象，其他参数都直接传递给函数自身.
classA.call(this,sColor);
this.name = sName;
this.sayName = function(){
alert(this.name);
}
}
使用:
var obj = new classB('blue','gaoyong');
obj.sayName();
obj.sayColor();
12.form中的input有哪些类型？
text:文本框
password:密码框
radio:单选按钮
checkbox:复选框
file:文件选择域
hidden:隐藏域
button:按钮
reset:重置按钮
submit:表单提交按钮
image:图片按钮,类似submit可以为按钮添加图片...
13 列举javaScript的3种主要数据类型，2种复合数据类型和2种特殊数据类型。
主要数据类型：string, boolean, number
复合数据类型：function, object
特殊数据类型: Null 空对象 Undefined 未定义
14. undefined 和null 的区别和注意点
1、如果用 “==” 进行比较，他们是相等的，因为比较的是值
2、区分他们有两种方法（他们的核心都是比较他们的 数据类型）
1）使用typeof 将他们区分开 , typeof(null)=object
2）使用全等“===” ：比较的是 值和 数据类型，只有全都相同 才返回 true
alert(undefined == null); //true alert(typeof undefined == typeof null); //false alert(undefined === null); //true
14. js中对象继承的方法: prototype, 构造函数, .call , apply实现继承
prototype:
<SPAN style="BACKGROUND-COLOR: #ffffff"><SPAN style="FONT-SIZE: 18px"><html>
<body>
<script type="text/javascript">
function Person(name,age){
this.name=name;
this.age=age;
}
Person.prototype.sayHello=function(){
alert("使用原型得到Name："+this.name);
}
var per=new Person("马小倩",21);
per.sayHello(); //输出：使用原型得到Name:马小倩
function Student(){}
Student.prototype=new Person("洪如彤",21);
var stu=new Student();
Student.prototype.grade=5;
Student.prototype.intr=function(){
alert(this.grade);
}
stu.sayHello();//输出：使用原型得到Name:洪如彤
stu.intr();//输出：5
</script>
</body>
</html></SPAN></SPAN>
构造函数:
<SPAN style="FONT-SIZE: 18px"><html>
<body>
<script type="text/javascript">
function Parent(name){
this.name=name;
this.sayParent=function(){
alert("Parent:"+this.name);
}
}
function Child(name,age){
this.tempMethod=Parent;
this.tempMethod(name);
this.age=age;
this.sayChild=function(){
alert("Child:"+this.name+"age:"+this.age);
}
}
var parent=new Parent("江剑臣");
parent.sayParent(); //输出：“Parent:江剑臣”
var child=new Child("李鸣",24); //输出：“Child:李鸣 age:24”
child.sayChild();
</script>
</body>
</html></SPAN>
call , apply实现继承
<SPAN style="FONT-SIZE: 18px"><html>
<body>
<script type="text/javascript">
function Person(name,age,love){
this.name=name;
this.age=age;
this.love=love;
this.say=function say(){
alert("姓名："+name);
}
}
//call方式
function student(name,age){
Person.call(this,name,age);
}
//apply方式
function teacher(name,love){
Person.apply(this,[name,love]);
//Person.apply(this,arguments); //跟上句一样的效果，arguments
}
//call与aplly的异同：
//1,第一个参数this都一样,指当前对象
//2,第二个参数不一样：call的是一个个的参数列表；apply的是一个数组（arguments也可以）
var per=new Person("武凤楼",25,"魏荧屏"); //输出：“武凤楼”
per.say();
var stu=new student("曹玉",18);//输出：“曹玉”
stu.say();
var tea=new teacher("秦杰",16);//输出：“秦杰”
tea.say();
</script>
</body>
</html></SPAN>
15 浏览器的对象模型
window,方法: alert, prompt, confirm, open, close,
document方法: write,
history,方法, back, forward, go
location:方法 href
navigator,navigator.cookieEnabled：该属性表示是否启用cookie
screen,screen.width/screen.height：表示显示器的分辨率（总的宽度，高度）
16. 超链接的属性target取值: _blank, _parent, _self, _top
17. js的常用对象: String, Math, Date和Array对象
18. .innerHTML，innerText，outerHTML，innerText的区别
举个例子来说吧。
<div>
<span>内容</span>
</div>
使用这几个来获取上面div的内容的话，区别如下：
innerHTML: <span>内容</span>，带有html标签
innerText: 内容 不带html标签
outerHTML: <div><span>内容</span></div>
outerText: 获取元素跟innterText是一样的。
19 form中的input可以设置为readonly和disable，请问2者有什么区别？
readonly不可编辑，但可以选择和复制；值可以传递到后台
disabled不能编辑，不能复制，不能选择；值不可以传递到后台
20.js中的3种弹出式消息提醒（警告窗口，确认窗口，信息输入窗口）的命令式什么？
alert
confirm
prompt
20. JS最经典的全局变量和局部变量的问题:
100 10 100
var a = 10;
2 function test(){
3 a = 100;
4 console.log(a);
5 console.log(this.a);
6 var a;
7 console.log(a);
8 }
9 test();
结论, js执行前对所有生命进行分析, 第6行声明了局部变量, 所以函数内部的a都指向这个变量, 所以先输出100.
this.a指向函数的调用者, 即window, 所以显示10
第三个输出局部变量100
undefined 10
1 var a = 100;
2 function test(){
3 console.log(a);
4 var a = 10;
5 console.log(a);
6 }
7 test();
第4行, 局部变量只解析声明, 不解析赋值, 所以第三行局部变量的值是undefined
下面赋值了局部变量,所以10
100 10 10
1 var a = 100;
2 function test(){
3 console.log(a);
4 a = 10;
5 console.log(a);
6 }
7 test();
8 console.log(a);
var声明的是局部变量 , 第4行是全局变量, 外面赋值100,所以显示100
第二个, 全局变量改成10, 所以10,
第三个, 全局变量a的值必须是10
21. JS的类型识别: 4种：typeof、Object.prototype.toString、constructor和instanceof
typeof可以识别标准类型（Null除外），不能识别具体的对象类型（Function除外）
Object.prototype.toString可以识别标准类型以及内置对象类型，不能识别自定义类型
constructor是对象原型上面的一个属性，它指向构造器本身，constructor可以识别标准类型（Undefined/Null除外），可以识别内置对象类型，可以识别自定义对象类型
instanceof可以识别内置对象类型，不能识别原始类型，可以识别自定义对象类型
