第十章函数

2022-06-17

字数统计: 4.5k字 | 阅读时长≈ 18分

函数实际上是对象。每个函数都是Function 类型的实例，而 Function 也有属性和方法，跟其他引用类型一样。因为函数是对象，所以函数名就是指向函数对象的指针，而且不一定与函数本身紧密绑定。

函数的定义

1、函数声明式
function sum (num1, num2) { return num1 + num2; }

2、函数表达式
let sum = function(num1, num2) { return num1 + num2; };

3、箭头函数
let sum = (num1, num2) => { return num1 + num2; };

4、Function 构造函数
let sum = new Function("num1", "num2", "return num1 + num2"); // 不推荐

箭头函数

1
2
3

箭头函数虽然语法简洁，但也有很多场合不适用。箭头函数不能使用 arguments、super 和 new.target，也不能用作构造函数。此外，箭头函数也没有 prototype 属性。

函数名

	因为函数名就是指向函数的指针，所以它们跟其他包含对象指针的变量具有相同的行为。这意味着 一个函数可以有多个名称，如下所示：
function sum(num1, num2) { return num1 + num2; }

let anotherSum = sum;

anotherSum(10,10); //20
sum(10,20);//20

	ECMAScript 6 的所有函数对象都会暴露一个只读的 name 属性，其中包含关于函数的信息。多数情 况下，这个属性中保存的就是一个函数标识符，或者说是一个字符串化的变量名。即使函数没有名称， 也会如实显示成空字符串。如果它是使用 Function 构造函数创建的，则会标识成"anonymous"：

function foo() {} 
let bar = function() {}; 
let baz = () => {}; 
console.log(foo.name); // foo 
console.log(bar.name); // bar 
console.log(baz.name); // baz 
console.log((() => {}).name); //（空字符串） 
console.log((new Function()).name); // anonymous

如果函数是一个获取函数、设置函数，或者使用 bind()实例化，那么标识符前面会加上一个前缀：,get,set,bound

 function foo() {} 
 console.log(foo.bind(null).name); // bound foo
let dog = { 
    years: 1, 
    get age() { 
        return this.years; 
    }, 
    set age(newAge) { 
        this.years = newAge; 
    } 
} 
let propertyDescriptor = Object.getOwnPropertyDescriptor(dog, 'age'); console.log(propertyDescriptor.get.name); // get age 
console.log(propertyDescriptor.set.name); // set age

函数参数

1
2
3

定义函数时要接收两个参数，并不意味者调用时就只能传入两个参数，多传，少传，不传。解释器都不会报错。因为ECMAScript 函数的参数在内部表现为一个数组。函数（除箭头函数）都可以从函数内部访问 arguments 对象获取传进来的每个参数值。

默认参数值

es5之前 常用的方式：检测某个参数是否等于 undefined，如果是就意味着没传，那就给它赋值
function makeKing(name) { 
    name = (typeof name !== 'undefined') ? name : 'Henry'; 
    return `King ${name} VIII`; 
}

es6显式支持默认参数
function makeKing(name = 'Henry') { 
    return `King ${name} VIII`; 
}

默认参数值并不限于原始值或对象类型，也可以使用调用函数返回的值：


默认参数的作用域与暂时性死区

	参数初始化顺序遵循“暂时性死区”规则，即前面定义的参数不能引用后面定义的。
    // 调用时不传第一个参数会报错 
    function makeKing(name = numerals, numerals = 'VIII') { 
        return `King ${name} ${numerals}`; 
    }

	参数也存在于自己的作用域中，它们不能引用函数体的作用域： 
    // 调用时不传第二个参数会报错 
    function makeKing(name = 'Henry', numerals = defaultNumeral) { 
        let defaultNumeral = 'VIII'; 
        return `King ${name} ${numerals}`; 
    }

参数的扩展与收集

ES6新增扩展操作符，它可以简洁的操作和组合集合数据

1、扩展参数
function getSum() { 
    let sum = 0; 
    for (let i = 0; i < arguments.length; ++i) { 
        sum += arguments[i]; 
    } 
    return sum; 
}

let values = [1, 2, 3, 4];


console.log(getSum(0, ...values,5)); // 15


2、收集参数

	收集参数的前面如果还有命名参数，则只会收集其余的参数；如果没有则会得到空数组。因为收集 参数的结果可变，所以只能把它作为最后一个参数：


function getSum(...values) { 
    // 顺序累加 values 中的所有值 
    // 初始值的总和为 0 
    return values.reduce((x, y) => x + y, 0); 
} 
console.log(getSum(1,2,3)); // 6

函数声明与函数表达式

-函数声明

	函数声明会在任何代码执行之前先被读取并添加到执行上下文,可以在声明函数 前的行数代码中调用它
    
