深入理解Javascript到相关知识体系的整理构建(一)

目录

一、碎片化的知识

二、从创造人员到语言总体特性初探

 2.1 Javascript的创造者

 2.2  Javascript入口结构

2.2.1脚本语言：

2.2.2  面向对象-BOM、DOM以及Html5之间的关系

2.2.3  事件驱动的语言

2.2.4  基于原型的面向对象的实现

三、Javascript的结构和内存模型

3.1  结构和内存模型的相关整理

3.2  javascript的结构

3.3 javascript中的内存模型

四、function类型对象

---

---

一、碎片化的知识

   不管是查阅知识，还是学习的过程。遗忘算是令人懊恼的问题，很大原因是由于大脑中的知识是碎片化的。如果不建立体系，沉迷于碎片化的知识，是似懂非懂状态的核心原因。碎片化的知识结构，看啥都很新鲜，新鲜完了之后也不知道咋用，用了出了问题，也不知道啥原因。遇到问题也不知道用啥思路想，降低了时间和工作的效率。

     虽然很多书籍以结构化的脉络讲述着相关的知识点，但是别人的结构，始终不是自己的。自行梳理和整理的知识体系，才能更加得心应手的运用吧。对抗遗忘的方式，是按照习惯性的思维路径，构件熟悉的思维路径。反复遍历，直至形成思维突触，也就是习惯性动作。那么搭建和完善思维路径，是第一步。

     第二步是思维路径的关联和组合，也就是点线状到网状，第三步大概是编写javascript生态中的插件、中间件，是从网状的知识体系到立体的知识模型的使用。以此类推，第四步是自定义和组合框架结构知识，立体知识模型到模型规则化的建立，将设计模式融入到语言的基本规则中。设计模式是语言的补充，因此不同的语言的核心差别在于融入了不同的设计模式。

     结构梳理使用总分总的结构进行:（参考--<<Javascript设计模式与开发和实践>>《深入理解Javascript》《你不知道的Javascript》）

二、从创造人员到语言总体特性初探

 2.1 Javascript的创造者

    Javascript的创造者是布兰登.艾奇，1995年5月份用了10天把Javascript创造出来。正如同之前所想的那样，语言并非发明创造。更多的像是别人制定的一套规则。而学好的标准，则是"随心所欲不逾矩"的保证。

 2.2  Javascript入口结构

         自行整理的脑图，就像地图上面的缩小很多倍的几个省份的入口索引。层级化检索，才能更快的找到目的地的位置。

2.2.1脚本语言：

  脚本语言的功能是修改或者操作，并不能从无到有的创造一个界面。只能对界面进行修改，页面本身由浏览器创建。因此Javascript没有入口main,它的真正入口是浏览器。脚本语言是一堆命令的集合，同样会生成语法树，然后解释器生成中间码。因此Javascript引擎会在加载的时候下载源码，然后进行编译

2.2.2  面向对象-BOM、DOM以及Html5之间的关系

  正因为Javascript是用于修改和操作的语言，那么操作的对象无疑是浏览器，那么操作的对象总称为BOM和DOM。分别代表的是浏览器对象和文档对象模型。Dom就是将Html转换成javascript可以直接操作的对象，BOM则是代表着浏览器的操作对象模型，对BOM的操作包括了获取url地址、前进或者后退，webScoket等操作。

   Html则是对BOM和DOM的扩展补充，对Dom扩展了相应的标签section、article、head,footer,autdio,video以及canvas标签，同时对BOM进行了扩展让js操作BOM对象的方式更强大。

   Javascript是基于对象的语言还是面向对象的语言，现在还有争论，但是在其标准介绍中认为是面向对象的语言。那么javascript如何实现面向对象的特征呢,这就和面向原型有关系了

2.2.3  事件驱动的语言

   javascript引擎不是看到代码后立即执行，而是在合适的时间合适的情况下去执行。这个执行方式称为事件驱动。事件驱动有三要素:事件、事主和处理方法。 用银行处理业务的流程来分析事件驱动:存款是一个事件。柜台营业员是事主，专门处理存款业务的营业员就是处理事件的事主，给营业员培训，就是给处理事件的事主绑定对应的处理方法。在相应的存款的人排队到达后，开始处理对应的存款事件，就是事件驱动。事件驱动可以通过队列实现。先进先出，意味着按照队列的顺序处理对应的事件的机制。

       大致的思路和脉络是整理结构的目的，但是具体的实现和方法，只有按照地图走过才知道。结构脉络只是为了能够快速定位到大致的检索路径，减少检索时间，知道地图怎么看，不代表能够走遍全图，但是可以在走的时候少走些弯路。

