函数进阶

基础知识

houdunren.com (opens new window)@ 向军大叔
函数是将复用的代码块封装起来的模块，在JS中函数还有其他语言所不具有的特性，接下来我们会详细掌握使用技巧。

#声明定义

在JS中函数也是对象函数是Function类的创建的实例，下面的例子可以方便理解函数是对象。
let hd = new Function(“title”, “console.log(title)”);
hd(‘后盾人’);
标准语法是使用函数声明来定义函数
function hd(num) {
return ++num;
}
console.log(hd(3));
对象字面量属性函数简写
let user = {
name: null,
getName: function (name) {
return this.name;
},
//简写形式
setName(value) {
this.name = value;
}
}
user.setName(‘后盾人’);
console.log(user.getName()); // 后盾人
全局函数会声明在window对象中，这不正确建议使用后面章节的模块处理
console.log(window.screenX); //2200
当我们定义了 screenX 函数后就覆盖了window.screenX方法
function screenX() {
return “后盾人”;
}
console.log(screenX()); //后盾人
使用let/const时不会压入window
let hd = function() {
console.log(“后盾人”);
};
window.hd(); //window.hd is not a function

#匿名函数

函数是对象所以可以通过赋值来指向到函数对象的指针，当然指针也可以传递给其他变量，注意后面要以;结束。下面使用函数表达式将 匿名函数 赋值给变量
let hd = function(num) {
return ++num;
};

console.log(hd instanceof Object); //true

let cms = hd;
console.log(cms(3));
标准声明的函数优先级更高，解析器会优先提取函数并放在代码树顶端，所以标准声明函数位置不限制，所以下面的代码可以正常执行。
console.log(hd(3));
function hd(num) {
return ++num;
};
标准声明优先级高于赋值声明
console.log(hd(3)); //4

function hd(num) {
return ++num;
}

var hd = function() {
return “hd”;
};
程序中使用匿名函数的情况非常普遍
function sum(…args) {
return args.reduce((a, b) => a + b);
}
console.log(sum(1, 2, 3));

#立即执行

立即执行函数指函数定义时立即执行

• 可以用来定义私有作用域防止污染全局作用域

“use strict”;
(function () {
var web = ‘houdunren’;
})();
console.log(web); //web is not defined
使用 let/const 有块作用域特性，所以使用以下方式也可以产生私有作用域
{
let web = ‘houdunren’;
}
console.log(web);

#函数提升

函数也会提升到前面，优先级行于var变量提高
console.log(hd()); //后盾人
function hd() {
return ‘后盾人’;
}
变量函数定义不会被提升
console.log(hd()); //后盾人

function hd() {
return ‘后盾人’;
}
var hd = function () {
return ‘hdcms.com’;
}

#形参实参

形参是在函数声明时设置的参数，实参指在调用函数时传递的值。

• 形参数量大于实参时，没有传参的形参值为 undefined
• 实参数量大于形参时，多于的实参将忽略并不会报错

// n1,n2 为形参
function sum(n1, n2) {
return n1+n2;
}
// 参数 2,3 为实参
console.log(sum(2, 3)); //5
当没传递参数时值为undefined
function sum(n1, n2) {
return n1 + n2;
}
console.log(sum(2)); //NaN

#默认参数

下面通过计算年平均销售额来体验以往默认参数的处理方式
//total:总价 year:年数
function avg(total, year) {
year = year || 1;
return Math.round(total / year);
}
console.log(avg(2000, 3));
使用新版本默认参数方式如下
function avg(total, year = 1) {
return Math.round(total / year);
}
console.log(avg(2000, 3));
下面通过排序来体验新版默认参数的处理方式，下例中当不传递 type 参数时使用默认值 asc。
function sortArray(arr, type = ‘asc’) {
return arr.sort((a, b) => type == ‘asc’ ? a - b : b - a);
}
console.log(sortArray([1, 3, 2, 6], ‘desc’));
默认参数要放在最后面
//total:价格,discount:折扣,dis:折后折
function sum(total, discount = 0, dis = 0) {
return total (1 - discount) (1 - dis);
}
console.log(sum(2000, undefined, 0.3));

#函数参数

函数可以做为参数传递，这也是大多数语言都支持的语法规则。

订阅


函数可以做为参数传递
function filterFun(item) {
return item <= 3;
}
let hd = [1, 2, 3, 4, 5].filter(filterFun);
console.log(hd); //[1,2,3]

#arguments

arguments 是函数获得到所有参数集合，下面是使用 arguments 求和的例子
function sum() {
return […arguments].reduce((total, num) => {
return (total += num);
}, 0);
}
console.log(sum(2, 3, 4, 2, 6)); //17
更建议使用展示语法
function sum(…args) {
return args.reduce((a, b) => a + b);
}
console.log(sum(2, 3, 4, 2, 6)); //17

#箭头函数

