阅读目录

基础知识
- 声明定义
- 匿名函数
- 立即执行函数指函数定义时立即执行
- 函数提升
- 形参实参
- 默认参数
- 函数参数
- arguments 是函数获得到所有参数的集合
- 箭头函数
- 递归调用
- - 通过阶乘来体验递归调用
  - 累加计算方法
  - 递归打印倒三角
  - 递归修改课程点击数
- 回调函数
- 展开语法
- 标签函数
this
- 函数调用
- 方法调用
- - 构造函数
  - 对象字面量
  - 箭头函数
apply/call/bind
- 原理分析
- apply/call
- - 制作显示隐藏面板
- bind() 是将函数绑定到某个对象
- - 动态改变元素背景颜色，当然下面的例子也可以使用箭头函数处理

基础知识

函数是将复用的代码块封装起来的模块，在JS中函数还有其他语言所不具有的特性，接下来我们会详细掌握使用技巧。

声明定义

在JS中函数也是对象函数是Function类的创建的实例，下面的例子可以方便理解函数是对象。

let hd = new Function("title", "console.log(title)");
hd('wgchen'); // wgchen

标准语法是使用函数声明来定义函数

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('wgchen');
console.log(user.getName()); // wgchen

全局函数会声明在window对象中，这不正确建议使用后面章节的模块处理

console.log(window.screenX); // 1040

当我们定义了 screenX 函数后就覆盖了window.screenX方法

function screenX() {return "wgchen";
}
console.log(screenX()); // wgchen

使用 let/const 时不会压入window

let hd = function() {console.log("wgchen");
};
window.hd(); //window.hd is not a function

匿名函数

函数是对象所以可以通过赋值来指向到函数对象的指针，当然指针也可以传递给其他变量，注意后面要以 ; 结束。

下面使用函数表达式将 匿名函数 赋值给变量

let hd = function(num) {return ++num;
};console.log(hd instanceof Object); //truelet cms = hd;
console.log(cms(3)); // 4

标准声明的函数优先级更高，解析器会优先提取函数并放在代码树顶端，所以标准声明函数位置不限制，所以下面的代码可以正常执行。

console.log(hd(3));
function hd(num) {return ++num;
};

标准声明优先级高于赋值声明

console.log(hd(3)); //4function 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)); // 6

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

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

"use strict";(function () {var web = 'wgchen';
})();console.log(web); //web is not defined

使用 let/const 有块作用域特性，所以使用以下方式也可以产生私有作用域

{let web = 'wgchen';console.log(web); // wgchen
}
console.log(web); // Uncaught ReferenceError: web is not defined

函数提升

函数也会提升到前面，优先级行于 var 变量提高

console.log(hd()); // wgchenfunction hd() {return 'wgchen';
}

变量函数定义不会被提升

console.log(hd()); // wgchenfunction hd() {return 'wgchen';
}
var hd = function () {return 'blog';
}

形参实参

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

形参数量大于实参时，没有传参的形参值为 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)); // 667

使用新版本默认参数方式如下

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));

函数参数

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

<body><button>订阅</button>
</body>
<script>document.querySelector('button').addEventListener('click', function () {alert('感谢订阅');})
</script>

函数可以做为参数传递

function filterFun(item) {return item <= 3;
}
let hd = [1, 2, 3, 4, 5].filter(filterFun);
console.log(hd); // [1,2,3]

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) + "<br/>");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 id='hd'>button</button>
<script>document.getElementById('hd').addEventListener('click', () => alert('通过回调函数调用'));
</script>

使用回调函数递增计算

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, "wgchen"); // [1, 2, 3, "wgchen"]

也可以用于接收部分参数

function hd(site, ...args) {console.log(site, args); // wgchen (3) [1, 2, 3]
}hd("wgchen", 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); // ["wgchen", "blog"]
}let name = 'wgchen',url = 'blog';
hd `站点${name}-${url}`;

this

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

函数调用

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

<script>console.log(this == window); //true
</script>

使用严格模式时在全局函数内 this 为 undefined

var hd = 'wgchen';
function get() {"use strict"return this.hd;
}
console.log(get());
//严格模式将产生错误 Cannot read properties of undefined (reading 'hd')

方法调用

函数为对象的方法时 this 指向该对象

可以使用多种方式创建对象，下面是使用构造函数创建对象。

构造函数

函数当被 new 时即为构造函数，一般构造函数中包含属性与方法。函数中的上下文指向到实例对象。

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

