JavaScript面向對象中的Function類型我的分享

時間 2020-01-27

標籤 javascript 面向對象 function 類型我的分享欄目 JavaScript 简体版

原文原文鏈接

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的

示例代碼:app

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

代碼的執行流程分析圖:
this

Function的apply()方法

apply(thisArg,argArray)方法 - 用於調用一個指定的函數spa
- 參數code
  - 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)中的局部變量,而此變量在外部是經過其餘途徑沒法訪問的
閉包的做用:
- 提供可共享的局部變量
- 保護共享的局部變量.提供專門的讀寫變量的函數
- 避免全局污染