2.2.4  基于原型的面向对象的实现

     在java中面向对象基本特征:封装、继承、多态。同样的javascript也有相似特性，这样的特性是基于原型链实现的。在以类为中心的面向对象的设计中，类和对象的关系可以想象成摸具和铸件的关系，对象总是从类中创建出来的。但是布兰登。艾奇在设计之初，没有引入类的概念。而是原型概念实现面向对象，原型概念就是说，对象是通过clone来的，克隆出来的对象和原对象一摸一样。看不出任何差别。原型模式又称为编程泛型。

         es5中实现相关面向对象特征的相关结构整理如下。在es6中引入了class类，依旧是使用es5的实现，只是使用了更加传统的面向对象的方式进行编写，但是本质上还是基于原型的面向对象的实现

/*es5中创建对象
1.var obj = { };
2.var obj2=new object()
*/
var cat=function(name,age){
  this.name=name;
  this.age=age;
}
var newtest=new cat("汤姆",12);
console.log(newtest.name);
/*es5中的多态*/
var say=function(animal){
  animal.sound();
}
var dug=function(){}
var dog=function(){}
dug.prototype.sound=function(){
  console.log("嘎嘎嘎");
}
dog.prototype.sound=function(){
  console.log("汪汪汪");
}
say(new dog());//嘎嘎
say(new dug());//旺旺
/*es5中的封装*/
var dog=(function(){
  var name="汤姆";//私有化属性
  return {
    getname:function(){
      console.log(name);
      return name;
    }
  }
})()
dog.getname();//汤姆
console.log(dog.name);//undefined;
/*es5中的原型继承*/
/*验证对象的继承*/
var animal=function(age){
  this.age=age;
  var testk="nihao";
}
animal.prototype={name:"汤姆"};
var B=new animal(9)
console.log(B.name);//汤姆
console.log(B.age);//9
console.log(B.testk);//undefined,非原型链上的属性

   简单编写了es5下面向对象的代码实现方式。 es6基于class类的面向对象的特性实现则与java中的实现方式很相近。 从多态的角度来看，javascript的弱类型特性，使得对象的实现方式和对象进行解耦合。这也是多态与设计模式之间的联系。    本质上来讲，多态就是为了将执行的操作和执行的对象解耦合。不同的对象传入，产生不同的结果。

三、Javascript的结构和内存模型

3.1  结构和内存模型的相关整理

       不管是解释型语言还是编译型语言，都有自己的内存模型。对应的函数、变量、对象等数据都是保存在内存中的 ，使用时需要使用变量名在指定的地方找到实际的内容，再去操作。

           在原有的知识结构体系分支向下延申的对应结构图整理如下:

3.2  javascript的结构

     javascript在网上有个争执不下的理念"javascript中万物皆对象"，核心原因是基本类型的存在。因为基本类型无法添加属性，很多人认为它们不可称为对象。但是js的核心是对象毋庸置疑，js本质来说是一个巨大的对象，这个对象就是Global Object，它是由宿主环境Global创建的，在浏览器中就是window对象。其它对象就是它的属性、或者属性的属性。

     基本类型的属性不可以包含其它的属性，而对象的属性可以是对象也可以是基本类型。

     对比java等面向对象的语言是通过类创建的，有统一的根节点。js中的object类型对象是通过function类型对象创建的,比如js中常用的String、Array、Date对象都是function类型的对象，Object也是function类型的对象，而使用它们创建出来的对象，就是object对象。   可以通过typeof判断对应的对象类型。

,    

/*判断对应的对象类型*/
typeof String;//function
typeof Array;//function
typeof Date;//function
var date1=new Date();typeof date1;//Object

3.3 javascript中的内存模型

    对于对象类型来说，类型名指向的是对应的内存地址。对于直接量来说，类型名指向了实际的对象。因此对象类型比直接量多耗费一个内存地址。同时这也可以解释，强引用中的对象赋值，改变后，均改变的原因。

四、function类型对象

4.1 总览function类型对象

        function类对象有三个子类型，分别有着各自的作用。如下

       沿着原有的结构，发散和扩充体系。在思考和学习新知识的时候，用现有的构造的体系去思考和融入到已搭建好的知识体系中。