前端JavaScript高级面试笔记
一、ES6
1、模块化
ES6通过export和import实现模块化
ES6的模块化的基本规则或特点， 欢迎补充：
1：每一个模块只加载一次， 每一个JS只执行一次， 如果下次再去加载同目录下同文件，直接从内存中读取。 一个模块就是一个单例，或者说就是一个对象；
2：每一个模块内声明的变量都是局部变量， 不会污染全局作用域；
3：模块内部的变量或者函数可以通过export导出；
4：一个模块可以导入别的模块
例子：
// util1.js
export default{
a: // export default
} // util2.js
export function fn1(){
console.log('fn1')
}
export function fn2(){
console.log('fn2')
} // index.js
import util from './util.js'
import {fn1,fn2} from './util2.js'
2、编译方法，把es6编译成es5
都是用的babel这个东西
第一种方法：babel（简单的直接用babel）
cmd安装babel-cli，用于在终端使用babel
npm install -g babel-cli
安装babel-core babel-preset-es2015 babel-preser-latest
npm install --save-dev babel-core babel-preset-es2015 babel-preset-latest
通过 babel --version来判断babel版本
想要编译某个js，可以执行下面的代码
babel index.js -o babel1.js
3、使用webpack进行编译
4、使用rollup编译
5、export和export default的区别
在一个文件中，export和import可以用多个
//demo1.js
export const str = 'hello world' export function f(a){
return a+
}
对应的导入方式
//demo2.js
import { str, f } from 'demo1' //也可以分开写两次，导入的时候带花括号
//demo1.js
export default const str = 'hello world'
对应的导入方式
//demo2.js
import str from 'demo1' //导入的时候没有花括号
export default本质上是输出一个叫default的变量
export default str = str编译以后是exports.default
export function ss() {
console.log('ss')
}
export function aa() {
console.log('aa')
}
编译以后是
exports.ss = ss;
exports.aa = aa;
二、class
对比下面俩组代码
function Ttest(x,y) {
this.x = x;
this.y = y;
}
Ttest.prototype.adds = function () {
return this.x + this.y
}
var m =new Ttest(,)
console.log(m.adds())
console.log('类型是什么：'+typeof Ttest)
console.log(Ttest === Ttest.prototype.constructor)
console.log(m.__proto__===Ttest.prototype)
class MathHandle{
constructor(x,y){
this.x=x;
this.y=y;
}
add(){
return this.x+this.y
}
}
console.log('类型是什么：'+typeof MathHandle)
console.log(MathHandle === MathHandle.prototype.constructor)
const m = new MathHandle(,);
console.log(m.add())
上面俩组的代码对比可以知道：class就是一个语法糖，本质还是function
ES6里面的class和js构造函数的区别？
三、promise
先来个例子，用callback实现
function LoadImg(src, callback, fail) {
var img = document.createElement('img')
img.onload = function () {
callback(img)
}
img.onerror = function () {
fail()
}
img.src = src
}
var src = ''
LoadImg(src,function (img) {
console.log(img.width)
},function () {
console.log('failed')
})
用promise实现
function LoadImg(src) {
const promise = new Promise(function (resolve, reject) {
var img = document.createElement('img')
img.onload = function () {
resolve(img)
}
img.onerror = function () {
reject()
}
img.src = src
})
return promise
}
var src = 'http://www.imooc.com/static/img/index/logo_new.png'
var result = LoadImg(src)
result.then(function (img) {
console.log(img.width)
},function () {
console.log('failed')
})
result.then(function (img) {
console.log(img.height)
})
Promise语法
四、箭头函数
看上面的例子：箭头函数是普通function的补充，不是所有地方都适用箭头函数，上面的例子告诉我们，箭头函数最大的意义是，this指向了函数体外面最近一层，普通函数指向的是window
五、单线程
单线程的解决方案之一：异步，但是它有个问题
jquery的deferred
http://www.runoob.com/jquery/misc-jquery-deferred.html
上面这俩种方式，要比常用的ajax好很多
当新加方法的时候，不用修改已有的方法
执行成功的时候，进入then，出现了错误，统一进入catch
例子：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1，minimum-scale=1,maximum-sacle=1，user-scalable=no">
</head>
<body>
<script type="text/javascript" src="./jquery-3.1.1.js"></script>
<script type="text/javascript">
function LoadImg(src) {
var promise = new Promise(function (resolve, reject) {
var img = document.createElement('img')
img.onload = function () {
resolve(img)
}
img.onerror = function () {
reject("图片加载失败")
}
img.src = src
})
return promise
}
var src = 'http://www.imooc.com/static/img/index/logo_new1.png'
var result = LoadImg(src)
result.then(function (img) {
console.log(, img.width)
return img
}).then(function (img) {
console.log(, img.height)
}).catch(function (ex) {
console.log(ex)
})
</script>
</body>
</html>
上面的解释：onerror里的错误，会进入到catch，这可以表明，使用catch的时候，就不需要在then写第二个参数了，只要出现错误，都会进入到catch里面
第一个result1执行完后，返回result2的promise实例，执行后面的then（如果有第三个，就在后面加一个）
实际效用：第一个请求获取的数据，作为第二个请求的参数
总结：
前端JavaScript高级面试笔记的更多相关文章
- 面试 11-00.JavaScript高级面试
11-00.JavaScript高级面试 #前言 一.基础知识: ES 6常用语法:class .module.Promise等 原型高级应用:结合 jQuery 和 zepto 源码 异步全面讲解: ...
- javascript高级编程笔记01(基本概念)
1.在html中使用JavaScript 1. <script> 元素 <script>定义了下列6个属性: async:可选,异步下载外部脚本文件. charset:可选, ...
- javascript高级编程笔记02(基本概念)
ParseInt()函数: 由于Number函数在转换字符串时比较复杂而且不合理,我们常常转换字符串都用parseInt函数, Parseint函数规则: 忽略字符串前面的空格,直到找到第一个非空格字 ...
- JavaScript高级程序设计笔记之面向对象
说起面向对象,大部分程序员首先会想到 类 .通过类可以创建许多具有共同属性以及方法的实例或者说对象.但是JavaScript并没有类的概念,而且在JavaScript中几乎一切皆对象,问题来了,Jav ...
- javascript高级程序设计--笔记01
概述 JavaScript的实现包含三个部分: 1 核心(ECMAScript) 提供核心语言功能 2 文档对象模型(DOM) 一套提供了访问以及操作网页内容的API 3 浏览器对象模型( ...
- javascript高级编程笔记05(面向对象)
面向对象设计 es中有两种属性:数据属性和访问器属性 数据属性: 数据属性包含一个数据值的位置,在这个位置可以读取和写入值,数据属性有4个描述其行为的特性 [[Configurable]]:表示能否通 ...
- javascript事件小结（事件处理程序方式）--javascript高级程序设计笔记
1.事件流:描述的是从页面中接收事件的顺序. 2.事件冒泡:IE的事件流叫做事件冒泡,即事件开始从具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上传播到不具体的节点(文档). 3.事件捕获 ...
- JavaScript高级程序设计笔记（一）
---恢复内容开始--- 前三章为基础知识,为了方便以后查看,所以比较啰嗦.这里对函数的基本操作没有记录. 1.JavaScript的实现 虽然 JavaScript 和 ECMAScript 通常都 ...
- JavaScript高级内容笔记：原型链、继承、执行上下文、作用域链、闭包
最近在系统的学习JS深层次内容,并稍微整理了一下,作为备忘和后期复习,这里分享给大家,希望对大家有所帮助.如有错误请留言指正,tks. 了解这些问题,我先一步步来看,先从稍微浅显内容说起,然后引出这些 ...
随机推荐
- 极简版 卸载 home 扩充 根分区--centos7 xfs 文件格式
1. 查看文件系统 df -Th 2. 关闭正常连接 /home的用户 fuser /home 3. 卸载 /home的挂载点 umount /home 4.删除home的lv 注意 lv的名称的写法 ...
- dotTrace 每行执行时间和执行次数
如果代码中出现效率问题,使用dotTrace来跟踪分析代码的效率问题还是很方便的.使用dotTrace不但可以看到每一个方法被调用的次数和总时间,而且可以引入源代码,查看源代码中每一行执行的次数和时间 ...
- 小程序开发 event对象中 target和currentTarget 属性的区别。
首先本质区别是: event.target返回触发事件的元素 event.currentTarget返回绑定事件的元素 p包含在div内 在outer上点击时,target跟currentTarget ...
- PSP（4.13——4.19）以及周记录
1.PSP 4.13 15:15 15:30 0 15 站立会议 A Y min 15:30 19:00 65 145 Account A Y min 21:15 23:00 15 90 博客 B Y ...
- 关于springmvc跨域
spingMVC 3.X跨域 关于跨域问题,主要用的比较多的是cros跨域. 详细介绍请看https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Acces ...
- IntelliJ IDEA之如何提交代码到SVN服务器
一.准备 参照<IntelliJ IDEA教程之如何配置SVN>这篇文章配置SVN插件.提交代码到SVN之前,记得要先创建版本库,请参照<<SVN如何建立版本库>> ...
- 【Java并发编程】之十六：深入Java内存模型——happen-before规则及其对DCL的分析（含代码）
转载请注明出处:http://blog.csdn.net/ns_code/article/details/17348313 happen-before规则介绍 Java语言中有一个"先行发生 ...
- c/c++ 函数说明以及技巧总结
1. memset函数: void *memset(void *s, int ch, size_t n); 函数解释:将s中当前位置后面的n个字节 (typedef unsigned int size ...
- hdwiki 部署
1.安装wamp 集成环境(部署过程出现的环境问题请搜索我的另外一篇文章 <wamp安装失败原因大全>)2.到 http://kaiyuan.hudong.com/download/ 下载 ...
- Problem A: Dreamweaver 解题报告
人生首道非传统题给了交互... 考试的时候花了半小时搞清楚了这东西是啥,然后打了10分的暴力...但并没有拿到分. 而且一直不会本地测试... 捣鼓捣鼓了好久,问了人才知道.. 我本地没装g++,下发 ...