-函数表达式
	不会被提升到源代码树的顶部，只能在 声明表达式 行后面使用此函数

函数内部

es5中 ，函数内部只存在两个特殊对象： arguments，this; es6 新增了 new.target

-arguments
	它是类数组，包含了调用函数时传入的所有参数
    -arguments.callee 
		指向arguments对象所在函数的指针（如函数名）
    Arguments对象可以追溯到JavaScript诞生之初，也有一些奇怪的历史包袱，导致它效率低且难优化，特别是在非严格模式下。阅读代码的时候，我们还是可以看到Arguments的身影，但在新写的代码中应该避免使用它。在重构老代码时，如果碰到了使用arguments的函数，通常可以将其替换为...args剩余形参。由于Arguments对象属于历史遗留问题，在严格模式下，arguments会被当成保留字。因此不能用这个名字来声明函数形参或局部变量
-this
	this，它在标准函数和箭头函数中有不同的行为。
	标准函数中， this 引用把函数当成方法调用的上下文对象（全局上下文调用时，this指向windows）
	在箭头函数中，this 引用的是 定义箭头函数的上下文。
-caller
	es5 会给函数对象上添加一个属性：caller。
	ECMAScript 3 中并没有定义，但所 有浏览器除了早期版本的 Opera 都支持这个属性。这个属性引用的是调用当前函数的函数，或者如果是 在全局作用域中调用的则为 null。
	
    function outer() { 
        inner(); 
    } 
	function inner() { 
        console.log(arguments.callee.caller); 
    } 
	outer();//f outer(){...};

    
	在严格模式下访问 arguments.callee 会报错。ECMAScript 5 也定义了 arguments.caller，但 在严格模式下访问它会报错，在非严格模式下则始终是 undefined。这是为了分清 arguments.caller 和函数的 caller 而故意为之的。而作为对这门语言的安全防护，这些改动也让第三方代码无法检测同 一上下文中运行的其他代码。 严格模式下还有一个限制，就是不能给函数的 caller 属性赋值，否则会导致错误。

 -new.target
	new.target 的值是 undefined；如果是使用 new 关键字调用的，则 new.target 将引用被调用的 构造函数。

函数的属性与方法

中的函数是对象，因此有属性和方法。每个函数都有两个属性：length 和 prototype。
-length 属性保存函数定义的命名参数的个数
-prototype es5中不可枚举，for in 不会返回这个属性

函数还有 call,appay。两个方法指定 this的值来调用函数

bind
	bind()方法的主要目的是把函数绑定到对象。如果在函数f上调用bind()方法并传入对象o，则这个方法会返回一个新函数。如果作为函数来调用这个新函数，就会像f是o的方法一样调用原始函数。传给这个新函数的所有参数都会传给原始函数。例如
    function f(y) {return this.x + y};
	let o = {x: 1};
	let g = f.bind(o);
	g(2);// 3
	let p = {x: 10, g};
	p.g(2);// 3

【注意】 在严格模式下，调用函数时如果没有指定上下文对象，则 this 值不会指向 window。 除非使用 apply()或 call()把函数指定给一个对象，否则 this 的值会变成 undefined。

Function构造函数

【注意】
	Function()构造函数不接收任何指定新函数名字的参数。与函数字面量一样，Function()构造函数创建的也是匿名函数。
    
要理解Function()构造函数，需要理解以下几点。
1·Function()函数允许在运行时动态创建和编译JavaScript函数。
2·Function()构造函数每次被调用时都会解析函数体并创建一个新函数对象。如果在循环中或者被频繁调用的函数中出现了对它的调用，可能会影响程序性能。相对而言，出现在循环中的嵌套函数和函数表达式不会每次都被重新编译。
3·最后，也是关于Function()非常重要的一点，就是它创建的函数不使用词法作用域，而是始终编译为如同顶级函数一样，

如以下例子所示：
	let scope = 'global';
	funnction constructFunction () {
        let scope = 'local';
        return new Function("return scoped");
    }
	constructFunction() () // global

最好将Function()构造函数作为在自己私有作用域中定义新变量和函数的eval()的全局作用域版。
我们自己写的代码中可能永远也用不到这个构造函数

递归

递归函数通常的形式是一个函数通过名称调用自己，如下面的例子所示： 
function factorial(num) { 
    if (num <= 1) { 
        return 1; 
    } else {
        return num * factorial(num - 1); 
    } 
}


//解耦写法
function factorial(num) { 
    if (num <= 1) { 
        return 1; 
    } else { 
        return num * arguments.callee(num - 1); 
    } 
}

尾调

	ECMAScript 6 规范新增了一项内存管理优化机制，让 JavaScript 引擎在满足条件时可以重用栈帧。 具体来说，这项优化非常适合“尾调用”，即外部函数的返回值是一个内部函数的返回值。比如： 

