javaScript function
一、形参和实参
1.可选形参
//给参数赋初值做到形参可选
function f(a,b){
b = b || 0; //给参数b赋初值
return a+b;
}
//ES6写法
function f(a=1,b=0){
return a+b;
}
f(); //1
2.函数参数优化
函数参数的优化的目的是使函数在调用时更方便，运行时更健壮
//针对函数参数过多记不住参数顺序优化，
//使用对象属性,通过键值对传入参数
function easyCopy(args){
copy(args.from, args.from_start=0, args.to,args.to_start=0,args.length)
}
let a = [1,2,3,4],b=[];
easyCopy({to:b,from:a,length:a.length});
//以上函数完成了从a到b的数组拷贝，实参传递时使用对象属性形式，不必关心参数的顺序
//运行时检测实参类型，防止非法实参在程序运行时报错
//以下求和函数返回数组或类数组元素的累加和
function sum(a){
if(isArrayLike(a)){ //isArrayLike检测参数是否为类数组
let total = 0;
for(let i = 0;i<a.length;i++){
let element = a[i];
if(element == null) continue;//跳过null和undefined
if(isFinite(element)) total += element;
else throw new Error('elements must be finite numbers')；
}
return total;
}
else throw new Error('arguments must be array-like')；
}
3.arguments
- arguments是一个类数组实参对象，拥有length和数字索引，没有数组方法
function f(x,y){
return arguments[0]+arguments[1]+arguments.length;
}
- arguments.callee
指向正在执行的函数，在递归函数中很有用，需要注意的是arguments.callee在严格模式中不支持
function factorial(n){
if(n == 1) return n;
return n * arguments.callee(n-1);
}
factorial(5); //120
//使用arguments.callee有一个好处，不受函数名改变的限制，
//可以实现匿名函数递归，还能防止函数名改变出错，看以下例子
function factorial1(n){
if(n == 1) return n;
return n * factorial1(n-1);
}
let f = factorial1;
factorial1 = null;
f(5); // Uncaught TypeError: factorial1 is not a function
//使用arguments.callee实现递归则不会出现此问题
let fun = factorial;
factorial = null;
fun(5); //120
- arguments.caller
指代调用当前正在执行函数的函数，通过caller可以访问调用栈，同样，严格模式不支持
二、函数调用
函数调用最需要关心的是this的指向，方法和this关键字是面向对象编程的核心
1.作为普通函数调用
作为普通函数调用this指向全局对象(非严格模式)或者undefined(严格模式)
function f(){
return this;
}
f();//window
'use strict'
function f1(){
return this;
}
f1();//undefined
2.作为对象方法调用
- this指向调用该函数的对象
let obj = {
name : 'Henry',
getName : function(){
return this.name;
}
}
obj.getName(); //'Henry'
- 对象里的嵌套函数
作为函数调用指向全局或undefined，作为方法调用指向调用它的函数
var o = {
checkThis: function(){
let self = this; //将this保存至一个变量
console.log(this == o); //true,this指代对象o
f();
function f(){ //定义对象内嵌套函数
console.log(this); //window
console.log(self == o);//true
}
}
}
3.作为构造函数调用
this指向返回的对象
let myClass = function(){
this.name = 'Henry';
}
let obj = new myClass();
console.log(obj.name);//'Henry'
4.通过call和apply调用
this指向第一个参数，第一个参数传入null指向window(非严格模式)或undefined(严格模式)
let name = 'window'
function getName(){
return this.name;
}
let obj = {
name : 'Henry',
}
getName(); //'window'
getName.call(obj); //'Henry',this指向obj, this.name相当于obj.name
getName.apply(obj); //'Henry'
5.丢失的this
看下面的例子
let obj = {
name : 'Henry',
getName : function(){
return this.name;
}
}
obj.getName();//'Henry',this指向obj
let getName2 = obj.getName;
window.name = 'window'
getName2(); //'window',此时相当于普通函数调用，this指向window对象
//当对象的方法赋值给一个普通函数时this指向改变，不再指向原对象
三、闭包
理解闭包最重要的是理解变量的作用域和作用域链
1.变量的作用域及作用域链
- 函数内变量的作用域是在函数定义时决定的，不是函数调用时决定的
- 函数内声明的变量是局部变量，会覆同名的全局变量
- 函数的作用域链可以理解为一个对象列表，每次函数调用都会为之创建一个新的对象用来保存局部变量，把这个对象添加至作用域链当中,当函数中搜索一个变量时，如果函数内部没有声明此变量，会随着作用域链往外层搜索，一直到全局
var scope = 'global';
function checkScope(){
let scope = 'local';
function f(){return scope};
return f;
}
checkScope()(); //'local'
此例在外部调用了嵌套函数，checkScope没有直接返回嵌套函数执行结果，而是返回了函数对象。
f函数执行时用到了作用域链，这个作用域链是在函数f定义时创建的，函数f的定义在checkScope内部，所以作用域链的第一级是checkScope函数内部，第二级是window，首先搜索到的scope变量是'local'
2.变量的生命周期
- 全局变量的生命周期是永久的，除非主动删除
- 函数内部局部变量的生命周期在函数调用完成后结束
- 闭包内的局部变量在函数调用结束后生命被延续
function func(){
let a = 1;
return function(){
a++;
return a;
}
}
let f = func();
f();//2
f();//3
f();//4
当执行let f = func();时，f获得了一个匿名函数的引用，它可以访问到func()被调用时产生的环境，局部变量a一直在这个环境中。既然局部变量所在的环境还能被外界访问，这个局部变量就有了不被销毁的理由。在这个闭包结构中，局部变量的生命被延续了。
四、函数的属性，方法
1.属性
函数定义时参数的个数，arguments.callee.length，可以理解为期望传入的实参个数，不是arguments.length的length，arguments.length是实际传入的实参个数
//此函数使用arguments.callee,不能在严格模式下运行
function check(args){
let actual = args.length; //实参的真实个数
var expected = args.callee.length; //期望实参个数
if(actual != expected){
throw Error("Expected" + expected + 'args;got' + actual)；
}
}
function(x,y,z){
check(arguments); //检查实参个数与期望个数是否一致
/**函数逻辑*/
}
2.函数方法
- call/apply
call和apply的第一个参数是要调用的函数的母对象，指定this指向，apply的第二个参数是数组形式的参数对象，call其实是apply的一颗语法糖，后面的参数以单个实参的方式给出
call和apply的用途
(1)改变this指向
var name = 'window';
let obj = {
name : 'Henry'
}
function getName(){
return this.name;
}
geName(); //'window'
getName.call(obj); //'Henry'
(2)借用其他对象的方法
function testCall(){
Array.prototype.push.call(arguments,4,5);
return Array.prototype.map.call(arguments,value=>return value+1;);
}
testCall(1,2,3);//[2,3,4,5,6]
//arguments是类数组没有数组方法，但是可以借用数组的方法，
//testCall函数里arguments两次借用数组方法，
//第一次给arguments元素尾部加上4,5;
//第二次用map方法给arguments所有元素加1
(3)模拟bind
Function.prototype.bind = function(context){
var self = this; //保存原函数
return function(){
return self.apply(context, arguments);
//执行时将传入的context当成新函数体内的this
}
}
- bind
指定函数内部this指向
var obj = {
name:'Henry'
};
var func = function(){
console.log(this.name)
}.bind(obj);
func();//Henry，func函数的内部指向被绑定到了对象obj
