JavaScript 之 面向对象 [ Function范例 ]

2023年1月5日 182次阅读 来源: 蔡志远

Function范例

形貌

  • 在JavaScript中的一切函数都是Function范例的对象

定义函数的体式格局

函数声明体式格局

function 函数名 () { 
    函数体 
}
/* 函数声明体式格局定义函数 */
function fun() {
    console.log( '函数声明体式格局...' );
}
fun();// 显现 函数声明体式格局...

字面量体式格局

var 函数名 = function () { 
    函数体 
}
/* 字面量体式格局定义函数 */
var fu = function () {
    console.log( '字面量体式格局...' );
}
fu();// 显现 字面量体式格局...

组织函数体式格局

var 函数名 = new Function( 参数，函数体 )
  • 函数的参数和函数体，都以字符串情势填写在括号中，以逗号分开
  • 在运用组织函数建立一个Function范例的对象时，会获得一个函数
/* 组织函数体式格局定义函数 */
var fn = new Function( 'can', 'console.log( can )' );
fn('组织函数体式格局...');// 显现 组织函数体式格局...

推断定义的函数是不是为Function范例

/* 函数声明体式格局 */
console.log( fun instanceof Function );// true
/* 字面量体式格局 */
console.log( fu instanceof Function );// true
/* 组织函数体式格局 */
console.log( fn instanceof Function );// true

apply()要领

  • 示意用于挪用指定函数

  • 该要领吸收两个参数

    • 第一个 – this

    • 第二个 – 一个数组

      • 该数组用于存储指定函数的一切参数（实参）
/* 定义一个函数 */
function fun( can ) {
    console.log( can );
}
/* 依据函数语法一般挪用函数 */
fun( '这是一个函数' );// 显现 这是一个函数

/*
    依据Function对象供应的apply()要领举行函数挪用
     * 参数 this 能够先用 null 站位
 */
fun.apply( null, ['这照样一个函数'] );// 显现 这照样一个函数

call()要领

  • 示意用于挪用指定函数

  • 该要领吸收两个参数

    • 第一个 – this
    • 第二个 – 函数的参数
      -需求若干参数，写若干参数，运用逗号分开
/* 定义一个函数 */
function fun( can, shu ) {
    console.log( can + shu );
}
/* 依据函数语法一般挪用函数 */
fun( '这是一个函数', '...' );// 显现 这是一个函数...

/*
    依据Function对象供应的call()要领举行函数挪用
     * 参数 this 能够先用 null 站位
 */
fun.call( null, '这照样一个函数', '...' );// 显现 这照样一个函数...

bind()要领

  • 示意建立一个新的函数（称为绑定函数）

  • 该要领吸收两个参数

    • 第一个 – this

    • 第二个 – 函数的参数

      • 需求若干参数，写若干参数，运用逗号分开

  • 该要领的返回值 – 返回一个新的函数

    • 返回的新函数 – 是对指定函数举行复制获得的
    • 两个函数对函数体举行修正不会相互影响
/* 定义一个函数 */
function fun( can, shu ) {
    console.log( can + shu );
}
/* 依据函数语法一般挪用函数 - 对参数举行修正 */
fun( '...', '这是一个函数' );// 显现 这是一个函数...   修正后显现 ...这是一个函数

/*
    依据Function对象供应的bind()要领举行函数挪用
     * 参数 this 能够先用 null 站位
     * 两个函数之间不会有影响
 */
var fn = fun.bind( null, '这照样一个函数', '...' );
fn();// 显现 这照样一个函数...

重载

  • 示意定义多个同名的函数，但每一个函数可吸收的参数差别
  • 在挪用时会举行推断，函数会依据形参可吸收的个数去婚配传入实参个数雷同的

注重

  • 在JavaScript的函数中不存在重载
  • 当函数同名时，末了一次定义的函数有用
/* 重载征象 */
function fn( a, b ){
    return a + b;
}
function fn( a, b, c ){
    return a + b + c;
}
function fn( a, b, c, d ){
    return a + b + c + d;
}
/* 重载的一般显现 */
fn( 1, 2 );// 显现 3
fn( 1, 2, 3 );// 显现 6
fn( 1, 2, 3, 4 );// 显现 10
/* JavaScript中的显现结果 */
console.log( fn( 1, 2 ) );// 显现 NaN
console.log( fn( 1, 2, 3 ) );// 显现 NaN
console.log( fn( 1, 2, 3, 4 ) );// 显现 10

arguments对象

  • 该对象能够猎取当前指定函数中的所以参数（实参），并存储到一个类数组中
  • 该对象只能在函数中运用
  • length属性 – 示意函数中参数的个数
  • 该要领能够模仿完成函数的重载
function fun(){
    /* 经由过程length属性猎取函数参数的个数 */
    var add = arguments.length;
    /* 再经由过程前提语句举行推断 */
    switch ( add ) {
        /* 依据参数的个数举行显现 */
        case 2:
            /* 因为arguments对象将猎取到的参数储存到一个类数组中，能够运用数组的体式格局举行提取 */
            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];
            break;
    }
}
/* 能够模仿出重载的结果 */
console.log( fun( 1, 2 ) );// 显现 3
console.log( fun( 1, 2, 3 ) );// 显现 6
console.log( fun( 1, 2, 3, 4 ) );// 显现 10

