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可以识别内置对象类型，不能识别原始类型，可以识别自定义对象类型

posted @ 2016-04-29 11:23 wujixing909 阅读(225) 评论(0) 收藏举报

刷新页面返回顶部

js面试题

公告