读书笔记 on Xinyu's Blog

第四章混合对象"类"

Thu, 29 Dec 2016 00:00:00 +0800

类理论

类/继承描述了一种代码组织形式，类和继承是对真实世界中事物的抽象和建模。

类意味着复制，传统的类被实例化时，它的行为会被复制到实例中。类被继承时，行为也会被复制到子类中

“类设计模式”

类其实是一种软件设计模式，是一种可选的代码抽象。

JavaScript中的"类"

JavaScript中并没有真正的类，只有近似类的语法, 因为JavaScript并不会像类那样自动创建对象的副本。

第三章对象

Tue, 27 Dec 2016 00:00:00 +0800

语法

对象有两种定义形式：声明形式和构造形式

声明形式:

1

 var obj = {}

构造形式:

1

 var obj = new Object()

类型

在JavaScript中共有6种基本类型（现在是7种）

string
number
boolean
null
undefined
object

还有一种symbol类型

简单基本类型并不是对象，虽然typeof null === 'object'，但是这个语言的一个bug

第二章this全面解析

Thu, 22 Dec 2016 15:00:00 +0800

绑定规则

this的绑定规则总结起来总共有四种：

默认绑定
隐式绑定
显式绑定
new绑定

默认绑定

这条规则是无法应用其它绑定时的默认规则，思考以下代码：

1
2
3
4
5
6


 function foo() {
 console.log(this.a)
 }

 var a = 2
 foo() // 2

第一章关于this

Thu, 22 Dec 2016 14:00:00 +0800

为什么要用this

this保存着上下文对象，避免显式地传递上下文对象

this到底是什么

this是在运行时绑定的，并不是在编写时绑定的，它的的上下文取决于函数调用时的各种条件，this的绑定和函数声明的位置没有任何关系，只取决于函数的调用方式。

第五章作用域闭包

Thu, 22 Dec 2016 08:00:00 +0800

实质问题, 闭包的定义

当函数访问并记住所在的词法作用域时，就产生了闭包，即使函数是在当前词法作用域之外执行。

(个人理解)闭包并没有什么神奇的，闭包是词法作用域的特性，函数能够保存它本身的词法作用域的变量是肯定的，即使这个函数嵌套在另一个函数里面也不例外。

循环和闭包

闭包用来保存循环变量的值，每一次循环都创建一个副本。如下代码：

1
2
3
4
5
6
7


 for(var i=1; i<=5; i++) {
 (function(j)
 setTimeout(function timer(){
 console.log(j)
 })
 {})(i)
 }

模块

可以利用闭包去构建模块，封装私有属性和方法，然后暴露给外部方案修改内部的属性。

第四章提升

Wed, 21 Dec 2016 15:00:00 +0800

什么是提升

所有的声明（变量或者函数声明）会被移动到各自作用域的最顶端，这个过程被称作"提升"，提升的过程是发生在代码被执行之前的编译阶段，无论作用域的声明出现在什么地方，都将在代码被执行之前首先处理。

var a = 2 问题

1
2
3


 a = 2
 var a
 console.log(a) // 2

可以看到，编译时变量a被提升，此处打印出2

另一个例子

1
2


 console.log(a) // undefined
 var a = 2

以上代码等价于：

1
2
3


 var a
 console.log(a)
 a = 2

打印出a是undefined是显而易见的

第三章函数作用域和块作用域

Wed, 21 Dec 2016 10:00:00 +0800

函数作用域

JavaScript具有函数作用域，主要具有这几点好处:

隐藏内部实现，符合软件设计中的最小特权原则。
规避冲突。函数作用域可以当做命名空间隐藏变量，避免暴露到全局作用域发生冲突。

块作用域

虽然函数作用域是JavaScript中最常见的作用域单元，但块作用域在JavaScript中也是存在的，只不过（个人理解）JavaScript中的块作用域只是针对块中的某个变量来说的。

第二章词法作用域

Wed, 21 Dec 2016 08:00:00 +0800

什么是词法作用域

简单来讲，词法作用域就是定义在词法阶段的作用域，换句话说，词法作用域是由你在写代码时将变量和块作用域写在哪里决定的。

遮蔽效应