递归

  • 示意在一个函数中，挪用本身

注重

  • 假如不给递归设置一个出口，会涌现类似于轮回语句中的 死轮回

处理

  • 经由过程在递归的过程当中不停转变数据值
  • 在举行前提推断来设置出口
  • 应用return语句的完毕结果，完毕递归

arguments对象的callee属性

  • 该属性示意当前正在实行的函数
function fun() {
    console.log( '啊哈哈' );
    /*
        挪用本身函数 - 完成递归
         * 会涌现类似于轮回语句中的 死轮回
     */
    fun();
}
fun();

/* 能够设置一个轮回出口 */
function fn( a ) {
    console.log( a );
    /* 经由过程前提推断来设置出口 */
    if ( a >= 10 ) {
        /* 应用return语句的完毕结果，完毕递归 */
        return;
    }
    /* 在递归的过程当中不停转变数据值 */
    fn( a + 1 );
}
/* 传入一个数值用于前提推断 */
fn( 0 );

/* 假如将递归函数赋值个一个变量，再将递归函数清空开释，在去实行变量会失足 */
function fu( b ) {
    console.log( b );
    if ( b >= 10 ) {
        return;
    }
    /*
        新函数（s）在实行时，内部的函数体，依然是旧函数（fu）的
        当实行到转变数据值时，挪用的目的依旧是旧函数（fu）而没有更改成新函数（s）
        所以会报错 - TypeError: fu is not a function

        能够经由过程arguments对象的callee属性去替代函数名
        arguments对象的callee属性
         * 该属性示意当前正在实行的函数
     */
    // fu( b + 1 );
    /* 修正后在实行便可一般显现 */
    arguments.callee( b + 1 );
}
fu( 0 );
/* 将递归函数赋值个一个变量 */
var s = fu;
/* 将递归函数清空开释 */
fu = null;
/* 运用函数体式格局实行变量 */
s( 0 );
/* 会报错 */
console.log( s );// 显现 fu is not a function

匿名函数

  • 示意定义一个没有函数名的函数

匿名函数的用法

  • 将匿名函数作为参数通报给其他函数

    • 这类要领也能够叫做 回调函数

  • 将匿名函数用于实行一次性使命

    • 这类要领也能够叫做 自调函数
/* 建立一个匿名函数 */
function (){
    console.log( '啊哈哈' );
}

回调函数

  • 示意一个函数做为参数传入到另一个函数中
/* 定义一个函数 - 该函数做为另一个函数的参数 */
var fn = function () {
    return 10;
}

/* 定义另一个函数 */
var fun = function ( f ) {
    /* 传进该函数体中的是一个函数，能够直接挪用 */
    return f();
}
/* 当前函数的参数为另一个函数 */
var s = fun( fn );
console.log( s );// 显现 10

自调函数

  • 示意在定义函数后自行挪用

用法

  • 第一种 – 两个小括号

    • 第一个小括号 – 定义匿名函数
    • 第二个小括号 – 挪用
/* 第一种要领 */
(function(){
    console.log( '啊哈哈' );
})();

  • 第二种 – 一个小括号中包括另一个小括号

    • 第一个小括号 – 定义匿名函数
    • 第二个小括号（被包括的） – 挪用
/* 第二种要领 */
(function(){
    console.log( '呀吼吼' );
}());

  • 第三种 – 叹号 + 小括号

    • 叹号后写匿名函数
    • 小括号 – 挪用
/* 第三种要领 */
!function(){
    console.log( '哦哦哦' );
}();

作为值的函数

  • 示意一个函数做为另一个函数的返回值
function fun() {
    var s = 10;
    return function () {
        return s;
    }
}
console.log( fun()() );// 显现 10

作用域链

  • 示意函数作用域有权限接见除本身内部的函数作用域以外的其他作用域
  • 而且会把次特征通报个本身内部的函数作用域
var a = 100;// 全局变量
function fun1(){
    var b = 200;// fun1函数作用域的局部变量
    // 内部函数
    function fun2(){
        var c = 300;// fun2函数作用域的局部变量
        // 内部函数
        function fun3(){
            var d = 400;// fun3函数作用域的局部变量
            // 挪用变量
            console.log(a);// 100
            console.log(b);// 200
            console.log(c);// 300
            console.log(d);// 400
        }
        fun3();
        // 挪用变量
        // console.log(a);// 100
        // console.log(b);// 200
        // console.log(c);// 300
        // console.log(d);// d is not defined
    }
    fun2();
    // 挪用变量
    // console.log(a);// 100
    // console.log(b);// 200
    // console.log(c);// c is not defined
    // console.log(d);// d is not defined
}
fun1();

闭包理论

  • 示意在全局作用域能够接见到函数作用域中的数据
  • 作用域的逆向操纵（个人明白）
/* 定义一个全局变量但不赋值 */
var s;
function fun(){
    var v = 100;
    /* 在函数作用域中对全局变量举行赋值 */
    s = function(){
        console.log(v);
    }
    s();
}
fun();// 显现函数体的内容 100
/* 接见全局变量会获得在函数作用域中数值 */
s();// 显现全局变量的值 100
    原文作者：蔡志远
    原文地址: https://segmentfault.com/a/1190000016028321
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