【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