1.严格模式

JavaScript 除了提供正常模式外,还提供了严格模式
ES5 的严格模式是采用具有限制性 JavaScript 变体的一种方式,即在严格的条件下运行 JS 代码
严格模式在IE10 以上版本的浏览器才会被支持,旧版本浏览器会被忽略
严格模式对正常的JavaScript语义做了一些更改:
消除了Javascript 语法的一些不合理、不严谨之处,减少了一些怪异行为
消除代码运行的一些不安全之处,保证代码运行的安全
提高编译器效率,增加运行速度
禁用了在 ECMAScript 的未来版本中可能会定义的一些语法,为未来新版本的 Javascript 做好铺垫。比如一些保留字如:class, enum, export, extends, import, super 不能做变量名

1.1开启严格模式

  • 严格模式可以应用到整个脚本或个别函数中。
  • 因此在使用时,我们可以将严格模式分为为脚本开启严格模式和为函数开启严格模式两种情况

    1.1.1为脚本开启严格模式

  • 为整个脚本文件开启严格模式,需要在所有语句之前放一个特定语句

  • “use strict” 或’use strict’
    1. 'use strict'
    2. console.log('这是严格模式')
    因为”use strict”加了引号,所以老版本的浏览器会把它当作一行普通字符串而忽略。

有的 script 基本是严格模式,有的 script 脚本是正常模式,这样不利于文件合并,所以可以将整个脚本文件放在一个立即执行的匿名函数之中。这样独立创建一个作用域而不影响其他 script 脚本文件。

  1. <script>
  2. (function (){
  3. 'use strict';
  4. var num = 10;
  5. function fn() {}
  6. })();
  7. </script>

1.1.2为函数开启严格模式

若要给某个函数开启严格模式,需要把”use strict”或’use strict’声明放在函数体所有语句之前

  1. <body>
  2. <!-- 为整个脚本(script标签)开启严格模式 -->
  3. <script>
  4. 'use strict';
  5. // 下面的js 代码就会按照严格模式执行代码
  6. </script>
  7. <script>
  8. (function() {
  9. 'use strict';
  10. })();
  11. </script>
  12. <!-- 为某个函数开启严格模式 -->
  13. <script>
  14. // 此时只是给fn函数开启严格模式
  15. function fn() {
  16. 'use strict';
  17. // 下面的代码按照严格模式执行
  18. }
  19. function fun() {
  20. // 里面的还是按照普通模式执行
  21. }
  22. </script>
  23. </body>

将”use strict” 放在函数体的第一行,则整个函数以 “严格模式”运行。

2.严格模式的变化

2.1变量规定

  • 在正常模式中,如果一个变量没有声明就赋值,默认是全局变量
  • 严格模式禁止这种用法,变量都必须先用var 命令声明,然后再使用
  • 严禁删除已经声明变量,例如,`delete x 语法是错误的` ```javascript
  1. <a name="cyzCU"></a>
  2. ## 2.2严格模式下this指向问题
  3. 以前在全局作用域函数中的this指向window对象<br />严格模式下全局作用域中函数中的this 是 undefined<br />以前构造函数时不加 new 也可以调用,当普通函数,this指向全局对象<br />严格模式下,如果构造函数不加 new 调用,this指向的是 undefined ,如果给它赋值,会报错<br />new 实例化的构造函数指向创建的对象实例<br />定时器this 还是指向window<br />事件、对象还是指向调用者
  4. ```javascript
  5. 'use strict';
  6. //严格模式下全局作用域中函数中的 this 是 undefined。
  7. function fn(){
  8. console.log(this)
  9. }
  10. fn()
  1. function Star(){
  2. this.sex = '男'
  3. }
  4. //严格模式下,如果构造函数不加new调用,this 指向的是undefined如果给他赋值则会报错.
  5. var xs = new Star()
  6. console.log(xs.sex)
  1. //定时器 this 还是指向 window
  2. setTimeout(function(){
  3. console.log(this)
  4. },2000)

2.3.函数变化

  1. 函数不能有重名的参数
  2. 函数必须声明在顶层,新版本的JavaScript会引入“块级作用域”(ES6中已引入)。为了与新版本接轨,不允许在非函数的代码块内声明函数 ```javascript ‘use strict’; // 6. 严格模式下函数里面的参数不允许有重名 function fn(a, a) { console.log(a + a)} // fn(1, 2);
  1. <a name="xuNZK"></a>
  2. # 3.高阶函数
  3. - 高阶函数是对其他函数进行操作的函数,它接收函数作为参数或将函数作为返回值输出
  4. ```javascript
  5. function fn(a,b,callback){
  6. console.log(a+b)
  7. callback && callback()
  8. }
  9. fn(1,2,function(){
  10. console.log('我是最后调用')
  11. })
  1. <script>
  2. function fn(){
  3. return function() {}
  4. }
  5. </script>

