javaScript常见理论面试题

古城微笑少年丶 2023-03-01 12:48 31阅读 0赞

# javaScript常见理论面试题 #

##### 什么是JavaScript？ #####

*  基于对象和事件驱动并具有相对安全性的客户端脚本语言。

##### JavaScript与ECMAScript的关系？ #####

*  JavaScript是ECMAScript的表现，ECMAScript是JavaScript的规范。

##### 变量的命名规则？ #####

*  以数字、字母、下划线、&字符组成（不以字数开）；
 *  不使用关键字、保留字；
 *  建议命名见名知义，小驼峰命名方式。

##### window.onload的作用？ #####

*  window.onload是等文档和资源都加载完成后调用的事件或函数，保证js获取元素 的时候，已经加载。

##### js数据类型？ #####

*  基本数据类型：Number（数值）；String（字符串）；Boolean（布尔）；Undefined（未定义）；Unll（空）；
 *  复杂数据类型：Object（对象）；Array（数组）；FUnction（函数）Date；

##### null和undefined的区别？ #####

*  null：访问一个不存在对象返回的值，表示空对象
 *  undefined：访问一个声明完没有赋值的变量返回的值，表示空变量

##### 运算符的种类？ #####

*  算术运算符，赋值运算符，比较运算符，逻辑运算符，三目运算符

##### var a = 10;var b = a++; a、b最后的结果是？ #####

*  a=11; b=10;

##### “==”与“===”的区别？ #####

*  == 判断值相等，判断的过程中会隐式转换为number类型进行比较 “10”==10 true
 *  === 值、数据类型全等，严格相等，不会发生类型转换，“10”===10 false

##### console.log(0.1+0.2 == 0.3)的输出结果及分析。 #####

*  false，有些小数在运算的过程中会出现偏差，因此最好不要用小数作为判断条件

##### NaN会在什么样的情况下出现呢？列举出现这种情况的代码。 #####

*  NaN：not a number
 *  自己定义
 *  运算过程中出现错误，原本应该是数字的地方出现一些不能转换为数字的值 10+“s” Number(“s”)

##### 列举三种强制类型转换和2种隐式类型转换。 #####

*  Number( )；String( )；Boolean( )；做减、乘 、除等运算都可能转换。

##### document.write()与innerHTML的区别？ #####

*  document.write： 操作body的内容不会覆盖之前已经存在的body中的内容，document.write添加的内容会叠加 innerHTML： 操作所有闭合标签的内容 会覆盖之前的所有内容

##### 谈谈对this对象的理解？ #####

*  this存储任何地方，不同环境代表不同的含义，取决于调用时的环境。
 *  A.事件处理函数中的this—触发事件的对象 document.onclick = function()\{ alert（this） \}
 *  B.普通函数中的this—window function sum（）\{ alert(this)\} sum()

##### 说说你对作用域链的理解？ #####

*  作用域链是js中的一种查找机制，从当前作用域查找，当前作用域没有往上一级作用域查找，一直到最外层，如果都找不到则是is not define

##### 下面代码执行完以后的结果为？ #####

var x = 1,
        y = z = 0;
    function add(n) { 
        n = n + 1;
    };
    y = add(x);
    function add(n) { 
        n = n + 3;
    };
    z = add(x);
    console.log(x, y, z);  //结果：1,undfined,undfined

##### 请解释变量提升？ #####

*  浏览器解析js代码至少会经过两个过程，预解析和逐步执行
 *  预解析：找东西var，function，如果找到var，会在内存中存储变量没有值，function则会存储整个函数
 *  逐步执行：逐行执行代码 console.log(a); //undefined

##### 函数声明和函数表达式声明的区别？ #####

*  区别：函数声明在函数定义的前面或后面调用均可，而函数表达式，只能在函数定义的后面调用

//函数声明：
    function  fn(){ 
    };
    //函数表达式:
    var fn = function(){ 
    };

