【JavaScript】面向对象之Function类型

JS(JavaScript)

一.Function类型
概述
1.Function与函数；

// 函数声明方式
function fun(){
    console.log('you my function');
}
// 字面量方式
var fn = function(){
    console.log('you my function too');
}
// 判断函数是否为Function类型
console.log(fun instanceof Function);// true
console.log(fn instanceof Function);// true
// JS中所有函数都是Function类型的对象

/*
    3.创建Function类型的对象-是个函数
      var 函数名 = new Function(参数,函数体);
      * 由于函数的参数和函数体都是以字符串形式传递给Function
  */
var f = new Function('a','console.log(a)');
f(100);// 以函数方式进行调用

contstructor属性

// 定义一个构造函数
function Hero(){
    this.name = '犬夜叉';
    this.sayMe = function(){
        console.log('this is function');
    }
}
// 使用构造函数创建对象
var hero = new Hero();
// 对象具有与构造函数相同属性和方法
console.log(hero.name);
hero.sayMe();

// JavaScript中所有对象都是Object类型
console.log(hero.constructor);

Function的length属性

// Function类型的length属性-获取函数的参数(形参)个数

function fn(){
    console.log('you my Inuyasha');
}
fn(1,2,3,4,5);
console.log(fn.length);// 0

2.Function类型；

• Function的apply()方法；

以指定this值，调用个函数，数组作为个参数

// 定义函数
function fun(value){
    console.log('this is ' + value);
}
// 函数的调用方式
fun('function');// 语法结构：函数名称()
/*
    apply(thisArg,argArray)方法 -> 用于调用一个指定函数
    * 参数
      * thisArg - this
      * argArray - 数组，作为参数(实参)的列表
  */
fun.apply(null, ['function']);

• Function的call()方法；

以指定this值为参数，调用个函数，以及参数列表

// 定义函数
function fun(value, value2){
    console.log('this is ' + value);
}
// 函数的调用方式
fun('function', '犬夜叉');// 语法结构：函数名称()

fun.apply(null, ['function','犬夜叉']);
// call()方法 -> 用于调用一个函数
fun.call(null, 'function', '犬夜叉');

• Function的bind()方法；

以指定this值为参数，创建个新函数，以及参数列表

// 定义函数
function fun(value){
    console.log('this is ' + value);
}
/*
    bind(thisArg, arg1, arg2, ...)方法
    * 作用 - 用于创建一个新函数(称为绑定函数)
    * 参数
      * thisArg - this
      * arg1, arg2, ... - 表示参数列表
    * 返回值 - 返回新的函数
 */
// var f = fun.bind();// 相对于从指定函数复制一份出来
// console.log(f);
// f();

fun('桔梗');// this is 桔梗

var f = fun.bind(null, '犬夜叉');
f();// this is 犬夜叉

• 没有重载；

在JS中函数是很么重载现象，如果同时定义多个同名函数的话，只有最后一个定义函数是有效的

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);
add(1,2,3);
add(1,2,3,4);
//JavaScript函数不存在重载 - 当函数同名时，最后一次定义函数有效
console.log(add(1,2));//NaN
console.log(add(1,2,3));//NaN
console.log(add(1,2,3,4));//10

/*
    重载的含义
    1.定义多个同名的函数，但具有数量不同的参数
    2.调用函数，根据传递参数的个数调用指定的函数
 */
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对象
arguments对象也是个类数组对象
length属性-函数实参的个数
用于接收函数参数相当于实参

/*function fn(){
    console.log(arguments[0]);
}
console.log(fn.arguments);// null
fn(1,2,3,4);*/

// 模拟函数的重载效果
function add(){
    var len = arguments.length;
    switch (len) {
        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];
            break;
    }
}

console.log(add(1,2));// 3
console.log(add(1,2,3));// 6
console.log(add(1,2,3,4));// 10

• 递归；

在一个函数的函数内部，调用自身函数，有两种方法；
使用自身函数名实现
使用arguments对象的callee属性实现

//函数递归 - 指定函数的函数体中调用自身函数
/*function fun(){
    // 当前函数的逻辑内容
    console.log('you my function');
    // 调用自身函数 -> 实现递归
    fun();
}
fun();
*/

function fn(v) {
    console.log(v);
    if (v >= 10) {
        return;
    }
    arguments.callee(v + 1);
}

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

3.特殊函数；

• 匿名函数；

函数可以作为数据使用，作为函数自己，跟普通数据一样，不一定有名字

/*
* function (){
*   console.log('you my function');
}*/

/*匿名函数的作用：
    将匿名函数作为参数传递给其他函数 -> 回调函数
    将匿名函数用于执行一次性任务 -> 自调函数
 */

• 回调函数；

当个函数作为参数传递给另一个函数为回调函数

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
/*代码中作为参数函数- 匿名回调函数*/

• 自调函数；

定义函数后自行调用
第一个小括号- 定义函数
第二个小括号- 调用函数

/*
* 自调函数 - 定义即调用函数
* 第一个小括号- 定义函数
* 第二个小括号- 调用函数
 */
//全局作用域 -生命周期；JS(JavaScript)文件从执行到执行完毕
(function (value) {
    console.log('you my' + value);
    // 函数作用域 -生命周期；从函数调用到调用完毕
})('function');
(function (value){
    console.log('you my' + value);
    // 函数作用域 -生命周期；从函数调用到调用完毕
}('function'));

!function (value) {
    console.log('you my' + value);
    // 函数作用域 -生命周期；从函数调用到调用完毕
}('function');

+function (value) {
    console.log('you my' + value);
    // 函数作用域 -生命周期；从函数调用到调用完毕
}('function');

• 作为值得函数；

将个函数作为另一个函数的结果进行返回

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

    return function () {
        return v;
    };
}

var result = fun();
console.log(result);//one函数
console.log(result());//100

console.log(fun()());

4.闭包；

• 作用域链；

一段JS代码，(全局代码和函数)都有个与关联的作用域链，并将作用域是个对象列表和链表

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();

• 闭包是什么；

且内部函数可以访问定义在外部函数中的变量和函数，以及外部函数能访问所有变量和函数，外部函数不能访问内部函数中变量和函数

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