JS常见面试题
一js基础
1，this关键字的作用:***
普通函数 window
构造函数 当前构造函数创建的对象在new这个构造函数的时候 会在内存中创建一个对象，此时会让this指向刚创建好的这个对象
方法中的this 方法所属的对象，谁调用这个方法this就指向谁
函数处理函数中的this 事件源 谁调用的该事件 this就指向谁
2，call和apply的区别
功能都一样，都是将当前函数作为指定对象的方法执行，即函数中的this是指对象
call（this.Obj, arg1,arg2……）//将所有参数一个个的传递进去
apply(this ,[argArray]) //将所有参数放在数组中传入
3.worker继承Person的方法
//使用构造函数+原型的组合模式
function Person(age,name){
this.age = age;
this.name = name
}
Person.prototype.show = function(){
alert('父级方法')
}
function Worker(age,name,job){
Person.applay(this,arguments);
this.job = job
}
Worker.prototype = new Person()
var Person = new Person(14,'张三')
var worker = new Worrker(25,'里斯','程序员')
4.var let const的区别
var 定义的变量，没有快的概念，可以跨块访问，不能跨函数访问
let定义的变量，只能在块级作用域里访问，不能跨块访问，也不能跨函数访问
const用来定义常量，使用时必须初始化（即必须赋值），只能在块作用域里访问，而且不能修改
cookie4k 5m
5.如何阻止事件冒泡和事件默认行为
//阻止事件冒泡
if(typeof ev.stopPropagation == ‘function’){
ev.stopPropagtion()
}else{//非标准
window.evnet.cancelBubble = true
}
//阻止事件默认行为
return false
6.javascript的内置对象和宿主对象
内置对象为Object,Array,Function,DateMath 等
宿主为 浏览器自带的window等
7.“”和"="的不同
前者会自动转换类型后者不会
8.浏览器的同源策略
一段Ajax只能读取来自同一来源的窗口和文档的属性，这里的同意来源是指主机名，协议和端口号的组合
9.解释
var a = null;
alert(typeof a)//object
null是只有一个值的数据类型 这个值就是null，表示一个空指针对象，所以用typeof检测会返回object
10. JavaScript的数据类型都有什么？
基本数据类型：String,boolean,Number,Undefined, Null
引用数据类型：Object, Array, Function
原始数据类型：Symbol
那么问题来了，如何判断某变量是否为数组数据类型？
方法一.判断其是否具有“数组性质”，如slice()方法。可自己给该变量定义slice方法，故有时会失效
方法二.obj instanceof Array 在某些IE版本中不正确
null,array,object返回的都是‘object’
11. 输出今天的日期，以YYYY-MM-DD的方式，比如今天是2014年9月26日，则输出2014-09-26
var d = new Date();// 获取年，getFullYear()返回4位的数字var year = d.getFullYear();// 获取月，月份比较特殊，0是1月，11是12月var month = d.getMonth() + 1;// 变成两位month = month < 10 ? ‘0’ + month : month;// 获取日var day = d.getDate();day = day < 10 ? ‘0’ + day : day;alert(year + ‘-’ + month + ‘-’ + day);
12. 将字符串”{KaTeX parse error: Expected 'EOF', got '}' at position 3: id}̲</td><td>{name}”中的{KaTeX parse error: Expected 'EOF', got '}' at position 3: id}̲替换成10，{name}替换成Tony （使用正则表达式）
"<tr><td>{$id}</td><td>{$id}_{$name}</td></tr>".replace(/{\$id}/g, '10').replace(/{\$name}/g, 'Tony');
13.var的变量提升底层原理是什么
JS引擎的工作方式：
先解析代码 获取所有声明的变量
然后再运行
14.箭头函数的特点
相比普通函数更简洁的语法
本身没有this，捕获其所在上下文（作用域）的this值，作为自己的 this 值
不能使用new
不绑定arguments，用rest参数…解决
使用call()和apply()调用
箭头函数没有原型属性
不能简单返回对象字面量
箭头函数不能当做Generator函数,不能使用yield关键字
15. 为了保证页面输出安全，我们经常需要对一些特殊的字符进行转义，请写一个函数escapeHtml，将<, >, &, “进行转义
// let str = '>&&'
// function escapeHtml(str) {
// return str.replace(/[<>&“]/g, match => {
// switch (match) {
// case '>':
// return '>';
// case '<':
// return '<';
// case '&':
// return '&';
// case '\'':
// return '"';
// }
// })
// }
// console.log(escapeHtml(str));
16. foo = foo||bar ，这行代码是什么意思？为什么要这样写？
如果foo存在，值不变，否则把bar的值赋给foo。
短路表达式：作为”&&”和”||”操作符的操作数表达式，这些表达式在进行求值时，只要最终的结果已经可以确定是真或假，求值过程便告终止，这称之为短路求值。
17 阻止事件冒泡和默认行为
冒泡 :
e.stopPropagation()
e.cancelBubble = true;
默认行为：
e.preventDefault()
e.returnValue = false
18.列举浏览器对象模型BOM里常用的至少4个对象，并列举window对象的常用方法至少5个
对象：window, document, location, screen, history, navigator
方法：alert(), confirm(), prompt(), open(), close()
19. Javascript如何实现继承？
构造继承法
2.原型继承法
3.实例继承法
20，
// push()：向数组的最后面插入一个或多个元素，返回结果为该数组新的长度。
// pop()：删除数组中的最后一个元素，返回结果为被删除的元素。
// unshift()：在数组最前面插入一个或多个元素，返回结果为该数组新的长度。插入元素后，其他元素的索引会依次调整。
// shift()：删除数组中的第一个元素，返回结果为被删除的元素。
// 添加返回长度
// 删除返回删除的元素
21，1. 判断一个字符串中出现次数最多的字符，统计这个次数
var str = 'asdfssaaasasasasaa';
var json = {};
for (var i = 0; i < str.length; i++) {
if(!json[str.charAt(i)]){
json[str.charAt(i)] = 1;
}else{
json[str.charAt(i)]++;
}
};
var iMax = 0;
var iIndex = '';
for(var i in json){
if(json[i]>iMax){
iMax = json[i];
iIndex = i;
}
}
alert('出现次数最多的是:'+iIndex+'出现'+iMax+'次');
22 闭包是什么，有什么特性，对页面有什么影响
当内部函数使用了外部函数的局部变量时, 产生的一个对象(包含了所有使用了的变量)
作用: 在函数执行完后, 局部变量还会存在
function outer(){
var num = 1;
function inner(){
var n = 2;
alert(n + num);
}
return inner;
}
var r = outer();
r();
23 生成5个不同的随机数；
//思路：5个不同的数，每生成一次就和前面的所有数字相比较，如果有相同的，则放弃当前生成的数字！
var num1 = [];
for(var i = 0; i < 5; i++){
num1[i] = Math.floor(Math.random()*10) + 1; //范围是 [1, 10]
for(var j = 0; j < i; j++){
if(num1[i] == num1[j]){
i--;
}
}
}
26.什么是js的严格模式
- 消除Javascript语法的一些不合理、不严谨之处，减少一些怪异行为;
- 消除代码运行的一些不安全之处，保证代码运行的安全；
- 提高编译器效率，增加运行速度；
- 为未来新版本的Javascript做好铺垫。
"严格模式"体现了Javascript更合理、更安全、更严谨的发展方向，IE 10在内的主流浏览器
“use strict”;//是进入严格模式的标志(老版本的浏览器会把它当作一行普通字符串，加以忽略。)
27 浏览器标准模式和怪异模式之间的区别是什么？
所谓的标准模式是指，浏览器按W3C标准解析执行代码；怪异模式则是使用浏览器自己的方式解析执行代码，因为不同浏览器解析执行的方式不一样，所以我们称之为怪异模式
28你如何优化自己的代码？
代码重用
避免全局变量（命名空间。封闭空间。模块化mvc）
拆分函数避免过于臃肿
注释
29 请尽可能详尽的解释ajax的工作原理
Ajax的工作原理相当于在用户和服务器之间加了—个中间层，使用户操作与服务器响应异步化。这样把以前的一些服务器负担的工作转嫁到客户端，利于客户端闲置的处理能力来处理，减轻服务器和带宽的负担，从而达到节约ISP的空间及带宽租用成本的目的。
简单来说通过XmlHttpRequest对象来向服务器发异步请求，从服务器获得数据，然后用javascript来操作DOM而更新页面。这其中最关键的一步就是从服务器获得请求数据。要清楚这个过程和原理，我们必须对 XMLHttpRequest有所了解。
二：Vue面试题
30：谈下你对Vuex的认识
vuex是什么，干嘛的，他的组成部分，每一部分是干嘛的，有啥有特点，你在项目中哪些数据让他管理 ，怎么管理，遇到过什么问题没 怎么处理的
他就是状态管理模式，
场景有：单页应用中，组件之间的状态、音乐播放、登录状态、加入购物车
state 进行组件共享数据的集中存储{}
getters 原理 commputed 用于返回最新的数据值 {计算属性写法}
mutations 唯一一个能够修改state里面数据的 地方（函数），不能做异步
actions 处理异步请求 异步调用mutations 函数
modules 模块 当数据比较多的情况下 而且数据之前灭有什么关系 用模块划分，每一个模块对象都包含以上4部分
commit 同步调用actions方法
dispatch 异步调用actions方法
31：防抖节流
防抖：函数触发n秒后执行，如果在n秒之内触发 则重新计时
// 假防抖
let timer = null
function fd() {
clearTimeout(timer)
timer = setTimeout(show, 1000)
}
function show() {
console.log(input1.value);
}
input1.oninput = function () {
fd(show)
}
// 真防抖
function fd2(fn, delay) {
let timer2 = null
console.log(timer2)
function a() {
console.log(timer2)
clearTimeout(timer2)
timer2 = setTimeout(fn, delay)
}
return a
}
function show2() {
console.log(input2.value);
}
input2.oninput = fd2(show2, 500)
节流：在n秒内只触发一次函数，n秒内多次触发只有一次生效
input3.oninput = jl()
function jl() {
let timer3 = null;
return function () {
if (!timer3) {
timer3 = setTimeout(() => {
show3()
timer3 = null;
}, 1000)
}
}
}
function show3() {
console.log(input3.value);
}