Web 前端开发 让前端飞

前端总结

2020-02-14  本文已影响0人  大话程序

闭包以及应用场景

面试题目：

Excuse me？这个前端面试在搞事！

function a() {
  for (var i = 0; i < 8; i++) {
    setTimeout(function() {
      console.log(i, 1000 * i)
    },
    1000 * i)
  }
}
// 结果：每隔一秒打印 8,8000，共打印8次

function b() {
  for (var i = 0; i < 8; i++) { (function() {
      setTimeout(function() {
        console.log(i, 1000 * i)
      },
      1000 * i)
    })();
  }
}
// 结果：每隔一秒打印 8,8000，共打印8次

function c() {
  for (var i = 0; i < 8; i++) {
    setTimeout((function(i) {
      console.log(i, 1000 * i)
    })(i), 1000 * i)
  }
}
// 结果：没有延迟，一次打印全部。自执行函数，传入变量参数。闭包。
> 0, 0
> 1, 1000
> 2, 2000
> 3, 3000
> 4, 4000
> 5, 5000
> 6, 6000
> 7, 7000

function d(){
    for (let i = 0; i < 8; i++) {
    setTimeout(function() {
      console.log(i, 1000 * i)
    },
    1000 * i)
  }
}
// 结果：每隔一秒，打印一次结果。使用块级作用域。闭包。
> 0, 0
> 1, 1000
> 2, 2000
> 3, 3000
> 4, 4000
> 5, 5000
> 6, 6000
> 7, 7000

function f() {
  for (var i = 0; i < 8; i++) { 
    (function(i) {
      setTimeout(function() {
        console.log(i, 1000 * i);
      },
      i * 1000);
    })(i);
  }
}　
// 结果：每隔一秒，打印一次结果。闭包。
> 0, 0
> 1, 1000
> 2, 2000
> 3, 3000
> 4, 4000
> 5, 5000
> 6, 6000
> 7, 7000

function test() {
  for (var i = 0; i < 8; i++) {
   (function() {
    setTimeout(function() {
      console.log(i);
    }, i * 1000);
  })(i);
 }
}
// 结果：每个一秒，打印一次结果。结果都是8,8000

this的指向

面试题目

this指向和闭包结合的问题

　　var name = "The Window";
　　var object = {
　　　　name : "My Object",
　　　　getNameFunc : function(){
　　　　　　return function(){
　　　　　　　　return this.name;
　　　　　　};
　　　　}
　　};
　　console.log(object.getNameFunc()());
// 结果： The Window

　　var name = "The Window";
　　var object = {
　　　　name : "My Object",
　　　　getNameFunc : function(){
　　　　　　var that = this;
　　　　　　return function(){
　　　　　　　　return that.name;
　　　　　　};
　　　　}
　　};
　　console.log(object.getNameFunc()());
// 结果：My Object

Vue中的什么情况下this指向Vue实例

判断浏览器和系统的信息

使用 navigator 对象

输入网址到加载完页面的过程

Vue的渲染过程

Cookie、Session、LocalStorage、SessionStorage的区别

同源策略和跨域解决方案

正则表达式

px、em、rem

CSS3新增的特性

Vue项目部署

使用webpack构建工具，npm script脚本将项目打包成资源文件，部署到 nginx 服务器上

MVVM

Vue 是 MVVM 架构，ViewModel 是 Model 和 View 之间的一个桥，相当于一个连接器，内部实现事件监听和双向数据绑定

Vue的生命周期

所有的声明周期钩子自动绑定 this 上下文到实例中，因此你可以访问数据，对属性和方法进行运算

Vue中组件通信：父组件 -> 子组件、子组件 -> 父组件、兄弟组件

介绍Vuex、使用场景、弊端和如何解决

封装一个组件的思路

盒模型

CSS定位

浮动布局、清除浮动

for...in、for...of、foreach、map有哪些区别

Vue和JQuery有哪些区别

ES6

class语法糖

class Demo{}; 
var demo = new Demo()
// 结果
typeof   Demo   // "function"
Demo === Demo.prototype.constructor  // true
demo.__proto__ === Demo.prototype // true

深拷贝、浅拷贝以及算法，什么时候用

浅拷贝与深拷贝

引用数据类型和基本类型数据

判断js类型，优缺点

Promise对象

async/await

扩展运算符，mapActions使用扩展运算符

Vue Router 传递参数

flex布局

单页面应用和SEO

原型规则

JS模块化

36、项目性能优化
37、Android和IOS端前端兼容性问题
38、项目难点
39、Vue适合做pc端网站么？优缺点
41、前后端分离如何渲染页面及数据
7、XSS攻击
9、WebGL
14、排序算法
43、有没有关注最新的es特性
44、最近读的一本书，有什么感想
45、webpack的深入配置
46、Vue的双向数据绑定和微信小程序的双向数据绑定有什么异同
24、原生JS
28、高阶函数
29、map函数
30、封装一个V-model组件

上一篇 下一篇

猜你喜欢

热点阅读