【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