变量
知识点
1、变量类型
值类型
undefined string number boolean
引用类型
Object Function Array
typeof运算符
undefined string number boolean object function
只能区分值类型，引用类型无法区分（function除外）
2、变量计算
强制类型转换
字符串拼接
== 运算符（慎用）
null == undefined
if语句
题目
1、JS中typeof能得到的类型
undefined string number boolean object function
2、何时使用 === 和 ==
（除了下面的情况，其他都用===）
var obj = {}; if(obj.a == null ){} //判断一个对象是否存在某个属性时
function(a, b){ if(a == null){}} //判断一个函数是否传递某个参数时
//a== null 相当于 a === null 或 a === undefined
3、JS中内置函数
Object Array Boolean Number String Function Date RegExp Error Math
4、JS按存储方式区分变量类型
值类型
引用类型
5、如何理解JSON
JSON只不过是一个JS对象而已
JSON.stringify()
JSON.parse()
原型和原型链
知识点
创建对象的几种方法
1、对象字面量
2、构造函数
3、Object.create()
原型对象
有一个constructor属性，这个属性指向你声明的构造函数
原型对象的方法被实例化的对象所共有的
构造函数
任何函数都可以当做构造函数，只要用new操作
用new来创建实例对象
函数都有一个prototype属性，声明函数的时候自动增加prototype属性，这个属性会赋值一个空对象，也就是原型对象
实例
有一个proto属性，这个属性指向原型对象
原型链
从实例对象，通过proto属性，一层层网上找它的原型对象，一直到Object.prototype，Object.prototype是原型链的顶端
image.png
instanceof的原理
判断实例对象的proto属性是不是跟构造函数的prototype的属性同个引用
在原型链上的构造函数都是实例化对象的构造函数
怎么确定实例是哪个构造函数直接生成的实例
new运算符
示例
原理
题目
1、如何准确判断一个变量是数组类型
2、写一个原型链继承的例子
3、描述new一个对象的过程
4、zepto源码中如何使用原型链
1、ES6
问题
ES6模块化如何使用，开发环境如何打包
- 模块化的基本语法
impor export （注意有无default） - 开发环境配置
babel编译Es6语法，模块化可用webpack和rollup - 关于JS众多模块化标准
没有模块化
AMD成为标准，require.js 和CMD
前端打包工具，使得nodejs模块化可用被使用
Es6出现，想统一现在所有模块化标准
Class和普通构造函数有什么区别
class在语法上更加贴合面向对象的写法
class实现继承更加易读，更易理解
本质还是语法糖，使用prototype
Promise的基本使用和原理
new promise实例，而且要return
new promise要传入函数，函数有resolve,reject两个参数
成功执行resolve，失败执行reject
then监听结果
总结一下ES6其他常用功能
let /const
多行字符串/模板变量
解构赋值
块级作用域
函数默认参数
箭头函数 解决this指针问题
2、原型
原型的实际应用
描述一下jQuery如何使用原型
描述一下zepto如何使用原型
再结合自己的项目经验
如何体现原型的扩展性
总结jQuery和zepto原型的使用
插件机制
为什么要把原型方法放在$.fn
因为要扩展插件
好处：
只有 $会暴露在window全局变量
将插件扩展统一到$.fn这一接口，方便使用
jquery deferred
jquery 1.5的变化
无法改变js异步和单线程的本质
只能从写法上杜绝callback这种形式
它是一种语法糖形式，但是解耦了代码
很好的体现：开放封闭原则（对扩展开放，对修改封闭）
使用jQuery deferred
dtd的API可分成两类，用意不同
第一类： dtd.resolve dtd.reject
第二类： dtd.then dtd.done dtd.fail
这两类应该分开，否则后果很严重
初步引入Promise概念
返回dtd.promise(),这样外部就不能修改
promise和deferred的区别
promise只能被动监听，不能主动修改
deferred可以主动修改和被动监听，不安全
想要深入理解它，就需要知道它的前世今生
promise
如何捕获异常（Error和reject都要）
规定： then只接受一个参数，最后统一用catch捕获异常
多个串联，链式执行的好处
Promise.all 和Promise.race
关于标准的闲谈
任何技术推广使用都需要一套标准来支撑
如 HTML js css HTTP等，无规矩不成方圆
任何不符合标准的东西，终将被用户抛弃
不要挑战标准，不要自造标准
promise 标准 状态变化
三种状态 pending fulfilled rejected
状态不可逆
promise 标准 then
Promise 实例必须实现then方法
then()必须可以接收两个函数作为参数
then()返回的必须是一个promise实例
问题：
说一下jQuery和使用框架的区别
数据和视图的分离，解耦（开放封闭原则）
以数据驱动视图，只关心数据变化，DOM操作被封装
说一下对MVVM的理解
MVVM model view viewModel
三者之间的联系以及如何对应到代码
viewmodel的理解，联系view和model
Vue三要素
响应式：Vue如何监听到数据的变化
模板引擎：Vue的模板如何被解析，指令如何处理
渲染：Vue的模板如何被渲染成HTML，以及渲染过程
Vue如何实现响应式
Object.defineProperty
将data的属性代理到vm上
Vue如何解析模板
-
模板是什么
本质：字符串
有逻辑，如v-if, v-for等
与HTML格式很像，但有很大区别
最终要转换为HTML来显示
模板最终必须要转换成JS代码，因为：
有逻辑，必须用js才能实现
转换为HTML渲染页面，必须用js实现
因此，模板最终要转换成一个js函数（render函数） -
render函数
- with的用法，尽量不要使用
with(obj){
alert(name) //name是obj的属性
}
- 模板中所有信息都包含在render函数中
v-model如何实现 有get和set
v-on:click如何实现 监听onclick事件
v-for如何实现 转成遍历列表的方法
- render函数和vdom
- updateComponent实现了vdom 的patch
- 页面首次渲染执行updateComponent
- data每次修改属性，执行updatecomponent
snabbdom的h函数 跟 vm._c函数基本一致
var vnode = h('ul#list',{}, [
h('li.item',{},'Item 1'),
h('li.item',{},'Item 2'),
])
snabbdom patch函数两个用法
patch(container, vnode) //将vnode渲染到一个dom容器里面
patch(vnode, newVnode) //用新的vnode和旧的vnode对比，然后将新的vnode渲染
模板渲染总结
- 模板： 字符串，有逻辑，嵌入js变量
- 模板必须转为js代码
- render函数是什么样子的
- render函数执行是返回vnode
- updateComponent
Vue的整个实现流程
第一步：解析模板成render函数
- with的用法
- 模板中的所有信息被render函数包含
- 模板中的data属性，都变成了js变量
- 模板中的v-model, v-for, v-if都变成了js逻辑
- render函数返回了vnode
第二步：响应式开始监听
- Object.defineProperty
- 将data的属性 代理到vm上
第三步：首次渲染，显示页面，绑定依赖
- 初次渲染，执行updateComponent, 执行vm._render()
- 执行render函数，会访问到data的属性
- 会被响应式的get方法监听到
- 执行updateComponent，会都到vdom的patch方法
- patch将vnode渲染成dom,初次渲染完成
为啥要监听get，而不是set
- data中有很多属性，有些被用到，有些不被用到
- 被用到的走get，不被用到的不走get
- 未走到get，set的时候我们也不必关心
- 避免不必要的重复渲染
第四步：data属性变化，触发rerender
- 修改属性，被响应式的set监听到
- set执行updateComponent
网友评论