面试题集
简述JS中this的指向和如何改变它的指向
javascript中,this是动态绑定的,它可以是全局对象、当前对象或者任意对象,这完全取决于函数的调用方式,
this永远指向的是最后调用它的对象,也就是看它执行的时候是谁调用的。
改变this方法:方法call(), apply(), bind()
1、aa.call(Person, 4, 5); //this指向Person
2、aa.apply(Person, [4, 5]); //this指向Person
3、aa.bind(Person, 4, 5); //只是更改了this指向,没有输出
aa.bind(Person, 4, 5)(); //this指向Person
原型链中a.b=2,a.b=3,到底是几呢。在实例本身找到的话就不会向后面找了。
在访问一个实例的属性的时候,现在实例本身中找,如果没找到就去它的原型中找,还没找到就再往上找,直到找到。这就是原型链。
构造函数,通过new一个实例出来,实例里面有_proto_,_proto_里面有构造器(constructor)和_proto_,
prototype是函数才有的属性,_proto_是每个对象都有的属性。
var A = function(){};
var a = new A();
console.log(a.__proto__.__proto__.__proto__); //null
H5 的一些新特性
新增了一些语义化标签:header、footer、nav、aside、article、audio、video等
媒体查询 @media 可以做出响应式页面
audio video 音频视频标签
Canvas标签:canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成
拖放:<img draggable="true"> 拖动什么 - ondragstart 和 setData() 放到何处 - ondragover
新表单元素的引入(智能表单,对自动输入的内容做基本的校验):input:type=number(数字)、email(邮箱)、url(地址)、range(滑块)、date(日期)等,placeholder(占位符)、require(必填项)。
本地存储:webstorage:sessionStorage和localStorage
sessionStorage(会话期间有效,关闭浏览器窗口就失效,容量5M,不同页面或标签页面间无法共享,适用于敏感账号一次性登录)
localStorage(本地存储永久有效,多窗口共享,容量5M,用于长期登录+判断用户是否已登录+适合长期保存在本地的数据)
获取地理位置的api:Window.navigator.geolocation.getCurrentPosition(success,error)
CSS3
box-sizing:content-box 宽度和高度分别应用到元素的内容框。
box-sizing: border-box 为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。
圆角和阴影,渐变
transform转换和变形和动画 @keyframes
@font-face 字体
数组去重或者是排序
js中数组去重:
var arr = [1,3,1,4,45,8,85,4,8,5,5];
Array.unique = function() {
var newArr = [];
for(var i = 0; i < this.length; i++) {
//若在新数组中查不到arr[i]元素就向新数组中存储arr[i],
if(newArr.indexOf(this[i]) == -1) {
newArr.push(this[i]);
}
}
return newArr;
}
console.log(arr.unique());
排序:
var arr = [10, 20, 1, 2];
arr.sort(function(a,b){
return a-b;
})
console.log(arr); //[1, 2, 10, 20]
闭包是怎么样的,
当function里嵌套function时,内部的function可以访问外部function里的变量。
会一层一层的往外访问。
js变量提升是什么:
变量提升:函数声明和变量声明总是会被解释器悄悄地被"提升"到其作用域的最顶部。
JavaScript 中,函数及变量的声明都将被提升到函数的最顶部。函数声明会比变量声明更提前
JavaScript 中,变量可以在使用后声明,也就是变量可以先使用再声明。
JavaScript 只有声明的变量会提升,初始化的不会。
https://blog.csdn.net/amaoagou_0124/article/details/79559401
ES6用哪些,
1、let和const:使用let来声明一个值会被改变的变量,而使用const来声明一个值不会被改变的变量,也可以称之为常量。
2、可省略 :function,更简便,
3、箭头函数中,它没有自己的this,函数体内的this对象,就是定义时所在的对象,而不是使用时所在的对象。
4、模板字符串:是为了解决使用+号拼接字符串的不便利而出现的。 使用 `` 将整个字符串包裹起来,而在其中使用 ${} 来包裹一个变量或者一个表达式。
5、在ES6中用...来表示展开运算符,它可以将数组方法或者对象进行展开。例如:
const arr1 = [1, 2, 3];
const arr2 = [...arr1, 10, 20, 30];
这样,arr2 就变成了[1, 2, 3, 10, 20, 30];
Promise
前后端通信用的什么
axios,get、post方法,传入请求地址,参数,成功和失败返回什么。
axios.post('../data/a2.php', {
name:'tom',
age:33,
id:'wodo id shi 222'
})
.then(function(res){
self.userList=res.data;
})
.catch(function(res){
console.log(res);
});
实现ajax的基本步骤和原理
原理:
Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发异步请求,从服务器获得数据,然后用javascript来操作DOM而更新页面。
实现步骤:
(1)创建XMLHttpRequest对象,也就是创建一个异步调用对象.
(2)创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息.
(3)设置响应HTTP请求状态变化的函数.
(4)发送HTTP请求.
(5)获取异步调用返回的数据.
(6)使用JavaScript和DOM实现局部刷新.
数据双向绑定原理和实现
v-model,原理就是利用了 Object.defineProperty() 这个方法重新定义了对象获取属性值(get)和设置属性值(set)的操作来实现的。
之前项目有哪些需要优化和安全
1、减少http请求,将一个页面涉及到的所有零星图片或者图标都包含到一张大图里面,这样就只需要加载这个一个图片,而不是很多个图片了
2、降低图片的大小,压缩图片
3、图片延迟加载(懒惰加载)或者是分页加载,
4、html语义化,增强代码可读性和便于搜索引擎的搜索,seo。
项目遇到什么难题
状态的管理
项目中遇到问题如何解决
项目是如何进行的,分配任务什么的
插槽和isGirl
flex有用吗
box-sizing,一般什么是时候用
缺角的矩形和三角形
css样式优先级和两个类一起用哪个生效
事件委托的概念
事件委托就是利用事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件。
https://www.cnblogs.com/liugang-vip/p/5616484.html
兼容性:
Event对象提供了一个属性叫target,可以返回事件的目标节点,我们称为事件源
标准中:ev.target
IE中:event.srcElement
跳转(Forward)和重定向(Redirect)
跨域解决
简单的跨域请求jsonp即可,复杂的cors,窗口之间JS跨域postMessage,开发环境下接口跨域用nginx反向代理或node中间件比较方便。
JSONP:利用script标签可跨域的特点,在跨域脚本中可以直接回调当前脚本的函数。
CORS:服务器设置HTTP响应头中Access-Control-Allow-Origin值为 * ,解除跨域限制。
普通跨域请求:只服务端设置header的Access-Control-Allow-Origin为 * ,前端无须设置,
若要带cookie请求:前后端都需要设置。
前端:vue框架中 axios设置:axios.defaults.withCredentials = true
跨域后台设置
res.writeHead(200, {
'Access-Control-Allow-Credentials': 'true', // 后端允许发送Cookie
'Access-Control-Allow-Origin': 'http://www.domain1.com', // 允许访问的域(协议+域名+端口) /*
Git 常用命令详解
git pull:拉取远程仓库
git commit:提交当前工作空间的修改内容
git push:推送远程仓库,将本地commit的代码更新到远程版本库中
git log:查看历史日志
git revert:还原一个版本的修改,必须提供一个具体的Git版本号
git如何处理版本冲突和新建合并分支
处理冲突:
先把云上的pull下来,然后在本地合并修改之后,再commit,再push到云上。
创建合并分支:
git branch xxx (创建分支)
git checkout xxx (检出)
git merge (合并分支)
webpack作用
主要有编译,打包,模块化管理,压缩css,js,图片等
cookie、sessionSttorage、localStory区别
数据存储大小
cookie:4kb
webStorge:5mb
数据存储有效期限
cookie:根据自己的设置时间
sessionStorage:关闭窗口后失效
localStorage:永久有效除非js删除或者浏览器删除
作用域
cookie和localStorage是在同源窗口,同一个浏览器共享的,sessionStorage只在同一个标签页共享。
路由的跳转方式:
路由的传值:
组件间的传值
1、父传子:
2、子传父:
3、兄弟家组件传值:
作用域链:
div垂直水平居中
position:absolute
top:50%
left:50%
transform:translate(-50%,-50%)
清除浮动