##### JavaScript两种变量范围有什么不同？ #####

*  Js中两种变量，全局变量和局部变量
 *  全局变量：函数外声明，在任何地方都能被修改和访问，会一直存储在内存中
 *  局部变量：函数内声明，只能在函数内部使用，除了函数\{\}就会被销毁

##### 定时器的分类？他们的区别及用法是什么？ #####

*  setInterval：间歇执行；setTimeout：延迟执行
 *  setInterval(函数，时间) 语法：setInterval(function()\{\},1000); 时间单位ms，每隔特定时间执行多次函数，一般用于倒计时，轮播图等
 *  setTimeout(函数，时间) 语法：setTimeout(function()\{\},1000); 时间单位ms，隔特定时间执行一次函数， 一般用于广告，广告弹出等

##### js有哪些对象？ #####

*  原生对象：Object，Function ,Array, String, Boolean, Number,RegExp,Date,Error
 *  内置对象：Global(全局 window,documet), Math
 *  宿主对象：DOM BOM
 *  全局对象：window

##### 数组方法pop() push() unshift() shift()？ #####

*  push()：从数组尾部增加；pop()：从数组尾部删除；
 *  unshift()：从数组头部增加；shift()：从数组头部删除；

##### split() join() 的区别？ #####

*  split()：将字符串拆分成数组；
 *  join() ：将数组项拼接成字符串；

##### DOM怎样添加、移除、移动、复制、创建和查找节点 #####

*  获取子节点: 父节点.children ; 父节点.childNodes
 *  获取父节点: 子节点.parentNode ; 子节点.offsetParent
 *  创建: document.createElement(‘标签名’) ; document.createTextNode(‘文本内容’)
 *  添加: 父节点.appendChild(子节点) ; 父节点.insertBefore(newChild，refChild)
 *  复制: 被复制的节点.cloneNode(true)
 *  删除： 父节点.removeChild（子节点）
 *  替换 父节点.replaceChild（newChild，refChild）

##### 什么是window对象? 什么是document对象? #####

*  window是js中最大的对象，表示窗口，包含document document文档对象，表示HTML

##### offsetWidth、clientWidth、scrollTop的区别？ #####

*  offsetWidth：占位宽，内容有效宽 + padding（填白）+border（边框）
 *  clientWidth：可视宽，内容有效宽 + padding（填白）
 *  scrollTop：页面被卷去的高

##### 如何获取url地址中搜索内容？ #####

*  window.location.search

##### 循环中break 与 continue的区别 #####

*  break: 结束循环，本次后面的代码也不再执行
 *  continue：结束本次循环，本次后面的代码也不再执行。下次的循环继续

##### 事件、IE与火狐的事件机制有什么区别？ #####

*  IE的事件流是冒泡流，而火狐同时支持冒泡流和捕获流。

##### 如何阻止冒泡？ #####

*  ev.stopPropagation ? ev.stopPropagation() : ev.cancelBubble = true;

##### 事件绑定和普通事件有什么区别。 #####

*  标签.事件：如果给同一个元素添加同一个事件，后面的会覆盖前面
 *  事件绑定：可以给同一个元素添加同一个事件，不会被覆盖

##### 如何用原生js给元素绑定两个click事件？ #####

*  元素.addEventListener(‘click’,fun1);
 *  元素.attachEvent(‘click’,fun1)； IE10及以下兼容；

##### 解释一下事件流？ #####

*  事件捕获阶段：当事件发生的时候，将事件从window依次往子元素传递
 *  确定目标阶段：确定事件目标
 *  事件冒泡阶段：事件目标开始处理事件，处理完以后会将事件依次传递给父元素，一直到window
 *  事件都是在事件冒泡处理，ie只有冒泡

##### 事件委托（事件代理）是什么。 #####

*  将所有的操作交给父元素，将事件添加给父元素，父元素接受到这个事件，找到具体的子元素，让子元素处理事件

