JS高级程序设计--笔记

Posted 2020-08-29 雷明

1、JS分三个部分：ECMAScript、DOM、BOM

      1）ECMAScript：提供核心语言功能

      2）DOM：提供访问和操作网页内容的方法和接口

      3）BOM：提供与浏览器交互的方法和接口

2、在html页面写js代码，需要将代码放在<script></script>；并且中间不能出现字符串“</script>”

      下方这个代码会报错：alert("</script>");

       可以对它进行转义： alert("<\/script>");

3、如果引用外部JS文件时，在标签内的JS代码将被忽略

4、js的六种数据类型：Undefined、Null、Boolean、Number、String、Object

     可以用typeof运算符来检测变量类型；

      --如果值为null，返回 “object”//null被认为是一个空的对象引用

      --如果是函数，返回  “function”

      --变量为声明或者声明未初始化，返回“undefined”

5、undefined 派生自 null ；

     所以 undefined == null ;//true

6、利用函数Boolean()， 任何类型的值都可以转为布尔类型；

      空字符串、0、NaN、null 、undefined 为false，其他值为true;

7、Number类型的表现形式：十进制、八进制、十六进制

      --八进制： 以0开头，var num1 = 070; //对应十进制56

      --十六进制：以0x开头，var num2 = 0xA; //对应十进制的10

     扩展：JS的浮点数是基于IEEE754 64位标准（二进位浮点数标准）；

     造成的bug：0.1 + 0.2 != 0.3

8、 0 / 0 = NaN;    1 / 0 = infinity;  -1 / 0 = -infinity;

9、parseInt()  可以解析：十进制、十六进制字符串；

      parseFloat()  只能解析十进制字符串

10、求一个负数的二进制表现形式

       1）先获得正数的二进制； 

       2）获取反码，即 0 和 1互换  

       3） + 1

11、switch 比较值时适用的是全等；

12、函数中传递参数，如果是引用类型，也是按值传递的。

        function setName(obj) {

           obj.name = "llm";

           obj = new Object();

           obj = "llm1";

        }

       var person = new Object();

       setName(person);

       alert(person.name);  // llm

      可以理解为它是一个局部的引用传递

13、垃圾收集算法

        1）标记清除 （目前主流）：对变量打标记（进入环境、离开环境），然后垃圾收集器再按照固定的时间间隔对这些变量进行回收

        2）引用计数（不常用）会出现循环引用的问题，而导致内存得不到清除；

14、执行环境分为：全局执行环境和函数执行环境

15、创建对象的两种方法

       1） var person = new Object();

       2)   var person = {};

16、访问对象的两种方式

       1）通过‘点’来访问：  person.name

       2）通过方括号   ： person["name"]    //它的优势在于可以使用变量来获取对象的属性 person[变量]

17、判断某个对象属于哪种类型的实例，可以通过 instanceof；

       判断Array，可以使用自带的方法： Array.isArray(value);

18、栈：后进先出

       队列：先进先出

19、数组的方法：  

       --push()   往数组末尾追加数据，并返回改变后的数组长度

       --pop()    移除数组末尾的值，并返回该结果

      --shift()  移除第一项的值

      --unshift()  在数组起始位置插入值

      --reverse()   反转数组

      --sort()   默认按照字符串的规则，进行升序排序

                     可以传递一个比较函数来决定哪个值在前面，

20、Date对象相关方法

       --getTime()  获取日期对应的总毫秒数； 与valueof()一样

       --getFullYear()   获取四位数年份

       --getMonth()   获取月份，从0开始

       --getDate()   获取天数

       --getDay()  获取星期几 ； 0 星期日   ，6星期六

       --getHours()  获取小时数

       --getMinutes()  获取分钟数

       --getSeconds()  获取秒数

       --getMilliseconds() 获取毫秒数

