JavaScript面向对象中的Function类型个人分享

Function类型

Function与函数的概念

• 函数这样的一段JavaScript代码,它只定义一次,但是可能被执行或调用多次
• Function类型是JavaScript提供的引用类型之一,通过Function类型创建Function对象
• 在JavaScript中函数也是对象的形式存在.
• 注意: 每个函数都是以个Function对象

---

Function与函数

1.函数声明方式

示例代码:

function fun() {
    console.log('一笑一人生');
}

2.字面量方式

示例代码:

var fn = function () {
    console.log('一花一世界');
};
// 判断函数是否为Function类型的
console.log(fun instanceof Function);//调用结果为 true
console.log(fn instanceof Function);//调用结果为 true
//JavaScript中所有的函数都是Function类型的对象

3.创建Function类型的对象 - 就是一个函数

• 语法:
  var 函数名 = new Function(参数,函数体);

  • 由于函数的参数和函数体都是以字符串形式传递给Function的

示例代码:

var f = new Function('a','console.log(a)');
f(100);//以函数方式进行调用

Object与Function

示例代码:

//1. Object与Function都是自身的类型
console.log(Object instanceof Object);//调用结果为 true
console.log(Function instanceof Function);//调用结果为 true
//2. Object自身是构造函数,而构造函数也是函数,是函数都是Function类型
console.log(Object instanceof Function);//调用结果为 true
//3. Function是引用类型,用于创建对象,是对象都是Object类型
console.log(Function instanceof Object);//调用结果为 true

代码的执行流程

示例代码:

// 变量的声明提前
console.log(v);//调用结果为 undefined
var v = 100;

// 如果使用函数声明方式定义函数时 - 函数的声明提前
fun();//调用结果为 一花一世界
function fun() {
    console.log('一花一世界');
}

代码的执行流程分析图:

---

Function的apply()方法

• apply(thisArg,argArray)方法 - 用于调用一个指定的函数

  • 参数

    • thisArg参数 - 可选项,在func函数运行时使用的this值
    • argArray参数 - 数组,作为参数(实参)的列表
    • 返回值 - 调用该函数的返回结果

示例代码:

// 定义函数
function fun(value) {
    console.log('一花一世界' + value);
}
//函数的调用方式
// 语法结构 : 函数名称()
fun('一笑一人生');//调用结果为 一花一世界一笑一人生


fun.apply(null,['一叶一孤城']);//调用结果为 一花一世界一叶一孤城

---

Function的call()方法

• Function的call()方法用于调用一个函数,并接收指定的this值作为参数,以及参数列表

  • thisArg参数 - 在func函数运行时使用的this值
  • arg1,arg2...参数 - 指定的参数类表
  • 返回值 - 调用该函数的返回值

示例代码:

//定义函数
function fun(value,value2) {
    console.log('一花一世界' + value + value2);
}
// 函数的调用方式
//语法结构 : 函数名称()
fun('一笑一人生','极乐世界');//调用结果为 一花一世界一笑一人生极乐世界

fun.apply(null,['一笑一人生','走你']);//调用结果为 一花一世界一笑一人生走你
// call()方法 - 用于调用一个函数
fun.call(null,'一笑一人生','一叶一菩提');//调用结果为 一花一世界一笑一人生一叶一菩提

---

Function的bind()方法

• Function的bind()方法用于创建一个新的函数(称为绑定函数),并接收指定的this值作为参数,以及参数列表

• bind(thisArg,arg1,arg2,...)方法

  • 作用 - 用于创建一个新函数(称为绑定函数)

  • 参数

    • thisArg参数 - 当绑定函数被调用时,该参数会作为原函数运行时的this指向
    • arg1, arg2,...参数 - 当绑定函数被调用时,这些参数将置于实参之前传递给被绑定的方法 (表示参数列表)
    • 返回值 - 返回新的函数

示例代码:

//定义函数
function fun(value) {
    console.log('一花一世界' + value);
}



/*
var f = fun.bind();// 相对于从指定函数复制一份出来
console.log(f);
f();*/
fun('一笑一人生');// 调用结果为 一花一世界一笑一人生

var f = fun.bind(null,'一叶一菩提');
f();// 调用结果为 一花一世界一叶一菩提

---

重载是什么

• 重载的含义:

  1. 定义多个同名的函数,但具有数量不同的参数
  2. 调用函数,根据传递参数的个数调用指定的函数
• 注意: JavaScript中函数没有重载如果同时定义多个同名的函数时,则只有最后一个定义的函数时有效的

示例代码:

function add(a,b){
    return a + b;
}
function add(a,b,c){
    return a + b + c;
}
function add(a,b,c,d){
    return a + b + c + d;
}
//理想效果:
add(1,2);// 3
add(1,2,3);// 6
add(1,2,3,4);// 10

//实际效果:
// JavaScript的函数不存在重载 -> 当函数同名时，最后一次定义的函数有效
console.log(add(1,2));// NaN
console.log(add(1,2,3));// NaN
console.log(add(1,2,3,4));// 10

---

arguments对象

• JavaScript提供arguments对象

  • 该对象存储当前函数中所有的参数(指的是实参) - 类数组对象
  • 应用场景 - 该对象一般用于函数中
  • 作用 - 用于获取当前函数的所有参数

  • 属性

    • length - 函数所有参数(指的是实参)的个数
  • 用法 - 模拟实现函数的重载