//如：
    ul.onclick = function (ev) { 
        var ev = ev || event;   //做事件的兼容
        var target = ev.target || ev.srcElement;   //做事件委托的兼容
         if (target.nodeName === 'li') { 
             target.style.backgroundColor = 'red';
         }
    }

##### 给10000个li添加点击事件。 #####

for(var i=0;i<li.length;i++){ 
        li[i].oncnlick=function(){ 
        }
    }

##### 拖拽效果中有几种事件？ #####

*  按下onmousedown，拖拽onmousemove，弹起onmouseup

##### 什么是回调函数？ #####

*  某个动作或事件做完以后执行的函数

##### 使用正则表达式验证邮箱。 #####

*  ^\\w+@\[a-z0-9\]+(.\[a-z\]+)\{1,3\}$

##### 使用正则去除字符串首尾空格 #####

function (str) { 
        var re = /(^\s*)|(\s*$)/g;
        return str.replace(re, '');
    }

##### 请用js去除字符串空格 var str = “ fdf er re545 6565 2fdfd ” #####

var str = “ fdf er re545 6565 2fdfd ”
    var reg = /\s/g; 
    consloe.log(str.replace(reg,''));

##### 判断字符串是否是这样组成的。第一个字符必须是字母，后面可以是字母、数字、下划线，总长度5-20。 #####

var str='a531791740941fgs3124'
    var reg = /^[a-z]\w{4,19}$/ig;
    if (reg.test(str)) { 
        console.log('是')
    } else { 
        console.log('否')
    }

##### new操作符具体干了什么呢? #####

*  先创建了一个新的空对象。
 *  然后让这个空对象的proto指向函数的原型prototype。
 *  将对象作为函数的this传进去，如果return 出来东西是对象的话就直接返回 return 的内容，没有的话就返回创建的这个对象。

##### call()、apply()和bind ()的区别和作用？ #####

*  都是用来改变this的指向，在传值的过程中会有些区别
 *  call（this的指向，参数1，参数2…） 会调用函数
 *  apply（this的指向,\[参数1，参数2…\]） 会调用函数
 *  bind （this的指向，参数1，参数2…） 只修改this指向，不调用函数。

##### JavaScript对象的几种创建方式？ #####

*  字面量创建、实例创建、工厂模式创建、构造函数创建、原型创建、混合模式创建；

//1.字面量创建 缺点：代码冗余，单个对象创建
    var obj = { 
        name:"web",
        eat:function(){ }
    }
    
    //2.实例创建 缺点：代码冗余，适合单个对象创建
    var obj = new Object();
    obj.name = "web";
    obj.eat = function(){ }
    
    //3.工厂模式创建 缺点：识别不明确
    function createObj(name){ 
        var obj = new Object();
        obj.name = name;
        obj.eat = function(){ }
        return obj
    }
    createObj(“web”);
    
    //4.构造函数创建 缺点：浪费内存
    function Student(name){ 
        //new Object
        this.name = name;
        this.eat = function(){ }
    }
    new Student(name)
     
    //5.原型创建 缺点：不能传参
    //原型对象：prototype ，构造函数中，共享的一块区域
    //原型属性：__proto__,实例对象中，指向原型对象
    function Student(){ }
    Student.prototype.name = "web";
    Student.prototype.eat = function(){ }
    new Student();
    
    //6.混合创建，构造函数(可变的)+原型(共享，不变的)
    function Student(name){ 
        this.name = name;
    }
    Student.prototype.eat = function(){ 
    
    }

##### JavaScript对象的几种继承方式？ #####

*  原型链继承、对象冒充继承、组合继承、寄生组合继承

##### JavaScript原型，原型链 ？ #####

