12.25-函数

函数

函数的定义和调用

函数的定义方式

• 1. 方式1 函数声明方式 function 关键字 (命名函数)
  • function fn(){}
• 2. 方式2 函数表达式(匿名函数)
  • var fn = function(){}
• 3. 方式3 new Function()

  • var f = new Function(‘a’, ‘b’, ‘console.log(a + b)’);
    f(1, 2);
    var fn = new Function(‘参数1’,‘参数2’…, ‘函数体’)

  • 注意

    • Function 里面参数都必须是字符串格式，第三种方式执行效率低，也不方便书写，因此较少使用所有函数都是 Function 的实例(对象)，函数也属于对象

函数的调用

• 1. 普通函数
  • function fn() {
    console.log(‘人生的巅峰’);
    }
    fn();
• 2. 对象的方法
  • var cheche = {
    sayHi: function() {
    console.log(‘哇哦！酷！’);
    }
    }
    cheche.sayHi();
• 3. 构造函数
  • function Star() {};
    new Star();
• 4. 绑定事件函数
  • btn.onclick = function() {}; // 点击了按钮就可以调用这个函数
• 5. 定时器函数
  • setInterval(function() {}, 1000); //这个函数是定时器自动1秒钟调用一次
• 6. 立即执行函数(自调用函数)
  • (function() {
    console.log(‘人生的巅峰’);
    })();

this

函数内部的this指向

• 1)普通函数中，this是window对象
  2）构造函数中，this 是实例对象
  3）对象方法调用，this 是该方法所属对象
  4）事件绑定方法中，this 指的是绑定事件对象
  5）定时器函数中，this 指的是window
  6）立即执行函数中，this 指的是window

• 立即执行函数举例

  • // 立即执行函数 它前面必须要加分号
    (function() {
    console.log(‘立即执行’);
    })

改变函数内部 this 指向

• call方法

  • call()方法调用一个对象。简单理解为调用函数的方式，但是它可以改变函数的 this 指向

  • 应用场景: 经常做继承.

  • 举例

    • 

• apply方法

  • apply() 方法调用一个函数。简单理解为调用函数的方式，但是它可以改变函数的 this 指向。

  • 应用场景: 经常跟数组有关系

  • 举例

    • 

• bind方法

  • bind() 方法不会调用函数,但是能改变函数内部this 指向,返回的是原函数改变this之后产生的新函数，如果只是想改变 this 指向，并且不想调用这个函数的时候，可以使用bind

  • 应用场景:不调用函数,但是还想改变this指向

  • 举例

    • 

    • 

• call、apply、bind三者的异同

  • 共同点 : 都可以改变this指向

  • 不同点:

    • （1）.call 和 apply 会调用函数, 并且改变函数内部this指向.
      （2）.call 和 apply传递的参数不一样,call传递参数使用逗号隔开,apply使用数组传递
      （3）.bind 不会调用函数, 可以改变函数内部this指向.

  • 应用场景

    • 1. call 经常做继承.
    • 2. apply经常跟数组有关系. 比如借助于数学对象实现数组最大值最小值
    • 3. bind 不调用函数,但是还想改变this指向. 比如改变定时器内部的this指向

严格模式

严格模式对正常的 JavaScript 语义做了一些更改：

1.消除了 Javascript 语法的一些不合理、不严谨之处，减少了一些怪异行为。
2.消除代码运行的一些不安全之处，保证代码运行的安全。
3.提高编译器效率，增加运行速度。
4.禁用了在 ECMAScript 的未来版本中可能会定义的一些语法，为未来新版本的 Javascript 做好铺垫。
比如一些保留字如：class,enum,export, extends, import, super 不能做变量名

开启严格模式

• 为脚本开启严格模式

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

  • 举例

    • 

• 为函数开启严格模式

  • 要给某个函数开启严格模式，需要把“use strict”; (或 ‘use strict’; ) 声明放在函数体所有语句
    之前

  • 举例

    • 

严格模式中的变化

• 

• 举例

  • 

高阶函数

高阶函数是对其他函数进行操作的函数，它接收函数作为参数或将函数作为返回值输出

举例

• 此时fn 就是一个高阶函数
  函数也是一种数据类型，同样可以作为参数，传递给另外一个参数使用。最典型的就是作为回调函数。
  同理函数也可以作为返回值传递回来

案例

• http.js

  • 

• client1.html

  • 

• server1.php

  • 

• client2.html

  • 

• server2.php

  • 

正则表达式

正则表达式在js中的使用

• 正则表达式的创建

  • 方式一：通过调用RegExp对象的构造函数创建

    • var regexp = new RegExp(/123/);
      console.log(regexp);

  • 方式二：利用字面量创建 正则表达式

    • var rg = /123/;

• 测试正则表达式

  • test() 正则对象方法，用于检测字符串是否符合该规则，该对象会返回 true 或 false，其参数是测试字符串

  • 举例

    • 

正则表达式中的特殊字符

• 

  • 综合举例

    • 

• 边界符

  • ^ 表示匹配行首的文本（以谁开始）
    $ 表示匹配行尾的文本（以谁结束）

  • 如果 ^和 $ 在一起，表示必须是精确匹配

  • 举例

    • 

• [] 方括号

  • 表示有一系列字符可供选择，只要匹配其中一个就可以了

  • 举例

    • 

• 量词符

  • 

  • 案例：用户名表单验证

    • 功能需求:

1. 如果用户名输入合法, 则后面提示信息为: 用户名合法,并且颜色为绿色

2. 如果用户名输入不合法, 则后面提示信息为: 用户名不符合规范, 并且颜色为红色

    - 分析:
    
    1. 用户名只能为英文字母,数字,下划线或者短横线组成, 并且用户名长度为6~16位.
    2. 首先准备好这种正则表达式模式/$[a-zA-Z0-9-_]{6,16}^/
    3. 当表单失去焦点就开始验证.
    4. 如果符合正则规范, 则让后面的span标签添加 right类.
    5. 如果不符合正则规范, 则让后面的span标签添加 wrong类.
    
    - ![在这里插入图片描述](https://img-blog.csdnimg.cn/20201225204545273.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NqamFpeHVleGk=,size_16,color_FFFFFF,t_70#pic_center)
   

预定义类

• 

• 表单验证案例

  • 

正则替换replace

• replace() 方法可以实现替换字符串操作，用来替换的参数可以是一个字符串或是一个正则表达式。

• 案例:过滤敏感词汇

  • 

闭包

变量的作用域复习

变量根据作用域的不同分为两种：全局变量和局部变量。
1. 函数内部可以使用全局变量。
2. 函数外部不可以使用局部变量。
3. 当函数执行完毕，本作用域内的局部变量会销毁。

什么是闭包

闭包（closure）指有权访问另一个函数作用域中变量的函数。简单理解就是 ，一个作用域可以访问另 外一个函数内部的局部变量。

闭包的作用

作用：延伸变量的作用范围

function fn() {
    var num = 10;
        function fun() {
        	console.log(num);
        }
        return fun;
    }
var f = fn();
f();

闭包的案例