function User() {this.name = "wgchen";this.say = function() {console.log(this); //User {name: "wgchen", say: ƒ}return this.name;};
}let hd = new User();console.log(hd.say()); // wgchen

对象字面量

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

let obj = {site: "wgchen",show() {console.log(this.site); // wgchenconsole.log(`this in show method: ${this}`); //this in show method: [object Object]function hd() {console.log(typeof this.site); //undefinedconsole.log(`this in hd function: ${this}`); //this in hd function: [object Window]}hd();}
};obj.show();

在方法中使用函数时有些函数可以改变 this 如 forEach，当然也可以使用后面介绍的apply / call / bind

let Lesson = {site: "wgchen",lists: ["js", "css", "mysql"],show() {return this.lists.map(function(title) {return `${this.site}-${title}`;}, this);}
};console.log(Lesson.show()); // ['wgchen-js', 'wgchen-css', 'wgchen-mysql']

也可以在父作用域中定义引用 this 的变量

let Lesson = {site: "wgchen",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 = 'wgchen';var obj = {name: 'blog',getName: function () {return function () {return this.name;}}
}console.log(obj.getName()()); // 返回window.name的值wgchen

以往解决办法会匿名函数调用处理定义变量，然后在匿名函数中使用。

var name = 'wgchen';var obj = {name: 'blog',getName: function () {var self = this;return () => {return this.name;}}
}console.log(obj.getName()()); //返回window.name的值 blog

使用箭头函数后 this 为定义该函数的上下文，也可以理解为定义时父作用域中的 this

var name = 'wgchen';
var obj = {name: 'blog',getName: function () {return () => {return this.name;}}
}
console.log(obj.getName()()); // blog

事件中使用箭头函数结果不是我们想要的

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

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

使用普通函数时 this 为当前DOM对象

在这里插入图片描述

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>wgchen</title>
</head><body><button desc="wgchen">button</button>
</body>
<script>let Dom = {site: "blog",bind() {const button = document.querySelector("button");button.addEventListener("click", function() {alert(this.getAttribute("desc"));});}};Dom.bind();
</script></html>

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

<body><button desc="wgchen">button</button>
</body>
<script>let Dom = {site: "blog",bind() {const button = document.querySelector("button");button.addEventListener("click", event => {alert(this.site + event.target.innerHTML);});}};Dom.bind();
</script>

在这里插入图片描述

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

<body><button desc="wgchen">button</button>
</body>
<script>let Dom = {site: "blog",handleEvent: function(event) {console.log(this);},bind() {const button = document.querySelector("button");button.addEventListener("click", this);}};Dom.bind();
</script>

在这里插入图片描述

apply/call/bind

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

原理分析

构造函数中的 this 默认是一个空对象，然后构造函数处理后把这个空对象变得有值。

function User(name) {this.name = name;
}
let hd = new User("wgchen");

可以改变构造函数中的空对象，即让构造函数 this 指向到另一个对象。

function User(name) {this.name = name;
}let wgchen = {};
User.call(wgchen, "blog");console.log(wgchen.name); // blog

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, 'wgchen');
show.apply(wangwu, ['blog']);

在这里插入图片描述
使用 call 设置函数上下文

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>wgchen</title>
</head>
<body><button message="wgchen">button</button><button message="blog">button</button>
</body>
<script>function show() {alert(this.getAttribute('message'));}let bts = document.getElementsByTagName('button');for (let i = 0; i < bts.length; i++) {bts[i].addEventListener('click', () => show.call(bts[i]));}
</script></html>

在这里插入图片描述
找数组中的数值最大值

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}`;};
}//文章控制器
function Article() {this.url = "article/index";Request.apply(this, []);
}let hd = new Article();
console.log(hd.get({row: 10,start: 3})
);//课程控制器
function Lesson() {this.url = "lesson/index";Request.call(this);
}let js = new Lesson();console.log(js.get({row: 20})
);

在这里插入图片描述

制作显示隐藏面板

在这里插入图片描述

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>wgchen</title>
</head><style>* {padding: 0;margin: 0;}body {display: flex;justify-content: center;align-items: center;width: 100vw;height: 100vh;}dl {width: 400px;display: flex;flex-direction: column;}dt {background: #e67e22;border-bottom: solid 2px #333;height: 50px;display: flex;justify-content: center;align-items: center;cursor: pointer;}dd {height: 200px;background: #bdc3c7;font-size: 5em;text-align: center;line-height: 200px;}
</style><body><dl><dt>wgchen</dt><dd>1</dd><dt>blog</dt><dd hidden="hidden">2</dd></dl>
</body>
<script>function panel(i) {let dds = document.querySelectorAll("dd");dds.forEach(item => item.setAttribute("hidden", "hidden"));dds[i].removeAttribute("hidden");}document.querySelectorAll("dt").forEach((dt, i) => {dt.addEventListener("click", () => panel.call(null, i));});
</script></html>

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

<body><button>wgchen</button>
</body>
<script>document.querySelector("button").addEventListener("click",function(event) {console.log(event.target.innerHTML + this.url); // wgchenblog}.bind({ url: "blog" }));
</script>

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

在这里插入图片描述

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>wgchen</title>
</head><style>* {padding: 0;margin: 0;}body {height: 100vh;font-size: 3em;padding: 30px;transition: 2s;display: flex;justify-content: center;align-items: center;background: #34495e;color: #34495e;}
</style><body>https://wgchen.blog.csdn.net
</body>
<script>function Color(elem) {this.elem = elem;this.colors = ["#74b9ff", "#ffeaa7", "#fab1a0", "#fd79a8"];this.run = function () {setInterval(function () {let pos = Math.floor(Math.random() * this.colors.length);this.elem.style.background = this.colors[pos];}.bind(this),1000);};}let obj = new Color(document.body);obj.run();
</script></html>

查看全文
如若内容造成侵权/违法违规/事实不符，请联系编程学习网邮箱：809451989@qq.com进行投诉反馈，一经查实，立即删除！

手写春联，欢迎体验
https://cl.xugaoyi.com/...
2024/5/4 10:56:52
字节离你一步之遥：如何自学Android，网站，2021最新爱奇艺Android社招面试题目
作为一个Android开发者，官网的资料当然不可错过，从设计，培训，指南，文档，都不应该错过，在以后的学习过程中慢慢理解体会。 2! . Android Guides – CodePath CodePath是国外一个技术培训机构&…...
2024/5/3 23:11:46
学画画,这些美术集标记好的学习重点拿去用
零基础怎么学画？新手学画画哪些重点要标记？很多小伙伴在学习美术的时候都会遇到各种问题今天美术集网校带大家了解下新手学美术的重点： 新手学画画？这些美术集标记好的学习重点拿去用~ 新手学画画？这些美术集标记好的…...
2024/4/14 1:32:12
我花两千换一台智能门锁，值吗？
临近新年，居家安全成为了被提及次数最多的话题。毕竟，年底“冲业绩”的不仅有早出晚归的社畜，还有试图不劳而获的“伸手党”们。在笔者小时候，每逢年节都能听到“XX家又被盗了”这种类似的谈资，那个时候，…...
2024/4/14 1:32:02
python docx 添加浮空图片
参考这个大佬：https://blog.csdn.net/BF02jgtRS00XKtCx/article/details/111188806 pip install python-docxadd_float_picture.py # -*- coding: utf-8 -*-# filename: add_float_picture.py Implement floating image based on python-docx. - Text wrapping st…...
2024/4/17 22:58:36
HttpClient远程调用
依赖： <dependency><groupId>org.apache.httpcomponents</groupId><artifactId>httpclient</artifactId><version>4.5.6</version></dependency><dependency><groupId>com.alibaba</groupId><…...
2024/4/14 1:32:17
python基础学习第十天———笔记
文件操作（IO技术） 一个完整的程序一般都包括数据的存储和读取；我们在前面写的程序数据都没有进行实际的存储，因此 python 解释器执行完数据就消失了。实际开发中，我们经常需要从外部存储介质（硬盘、光盘、…...
2024/4/5 3:52:54
1.27总结
一. 函数：就是封装了一段可被重复调用执行的代码块。通过此代码块可以实现大量代码的重复使用。 1. 函数的使用声明函数 function 是声明函数的关键字,必须小写由于函数一般是为了实现某个功能才定义的， 所以通常我们将函数名命名为动词，…...
2024/4/15 5:45:06
RCNN论文总结
Rich feature hierarchies for accurate object detection and semantic segmentation [1311.2524] Rich feature hierarchies for accurate object detection and semantic segmentation (arxiv.org) Abstract 在本文中，作者提出了一种简单的、可扩展的检测算法…...
2024/4/20 2:05:16
如何高效地学习开源项目
转载于：https://time.geekbang.org/column/article/10022 你好，我是华仔。今天这期“特别放送”，我想和你聊聊如何高效地学习开源项目，一方面澄清开源项目学习过程中的几个误区，另一方面谈谈我自己具体实践时的一套方…...
2024/4/14 1:32:02
python数据可视化—用matplotlib画雷达图（1）
代码 # 雷达图 import numpy as np import matplotlib.pyplot as plt# 标签 labels np.array([热量, 蛋白质, 钠, 碳水化合物, 脂肪]) # 数据个数 dataLength 5 # 数据 data np.array([0.82, 0.34, 0.6, 0.44, 0.7])angles np.linspace(0, 2*np.pi, dataLength, endpointF…...
2024/4/14 1:32:02
macOS安装python 3
访问https://www.python.org/downloads/，点击Download Python 3.x.x下载。下载后直接安装。...
2024/4/18 16:02:22
GitLab集成Jenkins进行项目构建、发布
GitLab集成Jenkins1. 前置环境准备GitLab部署Jenkins部署Git Linux环境部署Maven Linux环境部署2. JenKins项目构建、发布配置Jenkins系统配置构建Maven项目可能遇到的问题1. 前置环境准备 GitLab、Jenkins集成，进行项目构建、完成自动部署， Jenkins需要…...
2024/4/14 1:32:02
学习-Java字符串之字符串、字符数组与字节数组间的使用之单词重新排序
任务描述本关任务：对给定单词重新排序（按照组成单词的字母升序排序）。相关知识之前我们学习了字符串和数组，下面我们来了解一下字符串、字符数组、字节数组相互间的转换。字符串转字符数组使用字符串 String 类提供的 t…...
2024/4/20 14:07:48
Linux基础——目录处理命令ls
命令格式与目录处理命令ls 命令格式：命令 [-选项][参数] 参数就是命令操作的对象例如： ls -la /etc 说明： 1.个别命令使用不遵循此格式 2.当有多个选项时，可以写在一起 3.简化选项与完整选项 -a –all 目录处理命令…...
2024/4/14 1:32:07
Electron解决 require is not defined 问题
electron版本号：16.0.7 一、报错原因 JS中没有node模块，导致无法使用require导入导出二、解决办法在入口文件设置两个属性 nodeIntegration：true contextIsolation:false // 加载page需要两个模块：app BrowserWindow con…...
2024/4/14 1:32:07
为什么大多数程序员没有工程思维
现在程序员大多数没有工程思维，甚至很多项目经理也对工程思维没有什么概念。可能有人不赞同我的观点。没关系，我今天提出这个问题是希望可以引发大家的思考，逐渐开始建立软件工程思维。我们刚入行的程序员朋友基本都具有编程思想&#xff0…...
2024/4/7 18:00:18
C++ 类与对象运算符重载
https://www.bilibili.com/video/BV1et411b73Z?p121&spm_id_frompageDriverhttps://www.bilibili.com/video/BV1et411b73Z?p121&spm_id_frompageDriver 运算符重载概念： 对已有的运算符进行重新定义，赋予其另一种功能，以适应不同…...
2024/4/14 1:32:17
11.旋转数组的最小数字
第五天查找算法剑指 Offer 11. 旋转数组的最小数字难度简单把一个数组最开始的若干个元素搬到数组的末尾，我们称之为数组的旋转。给你一个可能存在重复元素值的数组 numbers ，它原来是一个升序排列的数组，并按上述情形进行了一次旋转…...
2024/4/14 1:32:02
BST（二叉搜索树）原理解析及代码实现
文章目录简介二叉搜索树介绍二叉树的中序遍历插入结点删除结点完整代码：简介二叉搜索树作为一种经典的数据结构，它既有链表的快速插入与删除操作的特点，又有数组快速查找的优势； 二叉搜索树介绍二叉排序树：BST&am…...
2024/4/14 1:32:17

JS基础函数进阶

阅读目录

基础知识

声明定义

匿名函数

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

函数提升

形参实参

默认参数

函数参数

arguments 是函数获得到所有参数的集合

箭头函数

递归调用

通过阶乘来体验递归调用

累加计算方法

递归打印倒三角

递归修改课程点击数

回调函数

展开语法

标签函数

this

函数调用

方法调用

构造函数

对象字面量

箭头函数

apply/call/bind

原理分析

apply/call

制作显示隐藏面板

bind() 是将函数绑定到某个对象

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

相关文章

最新文章

JS基础 函数进阶

阅读目录

基础知识

声明定义

匿名函数

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

函数提升

形参实参

默认参数

函数参数

arguments 是函数获得到所有参数的集合

箭头函数

递归调用

通过阶乘来体验递归调用

累加计算方法

递归打印倒三角

递归修改课程点击数

回调函数

展开语法

标签函数

this

函数调用

方法调用

构造函数

对象字面量

箭头函数

apply/call/bind

原理分析

apply/call

制作显示隐藏面板

bind() 是将函数绑定到某个对象

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

相关文章

最新文章

JS基础函数进阶