4.闭包

4.1.变量作用域

变量根据作用域的不同分为两种:全局变量和局部变量

  1. 函数内部可以使用全局变量
  2. 函数外部不可以使用局部变量
  3. 当函数执行完毕,本作用域内的局部变量会销毁。

    4.2什么是闭包

    闭包指有权访问另一个函数作用域中的变量的函数
    简单理解:一个作用域可以访问另外一个函数内部的局部变量

    1. function fn1(){ // fn1就是闭包函数
    2. var num = 10
    3. //我们fn2 这个函数作用域
    4. //访问了另外一个函数 fn1 里面的局部变量 num
    5. function fn2(){
    6. console.log(num)
    7. }
    8. fn2()
    9. }
    10. fn1()

    4.3.在chrome中调试闭包

    1.打开浏览器,按 F12 键启动 chrome 调试工具。
    2.设置断点。
    3.找到 Scope 选项(Scope 作用域的意思)。
    4.当我们重新刷新页面,会进入断点调试,Scope 里面会有两个参数(global 全局作用域、local 局部作用域)。
    5.当执行到 fn2() 时,Scope 里面会多一个 Closure 参数 ,这就表明产生了闭包。

    4.4闭包的作用

    闭包的主要作用: 延伸了变量的作用范围

    1. function fn1(){
    2. var num = 10
    3. return function(){
    4. console.log(num)
    5. }
    6. }
    7. var f = fn1()
    8. f()

    5.递归

    如果一个函数在内部可以调用其本身,那么这个函数就是递归函数

    1. var num=1
    2. function fn(){
    3. console.log(num)
    4. if(num == 6){
    5. return //递归里面必须加退出条件
    6. }
    7. num++
    8. fn()
    9. }
    10. fn()

    6.浅拷贝和深拷贝

  4. 浅拷贝只是拷贝一层,更深层次对象级别的只拷贝引用

  5. 深拷贝拷贝多层,每一级别的数据都会拷贝
  6. Object.assign(target,….sources) ES6新增方法可以浅拷贝

    6.1浅拷贝

    1. var obj = {
    2. id:1,
    3. name:'cheng',
    4. msg:{
    5. age:18
    6. }
    7. }
    8. var o={}
    9. for(var i in obj){
    10. o[i]=obj[i]
    11. }
    12. console.log(o)
    1. var obj = {
    2. id:1,
    3. name:'cheng',
    4. msg:{
    5. age:18
    6. }
    7. }
    8. var o={}
    9. // for(var i in obj){
    10. // o[i]=obj[i]
    11. // }
    12. // console.log(o)
    13. // 浅拷贝语法糖
    14. Object.assign(o,obj)
    15. console.log(o)

    7.正则表达式

    正则表达式是用于匹配字符串中字符组合的模式。在JavaScript中,正则表达式也是对象。
    正则表通常被用来检索、替换那些符合某个模式(规则)的文本,例如验证表单:用户名表单只能输入英文字母、数字或者下划线, 昵称输入框中可以输入中文(匹配)。此外,正则表达式还常用于过滤掉页面内容中的一些敏感词(替换),或从字符串中获取我们想要的特定部分(提取)等 。

    7.1特点

  • 实际开发,一般都是直接复制写好的正则表达式
  • 但是要求会使用正则表达式并且根据自身实际情况修改正则表达式

    7.2创建正则表达式

    在JavaScript中,可以通过两种方式创建正则表达式
  1. 通过调用 RegExp 对象的构造函数创建
  2. 通过字面量创建

    7.2.1通过调用 RegExp 对象的构造函数创建

    通过调用 RegExp 对象的构造函数创建
    1. var 变量名 = new RegExp(/表达式/);

    7.2.2通过字面量创建

    1. var 变量名 = /表达式/;

    7.2.3测试正则表达式

    test()正则对象方法,用于检测字符串是否符合该规则,该对象会返回true或false,其参数是测试字符串
    1. regexObj.test(str)
    2. //regexObj 写的是正则表达式
    3. //str 我们要测试的文本
    4. //就是检测str文本是否符合我们写的正则表达式规范
    1. //1.利用RegExp对象来创建 正则表达式
    2. var regexp=new RegExp(/123/)
    3. console.log(regexp)
    4. //2.利用字面量创建正则表达式
    5. var rg = /123/
    6. //3.test 方法用来检测字符串是否符合正则表达式要求的规范
    7. console.log(rg.test(123))
    8. console.log(rg.test('abc'))