*  原型：js每声明一个function，都有prototype原型，prototype原型是函数的一个默认属性，在函数的创建过程中由js编译器自动添加。也就是说：当生产一个function对象的时候，就有一个原型prototype。原型中存储对象共享的属性和方法。
 *  原型链： 当你定义一个函数对象的时候，其内部就有这样一个链表关系。声明foo对象，自带了\_proto\_的属性，而这个属性指向了prototype，从而实现对象的扩展（例如继承等操作）

##### 以new方式来调用构造函数实际上会经历以下 4 个步骤 #####

*  创建一个新对象
 *  将构造函数的作用域赋给新对象（因此 this 就指向了这个新对象）
 *  执行构造函数中的代码（为这个新对象添加属性）
 *  返回新对象

##### 构造函数的特点： #####

*  构造函数名首字母大写(为了区分普通函数，不是必须，是约定)
 *  构造函数方法没有显示的创建对象(new Object())
 *  直接将属性和方法赋值给this对象
 *  没有return语句，不需要返回对象
 *  通过构造函数创建对象，必须使用new运算符(直接调用跟普通函数一样)

##### 小贤有一条可爱的狗(Dog),它的叫声很好听(wow),每次看到主人的时候就会乖乖叫一声(yelp),从这段描述可以得到以下对象： function Dog()\{ this.wow = function()\{ alert(‘wow’); \} this.yelp = function()\{ this.wow(); \} \} 小芒和小贤一样原来也有一条可爱的狗，可是突然有一点疯了(MadDog),一看到人就会每隔半秒叫一声(wow)地不停叫唤(yelp)。请根据描述，按示例形式用代码来实现。(继承，原型，setInterval) #####

##### 什么是闭包，闭包有什么作用，说说你对闭包的理解。 #####

*  闭包：就是能够读取其他函数内部变量的函数（函数里面套函数，内部函数访问外部函数变量）， 在本质上，闭包是将函数内部和函数外部连接起来的桥梁。
 *  作用：闭包中使用的变量会一直存储在内存中，类似全局变量 ，避免全局污染，可以解决全局变量的问题。

function fun() { 
        var c = 10;
        return function () { 
            console.log(c++);
        }
    }
    var fn = fun();
    fn();//10 第一次调用，未运算
    fn();//11

##### 用闭包方式完成下面代码的修改，使得属性user，id外界不可见 #####

User = function () {  }
    User.prototype = { 
        id: '',
        name: '',
        getId: function () {  return this.id },
        setId: function () {  this.id = id },
        getName: function () {  return this.name },
        setName: function () {  this.name = name }
    }
    //直接声明两个变量，这两个变量的作用域只是在这个函数体之中所以外界是不能访问的 
    var User = function () { 
        var id = "id";
        var name = "name";
        this.__proto__ = { 
            getId: function () { 
                return id;
            },
            setId: function (_id) { 
                id = _id;
            },
            getName: function () { 
                return name;
            },
            setName: function (_name) { 
                name = _name;
            }
        }
    }
    var u = new User();
    u.setId("007");
    u.setName("tom");
    console.log(u.name, u.getName()); // undefined tom

##### 创建ajax的过程。 #####

*  var xhr = new XMLHttpRequest();

##### ajax的执行过程 #####

##### ajax请求的时候get 和post方式的区别，什么时候用post。 #####

*  GET请求会将参数跟在URL后进行传递，而POST请求则是作为HTTP消息的实体内容发送给WEB服务器。当然在Ajax请求中，这种区别对用户是不可见的
 *  GET传输数据容量小，不安全，POST传输数据内容大，更加安全； 当向服务器发生一些数据的时候选择post比较安全

##### ajax请求时，如何解释json数据。 #####

*  如果是字符串形式的json：eval("("+ajax.response+")")
 *  如果是本地的json文件：JSON.parse(data)

##### 同步和异步的区别? #####

*  异步：客户端与服务器请求数据的过程中，可以做其他的事情
 *  同步：客户端与服务器请求数据的过程中，不能做其他的事情

##### 常见的http状态码？ #####