箭头函数是函数声明的简写形式，在使用递归调用、构造函数、事件处理器时不建议使用箭头函数。
无参数时使用空扩号即可
let sum = () => {
return 1 + 3;
}
console.log(sum()); //4
函数体为单一表达式时不需要 return 返回处理，系统会自动返回表达式计算结果。
let sum = () => 1 + 3;
console.log(sum()); //4
多参数传递与普通声明函数一样使用逗号分隔
let hd = [1, 8, 3, 5].filter((item, index) => {
return item <= 3;
});
console.log(hd);
只有一个参数时可以省略括号
let hd = [1, 8, 3, 5].filter(item => item <= 3);
console.log(hd);
有关箭头函数的作用域知识会在后面章节讨论

#递归调用

递归指函数内部调用自身的方式。

• 主要用于数量不确定的循环操作
• 要有退出时机否则会陷入死循环

下面通过阶乘来体验递归调用
function factorial(num = 3) {
return num == 1 ? num : num factorial(—num);
}
console.log(factorial(5)); //120
累加计算方法
function sum(…num) {
return num.length == 0 ? 0 : num.pop() + sum(…num);
}
console.log(sum(1, 2, 3, 4, 5, 7, 9)); //31
递归打印倒三角
**
**
*

*

function star(row = 5) {
if (row == 0) return “”;
document.write(“*”.repeat(row) + “
“);
star(—row);
}
使用递归修改课程点击数
let lessons = [
{
title: “媒体查询响应式布局”,
click: 89
},
{
title: “FLEX 弹性盒模型”,
click: 45
},
{
title: “GRID 栅格系统”,
click: 19
},
{
title: “盒子模型详解”,
click: 29
}
];
function change(lessons, num, i = 0) {
if (i == lessons.length) {
return lessons;
}
lessons[i].click += num;
return change(lessons, num, ++i);
}
console.table(change(lessons, 100));

#回调函数

在某个时刻被其他函数调用的函数称为回调函数，比如处理键盘、鼠标事件的函数。
button

使用回调函数递增计算
let hd = ([1, 2, 3]).map(item => item + 10);
console.log(hd)

#展开语法

展示语法或称点语法体现的就是收/放特性，做为值时是放，做为接收变量时是收。
let hd = [1, 2, 3];
let [a, b, c] = […hd];
console.log(a); //1
console.log(b); //2
console.log(c); //3
[…hd] = [1, 2, 3];
console.log(hd); //[1, 2, 3]
使用展示语法可以替代 arguments 来接收任意数量的参数
function hd(…args) {
console.log(args);
}
hd(1, 2, 3, “后盾人”); //[1, 2, 3, “后盾人”]
也可以用于接收部分参数
function hd(site, …args) {
console.log(site, args); //后盾人 (3) [1, 2, 3]
}
hd(“后盾人”, 1, 2, 3);
使用 … 可以接受传入的多个参数合并为数组，下面是使用点语法进行求合计算。
function sum(…params) {
console.log(params);
return params.reduce((pre, cur) => pre + cur);
}
console.log(sum(1, 3, 2, 4));
多个参数时…参数必须放后面，下面计算购物车商品折扣
function sum(discount = 0, …prices) {
let total = prices.reduce((pre, cur) => pre + cur);
return total * (1 - discount);
}
console.log(sum(0.1, 100, 300, 299));

#标签函数

使用函数来解析标签字符串，第一个参数是字符串值的数组，其余的参数为标签变量。
function hd(str, …values) {
console.log(str); //[“站点”, “-“, “”, raw: Array(3)]
console.log(values); //[“后盾人”, “houdunren.com”]
}
let name = ‘后盾人’,url = ‘houdunren.com’;
hd 站点${name}-${url};

#this

调用函数时 this 会隐式传递给函数指函数调用时的关联对象，也称之为函数的上下文。

#函数调用

全局环境下this就是window对象的引用

使用严格模式时在全局函数内this为undefined
var hd = ‘后盾人’;
function get() {
“use strict”
return this.hd;
}
console.log(get());
//严格模式将产生错误 Cannot read property ‘name’ of undefined

#方法调用

函数为对象的方法时this 指向该对象
可以使用多种方式创建对象，下面是使用构造函数创建对象
构造函数
函数当被 new 时即为构造函数，一般构造函数中包含属性与方法。函数中的上下文指向到实例对象。

• 构造函数主要用来生成对象，里面的this默认就是指当前对象

function User() {
this.name = “后盾人”;
this.say = function() {
console.log(this); //User {name: “后盾人”, say: ƒ}
return this.name;
};
}
let hd = new User();
console.log(hd.say()); //后盾人
对象字面量

• 下例中的hd函数不属于对象方法所以指向window
• show属于对象方法执向 obj对象