作用域查找会在找到第一个匹配的标识符时停止，在多层嵌套的作用域中可以定义同名的标识符，这叫做"遮蔽效应"

欺骗词法

欺骗词法作用域会导致性能下降

eval

eval 可以对一段包含代码的字符串进行演算，并借此来修改词法作用域。

非严格模式下，eval会对其所在的词法作用域进行修改，严格模式下，其有自己的词法作用域，不会对所在的词法作用域造成修改。

第一章作用域是什么

Tue, 20 Dec 2016 00:00:00 +0800

编译原理

传统编译语言的流程中，编译会执行三个步骤：

分词/词法分析这个阶段将代码分解成词法单元，比如var a = 2，分解成var、a、=、2
解析/语法分析将词法单元转换成抽象语法树(AST)
代码生成将抽象语法树转换成可执行代码

JavaScript的编译有什么不同

JavaScript的编译过程不是发生在构建之前，而是发生在执行前的几微秒或者更短的时候，因此，JavaScript不会像其它语言那样有大量的时间去做优化。

迭代器模式

Fri, 11 Nov 2016 00:00:00 +0800

要解决的问题

迭代器要解决的问题很简单很单纯，就是进行遍历操作。

实现原理

基本所有语言都实现了迭代器，javascript也不例外，如Array.prototype.forEach，for..of..，for..in..，for 迭代器的种类分两种，内部迭代器，外部迭代器。

内部迭代器

内部迭代器的迭代过程对外部是不可控的，内部自己实现迭代过程.比如forEach, jQuery中的$.each

外部迭代器

外部迭代器就相对灵活，可以控制迭代过程，需要显式调用迭代操作.外部迭代器较内部迭代器来说更方便扩展。

代理模式

Thu, 10 Nov 2016 00:00:00 +0800

解决哪一类问题

从字面意思上理解，代理模式解决对一个对象的直接访问，这种直接访问可能是"不方便"的，所谓"不方便"可能是直接访问成本比较大(在前端领域通常是要获取后台数据或者执行复杂的计算)，或者需要对原始对象进行一些修饰或处理。

实现原理

实现一个代理对象，这个代理对象和原对象对外暴露相同的接口，用户直接操作代理对象，对于说对用户是透明的，用户并不知道有代理存在。

虚拟代理

把一些昂贵的操作放在代理对象中进行，现在体会的还不是很深刻，具体例子没想好，以后补充。

缓存代理

把昂贵操作产生的数据缓存在代理对象中，避免了重复操作

策略模式

Wed, 09 Nov 2016 00:00:00 +0800

要解决的问题

当解决一个问题有多种方法时，选择使用哪种方法时就少不了要用大量的if语句进行判断，如果将这些方法的实现和判断语句放在一起实现就会产生问题，比如增加一种的新的方法时，就不得不再去写一条if语句，这不符合开闭原则，也不方便复用，因此策略模式主要解决的是算法的实现和算法的使用的过度耦合问题。

实现原理

将每个算法的实现封装起来，并可以相互替换(因为它们有共同的目的)，通过统一的上下文调用，一方面解决了耦合问题，另一方面增强了代码的复用能力

实践中的应用

表单的验证

表单验证涉及到多个判断语句，一般我们会这样实现

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16


 var form = document.getElementById('myform')
 form.onsubmit = function() {
 if (form.username.value === '') {
 alert('请输入用户名')
 return false
 }
 if (form.password.value === '') {
 alert('请输入密码')
 return false
 }

 if (form.password.value.length < 8) {
 alert('密码不小于8位')
 return false
 }
 }

单例模式

Tue, 08 Nov 2016 00:00:00 +0800

解决的问题

保证实例只有一个，避免多个实现，从全局来看，这个实例的状态是唯一的。

实现原理

设置一个变量来记录实例，通过检测该变量是否为空来决定是否创建实例

非透明单例

所谓非透明就是用户在使用前必须知道这是一个单例类，不使用new来获取实例

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13


 var Single = function() {}
 Single.instance = null
 Single.getInstance = function() {
 if (this.instance) {
 return this.instance
 }
 return this.instance = new Single()
 }

 var a = Single.getInstance()
 var b = Single.getInstance()

 a === b //true