一篇文章能够看懂基础源代码之JavaScript篇

javascript：解释型语言，使用js引擎进行解释，目前常用版本为ECMAScript6

js分为三部分：DOM，BOM，ECMAScript

DOM：Document Object Model 文档对象模型

BOM：Browser Object Model 浏览器对象模型

ESCMAScript：脚本执行

DOM：主要负责控制页面组件的显示，各种web组件元素的显示

BOM：主要是负责浏览器的操作，例如地址栏的数据操作，浏览器网页显示窗口的关闭，大小，加载操作，导航前进后退操作，

浏览器浏览过程可以参看之前发过的文章：

BS架构浏览过程原理（一）

BS架构浏览过程原理（二）

javascript源码后缀名一般为js，可以直接在html里面写代码，也可以另外存一个js文件，然后在html代码里引入，单独写js文件时只需要直接写内容即可

在html代码里直接使用
<script type="text/javascript">
//内联js代码
</script>
<script>
//内联js代码
</script>
在js文件里书写代码，则在html使用引入的方式
<script src="Myjs.js"></script>

1. 声明变量：
   var myVar = 0; //推荐写法是代码行结束不用写分号;，不过推荐变来变去的，没有统一
   let myVar = '1' //let是推荐声明变量的，因为let的作用域只在本代码块里，而var一不注意可能会导致变量变成全局变量
   let myArr = [1,2,3] //声明数组变量
   let myObj = {a: 1, b: '2'} //声明一个对象实例
   myObj.a //获取对象的a属性
   myObj['b'] //获取对象的b属性
   //变量前置，如果使用var声明了变量，那么即使var语句在最后，变量在前面使用也不会报错，但如果没有声明直接使用变量则会报错。赋值除外，例如：
   console.log(a) ---->undefined
   b = 20 ---->不会错
   console.log(c) ------>报错
   var a = 10

2. 声明方法：
   function myFunc() {} //不带参
   function myFunc(myParam) {} //带参
   当调用方法时，如果方法没有返回值，那么得到的是undefined
   let a = myFunc() // a=undefined
   给函数的原型链再追加内容：此时myFunc相当于一个类，需要new实例化才能调用追加的内容
   myFunc.prototype.newMethod = function () {}

3. 函数的调用和对象的实例化
   当直接调用函数时，myFunc()，得到的效果是执行一次函数方法
   let a = myFunc() // a=undefined
   当使用new myFunc()时，得到的效果是实例一个对象，并执行一次函数方法，此时得到的是一个对象实例
   let a = new myFunc() // a是myFunc的实例对象

4. 声明一个类：
   ES6有关于类的定义，在后端应用中会把类class编译functon的代码，所以后端能够识别，但直接写在前端时，浏览器是无法正确识别。需要编译浏览器才能识别
   class MyJsClass{
   constructor() {} //无参构造函数
   constructor (myVar) {} //有参构造函数
   myMethod() {} //声明方法
   }
   //继承
   class MySon extends MyFather{}
   另外一种方式声明类：
   function MyFuncClass () {}
   MyFuncClass.myStaticMethod = function (){} //给类挂载一个静态方法
   MyFuncClass.myStaticMethod()//调用静态方法，不能通过实例对象调用
   MyFuncClass.prototype.myMethod = function () {}//相当于声明一个方法，实例可以调用
   new MyFuncClass().myMethod() //调用实例方法
   let myAnnoFunc = function () {} //声明一个函数，可以通过myAnnoFunc()调用
   //闭包：把外部不能获得的内容通过return出去，导致外部获得内部的引用，使用不当会导致内存溢出

       function a() {
           let myInnerVar = 1 
           let b = function () {
               return myInnerVar
            }
           return b
       }

5. 箭头函数 ：简化function的写法
   myVar => { 执行体}
   myVar => 执行语句
   (myVar1,myVar2) =>{执行体}

6. 运算符，算术运算，逻辑运算

   • • • / % ++ -- && || !

7. 逻辑判断：
   if (myCondition){}
   else if (condition2) {}
   else {}

8. 循环：

   for(let i=0;i<10;i++){}
   
   for(let a in myObj){}
   
   myArr.forEach(item =>{})
   
   myArr.forEach((item,index) => {})
   
   do {} while (condition)
   
   while (condition) {}
   //分支：
   switch (myVar) {
       case 1:
            //do
            break
       case 2:
            break
       default:
               break
   }

   所有未声明的却使用的变量会报undefined
   如果对undefined对象进行读取属性的操作会报Error

9. 自执行函数 ：(function(){})() //函数自执行
   window对象是整个js对象的根对象，所有的内容都是挂载在window下的，称为全局变量和全局函数
   window.myProp
   window.myMethod()
   函数自执行后相当于把内容挂载在windows上，例如
   (function(){
   myProp = 10
   })()
   执行后相当于window.myProp = 10