let obj = {
site: “后盾人”,
show() {
console.log(this.site); //后盾人
console.log(this in show method: ${this}); //this in show method: [object Object]
function hd() {
console.log(typeof this.site); //undefined
console.log(this in hd function: ${this}); //this in hd function: [object Window]
}
hd();
}
};
obj.show();
在方法中使用函数时有些函数可以改变this如forEach，当然也可以使用后面介绍的apply/call/bind
let Lesson = {
site: “后盾人”,
lists: [“js”, “css”, “mysql”],
show() {
return this.lists.map(function(title) {
return ${this.site}-${title};
}, this);
}
};
console.log(Lesson.show());
也可以在父作用域中定义引用this的变量
let Lesson = {
site: “后盾人”,
lists: [“js”, “css”, “mysql”],
show() {
const self = this;
return this.lists.map(function(title) {
return ${self.site}-${title};
});
}
};
console.log(Lesson.show());

#箭头函数

箭头函数没有this, 也可以理解为箭头函数中的this 会继承定义函数时的上下文，可以理解为和外层函数指向同一个this。

• 如果想使用函数定义时的上下文中的this，那就使用箭头函数

下例中的匿名函数的执行环境为全局所以 this 指向 window。
var name = ‘hdcms’;
var obj = {
name: ‘后盾人’,
getName: function () {
return function () {
return this.name;
}
}
}
console.log(obj.getName()()); //返回window.name的值hdcms
以往解决办法会匿名函数调用处理定义变量，然后在匿名函数中使用。
var name = ‘hdcms’;
var obj = {
name: ‘后盾人’,
getName: function () {
var self = this;
return () => {
return this.name;
}
}
}
console.log(obj.getName()()); //返回window.name的值hdcms
使用箭头函数后 this 为定义该函数的上下文，也可以理解为定义时父作用域中的this
var name = ‘hdcms’;
var obj = {
name: ‘后盾人’,
getName: function () {
return () => {
return this.name;
}
}
}
console.log(obj.getName()()); //后盾人
事件中使用箭头函数结果不是我们想要的

• 事件函数可理解为对象onclick设置值，所以函数声明时this为当前对象
• 但使用箭头函数时this为声明函数上下文

下面体验使用普通事件函数时this指向元素对象
使用普通函数时this为当前DOM对象

button


下面是使用箭头函数时this指向上下文对象

button


使用handleEvent绑定事件处理器时，this指向当前对象而不是DOM元素。

button

#apply/call/bind

改变this指针，也可以理解为对象借用方法，就现像生活中向邻居借东西一样的事情。

#原理分析

构造函数中的this默认是一个空对象，然后构造函数处理后把这个空对象变得有值。
function User(name) {
this.name = name;
}
let hd = new User(“后盾人”);
可以改变构造函数中的空对象，即让构造函数this指向到另一个对象。
function User(name) {
this.name = name;
}

let hdcms = {};
User.call(hdcms, “HDCMS”);
console.log(hdcms.name); //HDCMS

#apply/call

call与apply 用于显示的设置函数的上下文，两个方法作用一样都是将对象绑定到this，只是在传递参数上有所不同。

• apply 用数组传参
• call 需要分别传参
• 与 bind 不同 call/apply 会立即执行函数

语法使用介绍
function show(title) {
alert(${title+this.name});
}
let lisi = {
name: ‘李四’
};
let wangwu = {
name: ‘王五’
};
show.call(lisi, ‘后盾人’);
show.apply(wangwu, [‘HDCMS’]);
使用 call 设置函数上下文

button
button


找数组中的数值最大值
let arr = [1, 3, 2, 8];
console.log(Math.max(arr)); //NaN
console.log(Math.max.apply(Math, arr)); //8
console.log(Math.max(…arr)); //8
实现构造函数属性继承
“use strict”;
function Request() {
this.get = function(params = {}) {
//组合请求参数
let option = Object.keys(params)
.map(i => i + “=” + params[i])
.join(“&”);

return `获取数据 API:${this.url}?${option}`;<br />  };<br />}<br />//文章控制器<br />function Article() {<br />  this.url = "article/index";<br />  Request.apply(this, []);<br />}<br />let hd = new Article();<br />console.log(<br />  hd.get({<br />    row: 10,<br />    start: 3<br />  })<br />);<br />//课程控制器<br />function Lesson() {<br />  this.url = "lesson/index";<br />  Request.call(this);<br />}<br />let js = new Lesson();<br />console.log(<br />  js.get({<br />    row: 20<br />  })<br />);<br />制作显示隐藏面板

后盾人

1

hdcms

#bind

bind()是将函数绑定到某个对象，比如 a.bind(hd) 可以理解为将a函数绑定到hd对象上即 hd.a()。

• 与 call/apply 不同bind不会立即执行
• bind 是复制函数形为会返回新函数

bind是复制函数行为
let a = function() {};
let b = a;
console.log(a === b); //true
//bind是新复制函数
let c = a.bind();
console.log(a == c); //false
绑定参数注意事项
function hd(a, b) {
return this.f + a + b;
}

//使用bind会生成新函数
let newFunc = hd.bind({ f: 1 }, 3);

//1+3+2 参数2赋值给b即 a=3,b=2
console.log(newFunc(2));
在事件中使用bind

后盾人


动态改变元素背景颜色，当然下面的例子也可以使用箭头函数处理

houdunren.com