function outerFunction() { 
    return innerFunction(); // 尾调用 
}

【注意】 现在还没有办法测试尾调用优化是否起作用。不过，因为这是 ES6 规范所规定的， 兼容的浏览器实现都能保证在代码满足条件的情况下应用这个优化。

尾调用优化的条件：

 代码在严格模式下执行； 
 外部函数的返回值是对尾调用函数的调用；
 尾调用函数返回后不需要执行额外的逻辑；
 尾调用函数不是引用外部函数作用域中自由变量的闭包。

【注意】之所以要求严格模式，主要因为在非严格模式下函数调用中允许使用 f.arguments 和 f.caller，而它们都会引用外部函数的栈帧。显然，这意味着不能应用优化了。因此 尾调用优化要求必须在严格模式下有效，以防止引用这些属性。

 
计算斐波纳契数列的函数： 
function fib(n) { 
    if (n < 2) { 
        return n; 
    } 
    return fib(n - 1) + fib(n - 2); 
}

尾调优化
"use strict"; 
// 基础框架 
function fib(n) { 
    return fibImpl(0, 1, n); 
} 
// 执行递归 
function fibImpl(a, b, n) { 
    if (n === 0) { 
        return a; 
    } 
    return fibImpl(b, a + b, n - 1);
}

闭包

1 2	匿名函数经常被人误认为是闭包（closure）。闭包指的是那些引用了另一个函数作用域中变量的函数

内存泄漏

	IE 在 IE9 之前对 JScript 对象和 COM 对象使用了不同的垃圾回收机制（标记清理/引用计数），所以 闭包在这些旧版本 IE 中可能会导致问题。

function assignHandler() { 
    let element = document.getElementById('someElement'); 
    element.onclick = () => console.log(element.id);
}

	而这个处理程序又创建了一个循环引用。匿名函数引用着 assignHandler()的活动对象，阻止了对 element 的引用计数归零。只要这个匿名函数存在，element 的引用计数就至少等于 1。也就是说， 内存不会被回收。其实只要这个例子稍加修改，就可以避免这种情况，比如：

function assignHandler() { 
    let element = document.getElementById('someElement'); 
    let id = element.id; 
    element.onclick = () => console.log(id); 
    element = null; 
}

立即调用函数

	使用 IIFE 可以模拟块级作用域，即在一个函数表达式内部声明变量，然后立即调用这个函数。这 样位于函数体作用域的变量就像是在块级作用域中一样。ECMAScript 5 尚未支持块级作用域，使用 IIFE 模拟块级作用域是相当普遍的。比如下面的例子： 
    // IIFE 
    (function () { 
        for (var i = 0; i < count; i++) { 
            console.log(i); 
        }
    })(); 
	
	console.log(i); 	// 抛出错误

es6后，let、const 可以声明块级作用域变量

函数的私有变量

function add(num1, num2) { 
    let sum = num1 + num2; 
    return sum; 
} 
	在这个函数中，函数 add()有 3 个私有变量：num1、num2 和 sum。这几个变量只能在函数内部使 用，不能在函数外部访问。如果这个函数中创建了一个闭包，则这个闭包能通过其作用域链访问其外部 的这 3 个变量。基于这一点，就可以创建出 能够访问 私有变量的 公有方法。

function Person(name) { 
    this.getName = function() { 
        return name; 
    }; 
    this.setName = function (value) { 
        name = value; 
    }; 
} 
let person = new Person('Nicholas'); 
console.log(person.getName()); // 'Nicholas' 
person.setName('Greg'); 
console.log(person.getName()); // 'Greg'


静态私有变量
(function() { 
    let name = ''; 
    Person = function(value) { 
        name = value; 
    }; 
    Person.prototype.getName = function() { 
        return name; 
    }; 
    Person.prototype.setName = function(value) { 
        name = value; 
    }; 
})();
let person1 = new Person('Nicholas'); 
console.log(person1.getName()); // 'Nicholas' 
person1.setName('Matt'); 
console.log(person1.getName()); // 'Matt'

【注意】 使用闭包和私有变量会导致作用域链变长，作用域链越长，则查找变量所需的时间 也越多。


模块模式是在单例对象基础上加以扩展，使其通过作用域链来关联私有变量和特权方法。模块模式 的样板代码如下： let singleton = function() { 
    // 私有变量和私有函数 
    let privateVariable = 10; 
    function privateFunction() { 
        return false; 
    } 
    // 特权/公有方法和属性 
    return { 
        publicProperty: true, 
        publicMethod() { 
            privateVariable++; 
            return privateFunction(); 
        } 
    }; 
}();



