发表于： 2019-11-27 23:42:00
1 1125
今天完成的事：
复习
明天计划的事：
复习
遇到的问题：
暂无
收获：
JS作用域及作用域链
作用域
在JavaScript中，作用域分为 全局作用域 和 函数作用域
全局作用域
代码在程序的任何地方都能被访问，window 对象的内置属性都拥有全局作用域
函数作用域
在固定的代码片段才能被访问
例子：
作用域有上下级关系，上下级关系的确定就看函数是在哪个作用域下创建的。如上，fn作用域下创建了bar函数，那么“fn作用域”就是“bar作用域”的上级。
作用域最大的用处就是隔离变量，不同作用域下同名变量不会有冲突。
变量取值：到创建 这个变量 的函数的作用域中取值
作用域链
一般情况下，变量取值到 创建 这个变量 的函数的作用域中取值。
但是如果在当前作用域中没有查到值，就会向上级作用域去查，直到查到全局作用域，这么一个查找过程形成的链条就叫做作用域链
原型和原型链
原型和原型链的概念
每个对象都会在其内部初始化一个属性，就是prototype(原型)，当我们访问一个对象的属性时，如果这个对象内部不存在这个属性，那么他就会去prototype里找这个属性，这个prototype又会有自己的prototype，于是就这样一直找下去
原型和原型链的关系
instance.constructor.prototype = instance.__proto__
复制代码
原型和原型链的特点
JavaScript对象是通过引用来传递的，我们创建的每个新对象实体中并没有一份属于自己的原型副本。当我们修改原型时，与之相关的对象也会继承这一改变
当我们需要一个属性的时，Javascript引擎会先看当前对象中是否有这个属性， 如果没有的
就会查找他的Prototype对象是否有这个属性，如此递推下去，一直检索到 Object 内建对象
组件化和模块化
组件化
为什么要组件化开发
有时候页面代码量太大，逻辑太多或者同一个功能组件在许多页面均有使用，维护起来相当复杂，这个时候，就需要组件化开发来进行功能拆分、组件封装，已达到组件通用性，增强代码可读性，维护成本也能大大降低
组件化开发的优点
很大程度上降低系统各个功能的耦合性，并且提高了功能内部的聚合性。这对前端工程化及降低代码的维护来说，是有很大的好处的，耦合性的降低，提高了系统的伸展性，降低了开发的复杂度，提升开发效率，降低开发成本
组件化开发的原则
- 专一
- 可配置性
- 标准性
- 复用性
- 可维护性
模块化
为什么要模块化
早期的javascript版本没有块级作用域、没有类、没有包、也没有模块，这样会带来一些问题，如复用、依赖、冲突、代码组织混乱等，随着前端的膨胀，模块化显得非常迫切
模块化的好处
- 避免变量污染，命名冲突
- 提高代码复用率
- 提高了可维护性
- 方便依赖关系管理
模块化的几种方法
- 函数封装
var myModule = {
var1: 1,
var2: 2,
fn1: function(){
},
fn2: function(){
}
}
总结：这样避免了变量污染，只要保证模块名唯一即可，同时同一模块内的成员也有了关系
缺陷：外部可以睡意修改内部成员，这样就会产生意外的安全问题
- 立即执行函数表达式(IIFE)
var myModule = (function(){
var var1 = 1;
var var2 = 2;
function fn1(){
}
function fn2(){
}
return {
fn1: fn1,
fn2: fn2
};
})();
总结：这样在模块外部无法修改我们没有暴露出来的变量、函数
缺点：功能相对较弱，封装过程增加了工作量，仍会导致命名空间污染可能、闭包是有成本的
图片的预加载和懒加载
- 预加载：提前加载图片，当用户需要查看时可直接从本地缓存中渲染
- 懒加载：懒加载的主要目的是作为服务器前端的优化，减少请求数或延迟请求数
两种技术的本质：两者的行为是相反的，一个是提前加载，一个是迟缓甚至不加载。预加载则会增加服务器前端压力，懒加载对服务器有一定的缓解压力作用。
mouseover和mouseenter的区别
mouseover：当鼠标移入元素或其子元素都会触发事件，所以有一个重复触发，冒泡的过程。对应的移除事件是mouseout
mouseenter：当鼠标移除元素本身（不包含元素的子元素）会触发事件，也就是不会冒泡，对应的移除事件是mouseleave
解决异步回调地狱
promise、generator、async/await
对This对象的理解
this总是指向函数的直接调用者（而非间接调用者）
如果有new关键字，this指向new出来的那个对象
在事件中，this指向触发这个事件的对象，特殊的是，IE中的attachEvent中的this总是指向全局对象Window
返回列表
评论