JavaScript简单总结

---

你可以看到

基本知识点

难点

必须背的

拨乱反正

JS世界之光

还有没学的

JS学习计划

知识点

• 基本概念

   内存、变量、数据类型、对象

• 控制语句

   if…else…

   for…

• 对象

   原型、原型链

   对象分类

   new 一个新对象

   构造函数

   this 的隐式传递和显式传递

难点

• JS 三座大山

   原型

   this

   AJAX

• 我们已经遇到了前两座

   我还是没理解

   没理解就对了

   你理解了那它还是三座大山吗

   前端门槛就在这

   那怎么办？

   很简单，反复学反复理解

必须背的

第一个重要知识：JS 公式

   对象._ _proto_ _ === 其构造函数.prototype

JS 唯一公式，如果不会就套公式

第二个重要知识：根公理

   Object.prototype 是所有对象的(直接或间接)原型

加了一个直接或间接，所谓公理就是规定好的

第三个重要知识：函数公理

   所有函数都是由 Function 构造的

任何函数.__proto__ === Function.prototype

任意函数有 Object / Array / Function

JS 公式、根公理、函数公理

   基于这三个知识和基础知识，可以推出 JS 世界

拨乱反正

你大脑可能存在的错误观点一

• XXX 的原型

比如

   {name:‘frank’} 的原型

   [1,2,3] 的原型

   Object 的原型

• 解读

   Object 的原型是 Object.proto：对

   Object 的原型是 Object.prototype ：错

• 错在哪

「的原型」等价于「.__proto__」

   中文的「原型」无法区分 __proto__ 和 prototype

   所以我们只能约定，原型默认表示 __proto__

   只不过 __proto__ 正好等于某个函数的 prototype

你大脑可能存在的错误观点二

• 我觉得你说的矛盾了

   [1,2,3] 的原型是 Array.prototype

   你有说 Object.prototype 是所有对象的原型

   那为什么 Object.prototype 不是 [1,2,3] 的原型

• 错在哪

   原型分两种：直接原型和间接原型

   对于普通对象来说，Object.prototype 是直接原型

   对于数组、函数来说，Object.prototype 是间接原型

你大脑可能存在的错误观点三

• Object.prototype 不是根对象

• 理由(假)

   Object.prototype 是所有对象的原型

   Object 是 Function 构造出来的

   所以，Function 构造了 Object.prototype

   推论，Function 才是万物之源啊！

• 错在哪

   解释：Functio只构造出了 Object.prototype地址，没有构造出对象

Object.prototype 和 Object.prototype 对象的区别

   对象里面从来都不会包含另一个对象，只包含另一个对象的地址

   接下来我们要把 JS 世界的建造顺序理清楚

Object.prototype对应的地址的对象

JS世界之光

JS 世界的构造顺序(必须懂的，会画)

1. 创建根对象 #101(toString)，根对象没有名字

2. 创建函数的原型 #208(call /apply)，原型 __p 为 #101

3. 创建数组的原型 #404(push/pop)，原型 __p 为 #101

4. 创建 Function #342，原型 __p 为 #208

5. 用 Function.prototype 存储函数的原型，等于 #208

6. 此时发现 Function 的 __proto__ 和 prototype 都是 #208

7. 用 Function 创建 Object

8. 用 Object.prototype 存储对象的原型，等于 #101

9. 用 Function 创建 Array

10. 用 Array.prototype 存储数组的原型，等于 #404

11. 创建 window 对象

12. 用 window 的 ‘Object’ ‘Array’ 属性将 7 和 9 中的函数命名

13. 记住一点，JS 创建一个对象时，不会给这个对象名字的

• JS 世界的构造顺序（续）

14. 用 new Object() 创建 obj1

15. new 会将 obj1 的原型 __p 设置为 Object.prototype，也就是 #101

16. 用 new Array() 创建 arr1

17. new 会将 arr1 的原型 __p 设置为 Array.prototype，也就是 #404

18. 用 new Function 创建 f1

19. new 会将 f1 的原型 __p 设置为 Function.prototype，也就是 #208

• JS 世界的构造顺序（续）

20. 自己定义构造函数 Person，函数里给 this 加属性

21. Person 自动创建 prototype 属性和对应的对象 #502

22. 在 Person.prototype #502 上面加属性

23. 用 new Person() 创建对象 p

24. new 会将 p 的原型 __p 设为 #502

图示

总结

• 构造函数

   是用来构造对象的

   会预先存好对象的原型，原型的原型是根

   new 的时候将对象的 __p 指向原型

• 对象

   所有对象都直接或间接指向根对象

   如果对象想要分类，就在原型链上加一环

   用构造对象可以加这一环

• 思考

   如果加了一环之后，想再加一环怎么办

   以后会在「继承」里讲

还有哪些没学的

• 错误处理 try…catch…

   可以看看网道教材（也可以不看）

   会在项目中深入理解

• Math / Date / 正则 / JSON

   可以先看教材（也可以不看）

   会在项目中深入理解

• 我觉得

   就算现在讲了，你明天也会忘

   听不如写，写不如做

JS学习计划

• 第一阶段

   了解 JS 语法、特性、对象、数组、函数等

• 第二阶段

   了解 AJAX、设计模式、封装、面向对象、MVC

• 第三阶段

   Vue / React 全家桶

   好了，可以工作了