JavaScript【八】JavaScript函数高级
文章目录
- 前言
- 回调函数
- 递归函数
- 闭包
-
- 什么是闭包函数?
- 闭包三个特性
- 闭包的缺点
- JavaScript的垃圾回收机制
- 闭包小案例
-
- 局部变量长期驻扎内存
- 避免全局变量污染
- 私有成员的存在
- [ES6]块级作用域
-
- 什么是块级作用域
- 函数声明与块级作用域
- 函数扩展
-
- [ES6]函数参数的解构赋值
- [ES6]箭头函数
-
- 基本用法
- 使用注意点
- 写在最后
前言
哈喽小伙伴们，本文将收录在JavaScript【前端童子功】这个专栏里；这个专栏里边会收录一些JavaScript的基础知识和项目实战；希望大家可以多多支持，你们的支持就是我创作的动力；让我们一起来看看吧
回调函数
js代码会至上而下一条线执行下去，但是有时候我们需要等到一个操作结束之后再进行下一个用户操作，这时候就需要用到回调函数来控制下一个操作的功能。
把一个函数的指针作为另一个函数的参数，当调用这个参数时，被当做参数的这个函数就叫 回调函数 。
function A(callback) {
callback();
console.log('主函数');
}
function cb(){
console.log("回调函数")
}
A(cb)
把函数整体作为参数传进去
function A(callback) {
callback();
console.log('主函数');
}
A(function (){
console.log("回调函数")
})
传参给回调函数
function A(callback) {
var str = "传递给回调的参数";
callback(str);
console.log('主函数');
}
A(function (str){
//str 是接收主函数传递的参数
console.log("主函数传递的参数为",str);
console.log("回调函数");
})
在执行回调的时候确保它是个函数
function Fn(options, callback) {
if (typeof callback === "function") {
callback(options);
}
}
示例：封装each函数简化for循环
function each(n,callback){
for(var i=0;i<n;i++){
callback(i)
}
}
each(10,function(i){
console.log(i)
})
递归函数
所谓的 递归函数 就是在函数体内调用本函数。使用递归函数一定要注意，处理不当就会进入死循环。
- 在函数内部直接或间接引用自身。
- 每个递归函数里必定会有终止条件。
求阶乘：
function factorial(c){
if(c == 1){
return c;
}else{
return c * factorial(c-1);
}
}
alert(factorial(5));
多维数组遍历：
var new_array=[];
function _getChilds(data){
if(typeof data != "object" || data == null){
new_array.push(data);
}else{
getChilds(data);
}
}
function getChilds(data){
for(var i in data){
_getChilds(data[i]);
}
}
var json = {
"aa" : {"l" : 1,"m" : 3},
"bb" : 1,
"cc" : "abc",
"dd" : true,
"ee" : null
}
getChilds(json)
console.log(new_array)
闭包
闭包是JavaScript语言的一大特点，主要应用场合为:设计私有的方法和变量。
什么是闭包函数?
理解闭包前，需要先理解 全局作用域和局部作用域 的区别。函数内部可以访问全局作用域下定义的全局变量，而函数外部却无法访问到函数内部定义(局部作用域)的局部变量。
- 概念： 闭包（closure）是定义在一个外部函数内部，并且能够访问外部函数中变量的函数。
- 原理： 作用域链
创建闭包的常见方式，就是在一个函数内部创建另一个函数并返回：
function fun(num){
return function (){
return num;
}
}
var end = fun(100);
end(); // 100
上述案例中，num 是fun函数内部的变量，本来只能fun函数内部使用，但是返回的函数也有权限访问num。所以在函数外部通过调用返回的函数即可得到函数内部的变量
function out (){
var n = 1;
return function (){
return n++;
} }
var fn = out();
console.log(fn()) //1
console.log(fn()) //2
console.log(fn()) //3
闭包三个特性
- 函数嵌套函数
- 函数内部可以引用外部的参数和变量
- 参数和变量不会被垃圾回收机制回收
闭包的缺点
闭包的缺点就是常驻内存，会增大内存使用量，使用不当很容易造成内存泄漏。 一般函数执行完毕后，局部活动对象就会被销毁，内存中仅仅保存全局作用域。但闭包的情 况不同。
JavaScript的垃圾回收机制
- 在JavaScript中，如果一个对象不再被引用，那么这个对象就会被GC回收。
- 如果两个对象互相引用，而不被第三者所引用，那么这两个互相引用的对象也会被回收。
闭包小案例
那么使用闭包有什么好处呢?
- 希望一个局部变量长期驻扎在内存中
- 避免全局变量的污染
- 私有成员的存在
局部变量长期驻扎内存
function out (){
var n = 1;
return function (){
return n++;
}
}
var fn = out();
console.log(fn())
console.log(fn())
console.log(fn())
在循环中直接找到对应的元素的索引
注/ <ul>
<li>1111111</li>
<li>1111111</li>
<li>1111111</li>
</ul>
var lis=document.getElementsByTagName("li");
for(var i=0;i<lis.length;i++){
(function(i){
lis[i].onclick=function(){
alert(i);//0 1 2
}
})(i)
}
for(var i=0;i<10;i++){
setTimeout(function(){
console.log(i); //10
}, 1000)
}
避免全局变量污染
但我们声明一个函数的时候其实就相当于创建一个全局变量 上一个例子中总共占有2个全局变量。
函数表达式 函数自调用:
(function(){
})()
var out = (function(){
var n1 = 1;
var n2 = 100;
return function(){
n1++;
n2--;
return n1+n2;
} })()
out() // 1
out() // 2
私有成员的存在
模块化代码
var aa=(function(){
var a=10;
function aaa(){
a++;
alert(a);
}
function bbb(){
a+=10;
alert(a);
}
return {
a:aaa,
b:bbb
}
})()
aa.a(); //11
aa.b(); //21
这样做的好处就是 bbb aaa 这两个函数我们在外面是访问不到的
- JavaScript内部原理系列－闭包（Closures）
由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题，在IE中可能导致内存泄露。
[ES6]块级作用域
什么是块级作用域
JS中作用域有：全局作用域、函数作用域。没有块作用域的概念。ECMAScript 6(简称ES6)中新增了块级作用域。
块作用域由 { } 包括，if语句和for语句里面的{ }都属于块作用域。
ES5没有块级作用域概念：
{
var num = 10;
}
console.log(num) // 10
// for循环结束后，变量i依然会存在
for(var i = 10; i<5;i++){ }
console.log(i); // 5
ES6的块级作用域：
{
let num = 10;
}
console.log(num) // 报错： num is not defined
// 由于i是存在于块级作用域中，所以i只能在循环{}中使用
for(let i = 10; i<5;i++){ }
console.log(i); // 报错： i is not defined
函数声明与块级作用域
- ES5中，函数只能在顶层作用域和函数作用域中声明，不能在块级作用域中声明。
- ES6中，在块级作用域内部声明的变量函数，其行为类似于let，即块级作用域外不可使用
function fun(){
console.log("I am outside function.")
}
if (true) {
function fun() {
console.log("I am inside function.");
}
fun(); // I am inside function.
}
fun(); // I am inside function.
'use strict' //es6 中的运行结果
function fun(){
console.log("I am outside function.")
}
if (true) {
function fun() {
console.log("I am inside function.");
}
fun(); // I am inside function.
}
fun(); // I am outside function.
函数扩展
[ES6]函数参数的解构赋值
ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构
只需要保证实参和形参数据类型同为数组或对象，即可进行函数参数的解构赋值：
function add([x, y]){
return x + y;
}
add([1, 2]); // 3
function fun({num1:x, num2:y}) {
return x + y;
}
fun({num1: 1, num2: 2}) // 3
[ES6]箭头函数
基本用法
ES6允许使用“箭头”（=>）定义函数。
var f = v => v;
上面的箭头函数等同于：
var f = function(v) {
return v;
};
- 如果箭头函数不需要参数，就使用一个
()或_代表参数部分。 - 如果箭头函数需要多个参数，就使用一个
()代表参数部分。
var f = () => 5;
var f = _ => 5;
// 等同于
var f = function () { return 5 };
var sum = (num1, num2) => num1 + num2;
// 等同于
var sum = function(num1, num2) {
return num1 + num2;
};
如果箭头函数的代码块部分多于一条语句，就要使用大括号将它们括起来。
var sum = (num1, num2) => {
console.log(num2);
console.log(num1);
return num1 + num2;
}
console.log(sum(1,2)); // 2 1 3
由于大括号被解释为代码块，所以如果箭头函数直接返回一个json，必须在对象外面加上括号。
var person = age => ({ name: "Tom", age: age});
console.log(person(21)); //Object {name: "Tom", age: 21}
箭头函数可以与变量解构结合使用。
var full = ({ name, age}) => name + '-' + age;
console.log(full({name:"Tom",age:21})); // Tom-21
箭头函数使得表达更加简洁。
const isEven = n => n % 2 == 0;
const square = n => n * n;
箭头函数的其中一个用处是简化回调函数。
// 正常函数写法
var arr1 = [1,2,3].map(function (x) {
return x * x;
});
console.log(arr1); //[1,4,9]
// 箭头函数写法
var arr2 = [1,2,3].map(x => x * x);
console.log(arr2); //[1,4,9]
使用注意点
-
this对象的指向是可变的，但是在箭头函数中，它是固定的。
function foo() { setTimeout(() => { console.log('id:', this.id); }, 100); setTimeout(function () { console.log("id:",this.id); },100) } var id = 21; foo.call({ id: 42 }); //id: 42 //id: 21 -
不能当做构造函数
-
箭头函数没有arguments对象
写在最后
更多JavaScript知识以及API请大家持续关注，尽请期待。各位小伙伴让我们 let’s be prepared at all times！
✨原创不易，还希望各位大佬支持一下！
点赞，你的认可是我创作的动力！
⭐️ 收藏，你的青睐是我努力的方向！
✏️ 评论，你的意见是我进步的财富！