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

     

  • 相关阅读:
    vue实现导行吸顶功能
    JavaScript 事件委托、冒泡和捕获之间有什么区别?
    JavaScript使用reduce动态修改对象的属性名
    vue使用轮播图插件vueawesomeswiper
    研发了 5 年的时序数据库,到底要解决什么问题?
    苏州大学:从 PostgreSQL 到 TDengine
    如何通过DBeaver 连接 TDengine?
    美的数字化平台 iBUILDING 背后的技术选型
    DBA的一天是怎样的?运维工程师告诉你答案
    玉溪卷烟厂通过正确选择时序数据库 轻松应对超万亿行数据
  • 原文地址:https://www.cnblogs.com/wujixing/p/5445669.html
Copyright © 2020-2023  润新知