*  2XX系列：代表请求已成功被服务器接收、理解、并接受。这系列中最常见的有200、201状态码。
 *  4XX系列：表示请求错误。代表了客户端看起来可能发生了错误，妨碍了服务器的处理。常见有：401、404状态码。

##### js哪些操作会造成内存泄露？ #####

*  意外的全局变量引起的内存泄露
 *  被遗忘的定时器或者回调
 *  闭包引起的内存泄漏

##### $(document).ready() 方法和window.onload 有什么区别？ #####

*  window.onload会覆盖之前的 ; $(document).ready() 的区别，不会覆盖，会叠加。
 *  window.onload等文档和资源都加载完成以后调用 ； $(document).ready()只要文档加载完成以后就会调用
 *  $(document).ready() ：绑定一个在DOM文档载入完成后执行的函数；，而window.onload是网站资源加载完毕后再进行加载的函数。

##### jQuery 的属性拷贝(extend)的实现原理是什么，如何实现深拷贝？ #####

*  在默认情况下，通过$.extend()合并操作不是递归的（而是浅拷贝）;
 *  如果第一个对象的属性本身是一个对象或数组，那么它将完全用第二个对象相同的key重写一个属性。这些值不会被合并。然而，如果将true作为该函数的第一个参数，那么会在对象上进行递归的合并（深拷贝）。
 *  浅拷贝（false 默认）：如果第二个参数对象有的属性第一个参数对象也有，那么不会进行相同参数内部的比较，直接将第一个对象的相同参数覆盖。
 *  深拷贝（true）：如果第二个参数对象有的属性第一个参数对象也有，还要继续在这个相同的参数向下一层找，比较相同参数的对象中是否还有不一样的属性，如果有，将其继承到第一个对象，如果没有，则覆盖。

#####  ( ) . a t t r 与 ().attr与 ().attr与().prop()的区别? #####

*  对于HTML元素本身就带有的固有属性，在处理时，使用prop方法。
 *  对于HTML元素我们自己自定义的DOM属性，在处理时，使用attr方法。
 *  $("\#chk1").prop(“checked”) == false
 *  $("\#chk2").prop(“checked”) == true
 *  如果上面使用attr方法，则会出现： $("\#chk1").attr(“checked”) == undefined

##### jQuery怎么解决跨域问题？ #####

*  在jQuery中，只需配置一个dataType:‘jsonp’，就可以发起一个跨域请求

##### ajax如何实现异步定时5秒刷新？ #####

setInterval(function () { 
        host = window.location.host
        $.post("http://" + host + "/index.php/Article/cpMes/value/1");
    }, 5000);

##### 页面编码和被请求的资源编码如果不一致如何处理？ #####

*  比如：http://www.yyy.com/a.html 中嵌入了一个http://www.xxx.com/test.js
 *  a.html 的编码是gbk或gb2312的。 而引入的js编码为utf-8的
 *  那就需要在引入的时候 同理，如果你的页面是utf-8的，引入的js是gbk的，那么就需要加上charset=“gbk”

##### Ajax的缺点？ #####

*  ajax不支持浏览器back按钮。
 *  安全问题 AJAX暴露了与服务器交互的细节。
 *  对搜索引擎的支持比较弱。
 *  破坏了程序的异常机制。

##### jquery中 . g e t ( ) 提 交 和 .get()提交和 .get()提交和.post()提交有区别吗？ #####

*  get一般用来进行查询操作，url地址有长度限制，请求的参数都暴露在url地址当中，如果传递中文参数，需要自己进行编码操作，安全性较低。
 *  post请求方式主要用来提交数据，没有数据长度的限制，提交的数据内容存在于http请求体中，数据不会暴漏在url地址中。

##### jquery.extend 与 jquery.fn.extend的区别？ #####

*  jquery.extend(object); 为扩展jQuery类本身.为类添加新的方法。
 *  jquery.fn.extend(object); 给jQuery对象添加方法。