模块增强模式
let singleton = function() { 
    // 私有变量和私有函数 
    let privateVariable = 10; 
    function privateFunction() { 
        return false; 
    } 
    // 创建对象 ，对 CustomType 进行增强
    let object = new CustomType(); 
    // 添加特权/公有属性和方法 
    object.publicProperty = true; 
    object.publicMethod = function() { 
        privateVariable++; 
        return privateFunction(); 
    }; 
    // 返回对象 
    return object; 
}();

Function 与 object

Object、Function和其它对象的关系可以归纳为下面四点：

1、一切对象都最终继承自Object对象，Object对象直接继承自根源对象null

	.... → Object.prototype → null。
    例如定义一个num变量var num = 1，
    则num的原型链为x → Number.prototype → Object.prototype → null; 

	定义一个函数对象fnfunction fn() {}，
    则fn的原型链为fn → Function.prototype → Object.prototype → null;等等...
    
    一切对象都包含有Object的原型方法，Object的原型方法包括了toString、valueOf、hasOwnProperty等等，在js中不管是普通对象，还是函数对象都拥有这些方法

2、一切函数对象（包括Object对象)都直接继承自Function对象
	函数对象包括了Function、Object、Array、String、Number，还有正则对象RegExp、Date对象等等，它们在js中的构造源码都是function xxx() {[native code]);，Function其实不仅让我们用于构造函数，它也充当了函数对象的构造器，甚至它也是自己的构造器。

从原型链可以佐证：

 js中 对象.__proto__ === 构造器.prototype，由此可以见得它们之间的关系。
                                                                                               
 
3、Object对象直接继承自Function对象
4、Function对象直接继承自己，最终继承自Object对象

【疑问】
 1）Object对象都继承自Function对象了，而一切对象又都继承自Object对象，这边是不是有矛盾，Object对象和Function对象的关系是不是有点♂复♀杂？

   答：其实疑问的内容就是上面结论的三四点，它们没有矛盾，关系也不复杂。

 （1）.一切对象都继承自Object对象是因为一切对象的原型链最终都是.... → Object.prototype → null，包括Function对象，只是Function的原型链稍微绕了一点，
    Function的原型链为Function → Function.prototype → Object.prototype → null，它与其它对象的特别之处就在于它的构造器为自己，即直接继承了自己，最终继承于Object，上面的原型链可以在浏览器验证：
    
 （2）. Object继承自Function，Object的原型链为 Object → Function.prototype → Object.prototype → null，原型链又绕回来了，并且跟第一点没有冲突。可以说Object和Function是互相继承的关系
 
2）一切对象继承自Object，Object又继承自Function，那一切对象是不是都有Function的原型方法？

答：不对，普通对象都没有Function的原型方法。从我们所写原型链中可以看出，Object是继承自Function，而Object也有Function的原型方法（比如bind），但Object继承得到的方法储存于__proto__属性中，普通对象从Object继承到的原型方法却在于prototype属性中，因而不对。

3）Function对象怎么那么怪，自己继承自己？

答：就是 就是。

Function.prototype.addMethod = function(options){
   let keys = Object.keys(options);
   for(let i = 0; i< keys.length; i++){
       this.prototype[keys[i]] = options[keys[i]];
   }
}

//扩充类型
Function.prototype.method = function (name, fn){
    if(!this.prototype[name]){
		this.prototype[name] = fn;
    }
    return this;
}
//柯里化
Function.method('curry', function(){
	var args = arguments, that = this;
    return function(){
		return that.apply(null, [...args,...arguments]);
    }
})
//继承
 function.method('inherits',function(Parent){
     this.prototype = new Parent();
     return this;
 })

部件

var eventuallity = function(that){
        var register  ={};
        that.fire = function (event){
                var array,
                func,
                handler,
                i,
                type = typeof event === 'string'?event : event.type;
                if(register.hasOwnProperty(type)){
                        array = register[type];
                        for(i = 0; i<array.length; i++){
                                handler = array[i];
                                func = handler.method;
                                if(typeof func === 'string'){
                                        func = this[func]
                                }
                                func.apply(this, handler.parameters || [event]);
                        }
                }
                return this;
        };
        that.on = function (type, method, parameters){
                var handler = {
                        method:method,
                        parameters:parameters
                };
                if(register.hasOwnProperty(type)){
                        register[type].push(handler);
                }else{
                        register[type] = [handler]
                }
                return this;
        }
        return that;
}

let obj = {
        name:123,
        age:18
}

eventuallity(obj);
console.log(obj);
obj.on('log',function(args){
        console.log('log:',args);
},['参数']);

obj.fire('log');

本文作者： 王不留行
本文链接： https://wyf195075595.github.io/2022/06/17/programming/红宝书笔记/第十章函数/
版权声明： 本博客所有文章除特别声明外，均采用 MIT 许可协议。转载请注明出处！