- this指向
- 全局环境下，this就代表window对象。
- 对象环境指向对象。
var obj = {
name : "zhar",
say : function(){
console.log(this.name);//zhar
}
}
obj.say();
更深一层理解
var name = 'tom';
var obj = {
name : "zhar",
say : function(){
console.log(this.name);
}
}
var fun = obj.say;
fun();//输出 ?//tom-->fun定义在全局环境下，即window.fun()
//再次说明了this的指向是由运行时的执行环境来决定的
送命题
var name = 'tom';
var obj = {
name : "zhar",
say : function(){
return function(){
console.log(this.name);
}
}
}
obj.say()();//输出 ？//tom
- 构造函数内隐式this；
let f = new Fn(){
this.x = 1;
}
- 在 DOM 事件中使用 this，this 指向了触发事件的 DOM 元素本身
li.onclick = function(){
console.log(this.innerHTML);
}
- 改变this
call, apply, bind
call和apply的区别
- call可以传入多个参数；
fun.call(thisObj[,arg1[,arg2[,...]]])
- apply第二个参数为数组
fun.apply(obj,['one','two']);
送命题
function a (){console.log(this)};
a() // window
a.call({}) // {}
a.call(null) // window
a.call(undefined) // window
- 跨域
跨域是指从一个域名的网页去请求另一个域名的资源。但是一般情况下不能这么做，它是由浏览器的同源策略造成的，是浏览器对JavaScript施加的安全限制
同源策略：同源策略，它是由[Netscape]提出的一个著名的[安全策略]， 所谓同源是指，域名，协议，端口相同。
跨域解决方案
1、 通过jsonp跨域
2、 document.domain + iframe跨域
3、 location.hash + iframe
4、 window.name + iframe跨域
5、 postMessage跨域
6、 跨域资源共享（CORS）
7、 nginx代理跨域
8、 nodejs中间件代理跨域
9、 WebSocket协议跨域
- web前端性能优化，
1. 使用CDN
2. 减少外部http协议
3. 使用预获取
4. 压缩HTML、CSS和JavaScript
5. 优化图片
6. Ajax请求方式\
7. 使用浏览器缓存
8. 服务端启用压缩
9. CSS放在页面最上面、JavaScript放在页面最下面
10. 减少对DOM的操作
11. 服务端启用压缩
预获取
顾名思义预获取就是在真正有需要去请求之前就获取一些必要的数据和资源，以提升用户的浏览体验。预获取主要有三大方式：
1.链接预先获取
2.DNS预先获取
3.预先渲染
根据你想要使用的预先获取形式，你只需在网站 HTML 中的链接属性上增加 rel="prefetch",rel="dns-prefetch"，或者 rel="prerender" 标记。
- Ajax请求方式*
POST的请求，是不可以在客户端缓存的，每次请求都需要发送给服务器进行处理，每次都会返回状态码200。（可以在服务器端对数据进行缓存，以便提高处理速度）
GET的请求，是可以（而且默认）在客户端进行缓存的，除非指定了不同的地址，否则同一个地址的AJAX请求，不会重复在服务器执行，而是返回304。所以在进行Ajax请求的时候，可以选择尽量使用get方法，这样可以使用客户端的缓存，提高请求速度。
减少HTTP请求
减少HTTP的主要手段是合并CSS、合并JavaScript、合并图片
使用浏览器缓存
通过设置HTTP头中的Cache-Control和Expires属性，可设定浏览器缓存，缓存时间可以是数天，甚至是数月。
使用浏览器缓存策略的网站在更新静态资源时，应采用分批次更新的方法，比如需要更新10个图标文件，不宜把10个文件一次全部更新，而应该一个文件一个文件逐步更新，并有一定的间隔时间，以免用户浏览器突然大量缓存失效，集中更新缓存，造成服务器负载骤增，网络堵塞的情况。
服务端启用压缩
5.常见 http状态码
200：请求成功
302：重定向到临时的URL
304 （未修改） 自从上次请求后，请求的网页未修改过。 服务器返回此响应时，不会返回网页内容。
401 （未授权） 请求要求身份验证。 对于需要登录的网页，服务器可能返回此响应
403 （禁止） 服务器拒绝请求。
404 （未找到） 服务器找不到请求的网页。
502 （错误网关） 服务器作为网关或代理，从上游服务器收到无效响应。
504 （网关超时） 服务器作为网关或代理，但是没有及时从上游服务器收到请求。
505 （HTTP 版本不受支持） 服务器不支持请求中所用的 HTTP 协议版本。
- vue中v-model语法糖的使用
在自定义组件内定义prop.value
监听value变化，出发this.$emit("input", value)；
- vuex模块化
state是局部的， 需要通过this.
store.state.carGetter可以拿到
更改限定局部命名空间
// namespaced 属性，限定命名空间
export default {
namespaced:true,
state,
mutations,
actions,
getters
}
- var和let和const的区别
我发现这个也是死亡题目，好多人回答不出来
var
默认值为undefined
函数作用域
可以变量提升
let
let 是块作用域
不可变量提升, 否则会直接提示 ReferenceErro
不可重复声明
不可与var const一起重复声明
const
不可以重复声明
不可以重新赋值
可以修改const所声明的对象的内部的属性值。
可以修改const所声明的数组的其中项的值。
- scss与sass
SCSS 是 Sass 3 引入新的语法，其语法完全兼容 CSS3，
sass
#sidebar
width: 30%
background-color: #faa
scss
#sidebar {
width: 30%;
background-color: #faa;
}
10 async await
await后面跟着的方法， 自动返回promise；
可以在这个方法内部返回primise， 通过resolve返回数据，这样就自动返回数据，而不是promise了；
可以通过try{}catch(err){};进行抛出错误；
- 微信小程序尺寸单位
| 设备 | rpx换算px (屏幕宽度/750) | px换算rpx (750/屏幕宽度) |
|---|---|---|
| iPhone5 | 1rpx = 0.42px | 1px = 2.34rpx |
| iPhone6 | 1rpx = 0.5px | 1px = 2rpx |
| iPhone6s | 1rpx = 0.552px | 1px = 1.81rpx |
- vue的双向数据绑定原理
具体详情看这里
实现数据绑定的做法有大致如下几种：
发布者-订阅者模式（backbone.js）
脏值检查（angular.js）
数据劫持（vue.js）
vue.js 则是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。
要实现mvvm的双向绑定，就必须要实现以下几点：
1、实现一个数据监听器Observer，能够对数据对象的所有属性进行监听，如有变动可拿到最新值并通知订阅者
2、实现一个指令解析器Compile，对每个元素节点的指令进行扫描和解析，根据指令模板替换数据，以及绑定相应的更新函数
3、实现一个Watcher，作为连接Observer和Compile的桥梁，能够订阅并收到每个属性变动的通知，执行指令绑定的相应回调函数，从而更新视图
实现MVVM
MVVM作为数据绑定的入口，整合Observer、Compile和Watcher三者，通过Observer来监听自己的model数据变化，通过Compile来解析编译模板指令，最终利用Watcher搭起Observer和Compile之间的通信桥梁，达到数据变化 -> 视图更新；视图交互变化(input) -> 数据model变更的双向绑定效果。
mvvm流程图
网友评论