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

摘要：类型与函数的概念函数这样的一段代码它只定义一次但是可能被执行或调用多次类型是提供的引用类型之一通过类型创建对象在中函数也是对象的形式存在注意每个函数都是以个对象与函数函数声明方式示例代码一笑一人生字面量方式示例代码一花一世界判断函数是否为类

函数这样的一段JavaScript代码,它只定义一次,但是可能被执行或调用多次

Function类型是JavaScript提供的引用类型之一,通过Function类型创建Function对象

在JavaScript中函数也是对象的形式存在.

注意: 每个函数都是以个Function对象

示例代码:

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

示例代码:

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

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

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

示例代码:

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

示例代码:

//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("一花一世界");
}

代码的执行流程分析图:

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

参数

thisArg参数 - 可选项,在func函数运行时使用的this值

argArray参数 - 数组,作为参数(实参)的列表

返回值 - 调用该函数的返回结果

示例代码:

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


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

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()方法用于创建一个新的函数(称为绑定函数),并接收指定的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();// 调用结果为 一花一世界一叶一菩提

重载的含义:

定义多个同名的函数,但具有数量不同的参数

调用函数,根据传递参数的个数调用指定的函数

注意: 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

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语法中，定义函数必须定义函数名称 -> 匿名函数

匿名函数的作用:

将匿名函数作为参数传递给其他函数 -> 回调函数

将匿名函数用于执行一次性任务 -> 自调函数

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

示例代码:

// 作为另一个函数(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)中的局部变量,而此变量在外部是通过其他途径无法访问的

闭包的作用:

提供可共享的局部变量

保护共享的局部变量.提供专门的读写变量的函数

避免全局污染