示例代码:

function add() {
    var num = arguments.length;
    switch (num) {
        case 2:
            return arguments[0] + arguments[1];
            break;
        case 3:
            return arguments[0] + arguments[1] + arguments[2];
            break;
        case 4:
            return arguments[0] + arguments[1] + arguments[2] + arguments[3];

    }
}
console.log(add(1,2));//调用结果为 3
console.log(add(1,2,3));//调用结果为 6
console.log(add(1,2,3,4));//调用结果为 10

---

函数的递归

• 函数的递归 - 就是在指定函数的函数体中调用自身函数

示例代码:

function fun() {
    // 当前函数的逻辑内容
    console.log('this is function');
    // 调用自身函数 - 实现递归
    fun();
}
fun();

控制台效果解析图:

解决递归死循环的方法

示例代码:

function fn(v) {
    console.log(v);
    /* 语句判断 */
    if (v >= 10) {
    /* 结束语句循环 */
        return;
    }
    //fn(v + 1);
    arguments.callee(v + 1);
}
//fn(0);


var f = fn;
fn = null;
f(0);
console.log(f);

控制台调用图:

---

特殊函数

匿名函数

• JavaScript语法中，定义函数必须定义函数名称 -> 匿名函数

• 匿名函数的作用:

  1. 将匿名函数作为参数传递给其他函数 -> 回调函数
  2. 将匿名函数用于执行一次性任务 -> 自调函数

回调函数

• 当一个函数为参数传递给另一个函数时,作为参数的函数被称之为回调函数

示例代码:

// 作为另一个函数(fn)的参数的函数(one) - 回调函数
var one = function(){
    return 1;
}

function fn(v){
    return v();
}
// one函数仅是作为fn函数的参数出现 - 并不是调用
// var result = fn(one);
/*
    以上代码等价于以下代码
    以下代码中作为参数的函数 - 匿名回调函数
  */
var result = fn(function(){return 1;});

console.log(result);// 1

回调函数分析图:

回调函数的参数

示例代码:

// 作为另一个函数(fn)的参数的函数(one) -> 回调函数
var one = function(w){
    return w;
}

function fn(v){// 形参是一个函数
    return v(100);// 函数的调用体
}

// var result = fn(one);// 实参必须是一个函数

var result = fn(function(w){return w;});

console.log(result);

回调函数的参数的分析图:

自调函数

• 自调函数 - 定义即调用的函数

  • 第一个小括号 - 用于定义函数
  • 第二个小括号 - 用于调用函数

示例代码:

// 全局作用域 - 生命周期：JavaScript文件从执行到执行完毕
(function(value){
    // 函数作用域 - 生命周期：从函数调用到调用完毕
    console.log('一花一世界' + value);
})('一叶一菩提');


// 表达式语法
(function(value){
    // 函数作用域 - 生命周期：从函数调用到调用完毕
    console.log('一花一世界' + value);
}('一笑一人生'));

作为值的函数

• 将一个函数作为另一个函数的结果进行返回,作为结果为返回的函数称之为止的函数

示例代码:

var one = function(){
    return 100;
};
// 作为值的函数 -> 内部函数的一种特殊用法
function fun(){
    var v = 100;
    // 内部函数
    return function(){
        return v;
    };
}

var result = fun();
console.log(fun()());// 调用结果为 100

---

作用域链

示例代码:

var a = 10;// 全局变量
function fun(){
    var b = 100;// fun函数作用域的局部变量
    // 内部函数
    function fn(){
        var c = 200;// fn函数作用域的局部变量
        // 内部函数
        function f(){
            var d = 300;// f函数作用域的布局变量
            // 调用变量
            console.log(a);// 10
            console.log(b);// 100
            console.log(c);// 200
            console.log(d);// 300
        }
        f();
        // 调用变量
        // console.log(a);// 10
        // console.log(b);// 100
        // console.log(c);// 200
        // console.log(d);// d is not defined
    }
    fn();
    // 调用变量
    // console.log(a);// 10
    // console.log(b);// 100
    // console.log(c);// c is not defined
    // console.log(d);// d is not defined
}
fun();

作用域链的分析图:

---

闭包

• 闭包是什么:

  • JavaScript允许函数嵌套,并且内部函数可以访问定义在外部函数中的所有变量和函数,以及外部函数能访问的所有变量和函数.但是外部函数却不能够访问定义在内部函数中的变量和函数

示例代码:

var n;// 定义变量,但不初始化值
function fun() {// 函数作用域
    var v = 100;
    // 进行初始化值 - 一个函数
    n = function () {
        console.log(v);
    };
    // n();
}
fun();

n();// 调用结果为 100

闭包的特点与作用

• 闭包的特点:

  • 局部变量: 在函数中定义有共享意义(比如: 缓存,计数器等等)的局部变量
  • 内部函数: 在函数(f)中声明有内嵌函数,内嵌函数(g)对函数(f)中的局部变量进行访问
  • 外部使用: 函数(f)向外返回此内嵌函数(g),外部可以通过此内嵌函数持有并访问声明在函数(f)中的局部变量,而此变量在外部是通过其他途径无法访问的

• 闭包的作用:

  • 提供可共享的局部变量
  • 保护共享的局部变量.提供专门的读写变量的函数
  • 避免全局污染