21、RegExp类型： 正则表达式

        var expression = / pattern / flags ;

        --pattern 表示 正则表达式

        --flags 表示匹配的标志：g、i、m，可以组合使用；

           1) g  表示全局搜索；  

           2）i  表示忽略大小写

           3）m  表示多行搜索

 22、Function 类型

         函数实际上是对象；而函数名只是指向对象的指针；

         var hello = function(){};

         所以才没有重载；如果定义多个相同的函数时，JS解析时从上到下，所以最终函数名指向了最后一个函数；

23、定义函数的两种方式：

       1、函数声明：function hello(){}

       2、函数表达式   var hello  = function(){};

       两者的区别：

       1）解析器会对函数声明做一个声明提前的过程；也就是说，不论这个函数在哪个位置定义的，都可以预先使用

       2）而函数表达式，只有执行到当前代码行时，才会被解析执行；

24、基本包装类型：String、Boolean、Number；它是一种特殊的引用类型

       虽然它们三个属于基本类型，基本类型不属于对象，所以不应该有方法和属性；

        但是我们知道string有许多方法，比如substring()；那这是为什么呢？

        var str = ‘123123123‘; var str1 = str.substring(2);

        这行代码，后台做了三个操作

         1）创建String类型的一个实例   var str = new String(‘123123123‘);

         2）调用了这个实例的方法        str.substring(2);

        3）销毁这个实例          str = null;

25、基本包装类型和引用类型的区别：在于生命周期；

       -- 引用类型的生命周期：在离开当前作用域之前一直存在

       --基本包装类型： 一行代码的执行瞬间；

26、encodeURI() 和encodeURIComponent()的区别

       1）encodeURI 对冒号、正斜杠、#不会进行编码

       2）encodeURIComponent会对冒号、正斜杠、#等特殊符号进行编码；

27、 eval() 方法相当于一个完整的ECMAScript解析器，它可以解析JS代码字符串；

        --需要注意的是：严格模式下，eval()中定义的变量，在外部访问不到；

28、工厂模式：批量创建类似的对象

        function createPerson(name){    var obj = new Object();  obj.name = name;  return obj;       }

29、构造函数模式：通过new来调用函数

        function Person(name){ this.name = name; }

        var person = new Person();

30、原型模式

       创建的每个函数都有一个属性prototype指向一个对象，这个对象包含所有实例共享的属性和方法；

31、hasOwnProperty()  可以判断属性是否属于某个实例的

        --true表示 属于

32、in操作符  可以判断实例是否含有某个属性，无论是存在于实例上还是原型上

33、每个函数都有一个prototype属性，这个属性指向一个对象；这个对象包含所有实例共享的属性和方法；

       function Person(){};  

       Person.protype.name = ‘haha‘;

       Person.prototype 这个属性将包含所有实例共享的属性和方法；

       

      var llm = new Person();   

      alert(llm.name);  // haha

      

      而每个实例都有一个属性 [__proto__] ，指向原型对象；

     alert( llm.__proto__.name );   //haha

34、原型对象造成的问题：

        1、创建的实例都有固定的属性值；

        2、如果原型中的属性值是 引用类型，那么通过某个实例修改其中的值，其他的实例也会相应改变；

        ——————————

        解决办法：通过构造函数和原型模式组合使用；

        1）构造函数：用于定义实例属性

        2）原型模式：用于定义方法和共享的属性；

        function Person(name){ this.name = name; }

        Person.prototype.sayName = function(){ alert(this.name); }

        

         _________________________

         上面这种方法已经很好的解决问题了。但是写法不够优雅；

          【动态原型模式】将原型模式写在构造函数中

         function Person(name)

       {

          this.name = name;

          if(typeof this.sayName != "function"){

            //如果这个方法不存在，则进行创建

           Person.prototype.sayName = function(){ alert(this.name); };

          }

        }

 

33、arguments.callee  表示正在执行的函数的指针；  严格模式下会出错；

       function factorial( num ){

         return num * arguments.callee(num-1);

      }

34、修改 window.location.href    值，会自动调用 location.assign()方法，会生成历史记录；

        location.replace()  则不会生成历史记录；

35、scrollIntoView()   在element上调用这个方法，会将滚动条滚动至该元素上；

        var div = document.getElementById(‘div1‘);  

        div.scrollIntoView();