js 函数

最新推荐文章于 2023-04-06 01:35:31 发布
最新推荐文章于 2023-04-06 01:35:31 发布
阅读量112 收藏
点赞数
分类专栏： JS学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_50936255/article/details/118580989
版权

目录

1、匿名函数

2、立即执行

3、默认参数

4、arguments

5、箭头函数

6、递归调用

7、回调函数

8、标签函数

9、this

（1）构造函数

（2）对象字面量

（3）箭头函数

10、apply / call / bind

（1）原理分析

（2）apply / call

（3）bind

 

1、匿名函数

匿名函数没有函数名，它也不会做任何事情。通常将匿名函数和事件处理程序一起使用。

函数是对象所以可以通过赋值来指向到函数对象的指针，当然指针也可以传递给其他变量。

function() {
	console.log('hello');
};

let div = document.querySelector('div');
div.addEventListener('click', function () {
	div.style.background = 'pink';
});

下面代码使用函数表达式将匿名函数赋值给变量，这个变量也可以赋值给其他变量。

let f = function (i) {
	setInterval(() => {
		console.log(i++);
	}, 1000);
};
f(0);

let f1 = f;
f1(0);

匿名函数也成为函数表达式，与函数声明有一定的区别，函数声明会进行函数提升，但函数表达式不会。

console.log(fun1(0));
function fun1(i) {
	setInterval(() => {
		console.log(i++);
	}, 1000);
}

console.log(fun2(0));
// Uncaught ReferenceError: Cannot access 'fun2' before initialization
let fun2 = function (i) {
	setInterval(() => {
		console.log(i++);
	}, 1000);
}

2、立即执行

指函数定义时立即执行。

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

(function () {
	var name = '张三';
	console.log(name);  // 张三
})();
console.log(name);  //

3、默认参数

ES6 支持函数定义默认参数：

function f(name = '张三', age = 18) {
	return `name: ${name}, age: ${age}`;
}
console.log(f());  // name: 张三, age: 18
console.log(f('李四', 20));  // name: 李四, age: 20

如果不是全部参数都有默认值，则要将没有默认值的参数放在有默认值的参数的前面：

function f(name, age = 18) {
	return `name: ${name}, age: ${age}`;
}
console.log(f());  // name: undefined, age: 18
console.log(f('张三'));  // name: 张三, age: 18

function f1(name = '张三', age) {
	return `name: ${name}, age: ${age}`;
}
console.log(f1());  // name: 张三, age: undefined
console.log(f1(18));  // name: 18, age: undefined
console.log(f1('张三' ,18));  // name: 张三, age: 18

4、arguments

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

function sum() {
	return [...arguments].reduce((total, num) => {
		return (total += num);
	} ,0);
}
console.log(sum(1, 2, 3, 4));  // 10

// 当然展开语法也能达到同样的效果，所以更推荐展开语法
function Sum(...args) {
	return args.reduce((num1, num2) => num1 + num2);
}
console.log(sum(1, 2, 3, 4));  // 10

5、箭头函数

ES6 新增使用胖箭头 ( => ) 语法定义函数表达式的能力。任何可以使用函数表达式的地方，都可以使用箭头函数。

let sum = (a, b) => {
	return a + b;
}
console.log(sum(1, 2));  // 3

// 当函数体为单一表达式时，可以不需要 return ，系统会自动返回表达式计算的值。
let sum = (a, b) => a + b;
console.log(sum(1, 2));  // 3

箭头函数简洁的语法很适合嵌入式函数的场景：

let num = [1, 2, 3, 4];
console.log(num.map(x => { return x + 1; }));  // [2, 3, 4, 5]

箭头函数虽然简洁，但是也有很多场景不适用：①不能使用 arguments 、super 和 new.target ；②不能用作构造函数；③没有 prototype 属性。

6、递归调用

在函数内部调用自身的方式叫做递归。

需要注意：

  • 主要用于循环次数不确定的情况
  • 必须要有程序出口，否则会陷入死循环
// 阶乘
function f(num = 1) {
	return num == 1 ? num : num * f(--num);
}
console.log(f(5));  // 120

// 累加
function sum(...args) {
	return args.length == 0 ? 0 : args.pop() + sum(...args);
}
console.log(sum(1, 2, 4, 5));  // 12

7、回调函数

通过函数参数传递到其它代码的，某一块可执行代码的引用。

例如鼠标单击事件：

let div = document.querySelector('div');
div.addEventListener('click', function () {
	alter('点击了div');
});

8、标签函数

标签函数的语法是函数名后面直接带一个模板字符串，并从模板字符串中的插值表达式中获取参数。

let name = '张三';
let age = 18;

function f(str, name, age) {
	console.log(str);
	console.log(name);
	console.log(age);
}

f`I'm ${name}, I'm ${age} year old.`;
// ["I'm ", ", I'm ", " year old.", raw: Array(3)]
// 张三
// 18
f(["I'm ", ", I'm ", " year old."], name, age);
// ["I'm ", ", I'm ", " year old."]
// 张三
// 18

let str = `I'm ${name}, I'm ${age} year old.`;
f(str);
// I'm 张三, I'm 18 year old.
// undefined
// undefined

上面的代码定义了一个函数，三个参数分别为传入的str、name、age。通过分别①使用标签函数和模板字符串、②正常传参使用，可以看到，当作为标签函数使用时，函数的第一个参数为以模板字符串中变量为分隔符分割出的字符串数组、后续所有参数分别对应每一个变量。

若将模板字符串赋值给一个变量，然后将变量传入函数，则函数的第一个参数为正常的字符串，后续所有参数都为 undefined 。

9、this

在标准函数中，this 引用的是把函数当成方法调用的上下文对象（在全局上下文中调用函数时，this 执行 windows ）。

（1）构造函数

当函数被 new 时即为构造函数，一般构造函数中包含属性和方法。

function sayColor() {
	this.color = 'red';
	this.say = function () {
		console.log(this);  // sayColor {color: "red", say: ƒ}
		return this.color;
	}
}

let sc = new sayColor();
console.log(sc.say());  // red

（2）对象字面量

window.color = 'blue';
let obj = {
	color: 'red',
	sayColor() {
		console.log(this.color);  // red
		console.log(this);  // {color: "red", sayColor: ƒ}
		function showColor() {
			console.log(this.color);  // blue
			console.log(this);  // Window {window: Window, self: Window, document: document, name: "", location: Location, …}
		}
		showColor();
	}
};
obj.sayColor();

上面的代码中，sayColor() 函数在 obj 中，属于对象方法，指向 obj 。

而 showColor() 函数不在 obj 中，在 window 中，不属于对象方法，指向 window 。

可以在父作用域将 this 赋值给变量，如 that 。来改变其指向：

window.color = 'blue';
let obj = {
	color: 'red',
	sayColor() {
		console.log(this.color);  // red
		console.log(this);  // {color: "red", sayColor: ƒ}
		const that = this;
		function showColor() {
			console.log(that.color);  // red
			console.log(that);  // {color: "red", sayColor: ƒ}
		}
		showColor();
	}
};
obj.sayColor();

（3）箭头函数

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

window.color = 'blue';
let obj = {
	color: 'red'
};

let sayColor = () => console.log(this.color);

sayColor();  // blue

obj.sayColor = sayColor;
obj.sayColor();  // blue

上面的代码中，两次对 sayColor 的调用结果都是 blue ，因为这个箭头函数在定义的时候 this 指向的就是 window ，两次调用中 this 指向未发生改变。

function sayRed() {
	this.color = 'red';
	setTimeout(() => {
		console.log(this.color);
	}, 1000);
}
new sayRed();  // red

function sayBlue() {
	this.color = 'blue';
	setTimeout(function() {
		console.log(this.color);
	}, 1000);
}
new sayBlue();  // undefined

// function sayBlue() {
// 	this.color = 'blue';
// 	setTimeout(() => {
// 		console.log(this.color);
// 	}, 1000);
// }
// new sayBlue();  // blue

在事件回调或定时回调中调用某个函数时，this 值指向的并非是想要的对象。此时将回调函数写成箭头函数就可以解决问题。因为箭头函数中的 this 会保留定义时的上下文。

function sayRed() {
	this.color = 'red';
	setTimeout(() => {
		console.log(this.color);
		console.log(this);
        // Window {window: Window, self: Window, document: document, name: "", location: Location, …}
	} ,1000);
}
sayRed();  // blue

function sayBlue() {
	this.color = 'blue';
	setTimeout(() => {
		console.log(this.color);
		console.log(this);
        // Window {window: Window, self: Window, document: document, name: "", location: Location, …}
	} ,1000);
}
sayBlue();  // blue

console.log(window.color);  // blue

可以看出，上面代码中两个函数的输出结果都是 blue ，因为 setTimeout 中的延迟执行函数的 this 指向永远为 window ，所以在执行时，因为 sayBlue 中将 window.color 改为了 blue ，所以导致 sayRed 中输出也为 blue 。

  • 使用普通函数时，this 指向当前 DOM 对象：
<body>
    <button desc="李四">button</button>

    <script>
        let Dom = {
            name: '张三',
            bind() {
      	        const button = document.querySelector('button');
      	        button.addEventListener('click', function() {
        	        console.log(this.getAttribute('desc'));
      	        });
            }
        };
        Dom.bind();  // 李四
    </script>
</body>
  • 使用箭头函数时 this 指向上下文对象：
<body>
    <button desc="李四">button</button>

    <script>
        let Dom = {
            name: '张三',
            bind() {
      	        const button = document.querySelector('button');
      	        button.addEventListener('click', event => {
        	        console.log(this.name + event.target.innerHTML);
      	        });
            }
        };
        Dom.bind();  // 张三button
    </script>
</body>
  • 使用 handleEvent 绑定事件处理器时，this 指向当前对象而不是 DOM 元素：
<body>
    <button desc="李四">button</button>

    <script>
        let Dom = {
	        name: '张三',
	        handleEvent: function (event) {
		        console.log(this);
	        },
	        bind() {
		        const button = document.querySelector('button');
		        button.addEventListener('click', this);
	        }
        };
        Dom.bind();  // {name: "张三", handleEvent: ƒ, bind: ƒ}
    </script>
</body>

10、apply / call / bind

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

（1）原理分析

构造函数中的 this 是一个空对象，经过构造函数处理后将其变为有值。

function f(name) {
	this.name = name;
	console.log(name);
}
f('张三');  // 张三

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

function f(name) {
	this.name = name;
}

let obj = {};
f.call(obj, '李四');
console.log(obj.name);  // 李四

（2）apply / call

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

  • apply 用数组传参，call 需要分别传参；
  • apply 和 call 会立刻执行函数，但是 bind 不会。
function show(title) {
	console.log(`${title+this.name}`);
}
let person1 = {
	name: '张三'
};
let person2 = {
	name: '李四'
};

show.call(person1, 'name');  // name张三
show.apply(person2, ['name']);  // name李四

（3）bind

将函数绑定到某个对象，如 b = a.bind() 为将 a 绑定到 b 上，即 b.a() 。

  • bind 是复制函数行为，会返回新的函数；
  • apply 和 call 会立刻执行函数，但是 bind 不会。
function a() { }
let b = a;
console.log(a === b);  // true

let c = a.bind();
console.log(a === c);  // false
console.log(a == c);  // false

 绑定参数注意事项：

function func(a, b) {
	return this.f + a + b;
}

// 使用 bind 会生成新函数
let newFunc = func.bind({ f: 1 }, 3);  // bind 中的两个参数分别给到 this.f 和 a

// 参数 2 赋值给 b ，即 a = 3 ，b = 2  （1+3+2）
console.log(newFunc(2));  // 6

二师弟_k
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
详解JavaScript函数绑定
10-26
在JavaScript与DOM交互中经常需要使用函数绑定，定义一个函数然后将其绑定到特定DOM元素或集合的某个事件触发程序上，绑定函数经常和回调函数及事件处理程序一起使用，以便把函数作为变量传递的同时保留代码执行环境
html自动调用js函数,使用HTML按钮调用JavaScript函数
weixin_42518709的博客
05-30 3731
使用HTML按钮调用JavaScript函数我正在尝试使用HTML按钮来调用JavaScript函数。这是代码：但它似乎无法正常工作。 有一个更好的方法吗？这是链接：[http://projectpath.ideapeoplesite.com/bendel/toolscalculators.html]点击左下方的容量标签。 如果值未更改，则按钮应生成警报，如果输入值，则应生成图表。fmz aske...
javascript函数以及对象
txq231254的博客
04-06 2015
前言 这次的学习是关于函数和对象的内容，函数应该都不陌生，在上学中的时候数学就已经在接触了，不过虽然都是函数，但是有不同，一个是公式，一个是代码，那它可以带来什么的可能性呢，那就带你看看它的魅力吧！对象是什么？万物皆对象，生活中的对象是生动形象的，当然这个对象也是 不错的。 一、JS的函数以及应用 1.函数的概念 在JS里面,可能会定义非常多的相同代码或者功能相似的代码,这些代码可能需要大量重复使用。 虽然for循环语句也能实现一些简单的重复操作,但是比较具有局限性,此时我们就可以使用JS中的函
JavaScript函数
橘猫吃不胖的博客
11-20 679
JavaScript函数1 函数概述2 函数的使用2.1 声明函数2.2 函数的调用3 函数的参数4 函数参数的数量5 函数的返回值6 arguments的使用 1 函数概述 在编写代码时，可能会出现非常多的相同代码，或者功能类似的代码，这些代码可能需要大量重复使用，此时就可以使用JavaScript中的函数。 函数是一个独立的功能模块，可以重复使用，维护方便。 2 函数的使用 函数在使用时分为两步，声明函数和调用函数 2.1 声明函数 声明函数就是定义函数 语法为： function 函数名([参数]){
JavaScript函数中的arguments（js函数中的arguments，函数默认参数arguments）
weixin_65793170的博客
04-06 2169
js的函数参数和其他的语言有些不同，它并不介意你传进来多少个参数，以及参数的数据类型，即使你在定义函数时，只设置了两个形参，那么在调用这个函数时，你给他传递一个、两个，或者是其它四个、五个实参，它都能接收，之所以会这样是因为在函数参数内部是用一个数组来表示的，在函数体内是通过arguments对象来访问这个参数数组，从而获取传递给函数的每个参数。arguments对象只是与数组类似，但他并不是一个数组，可以把它叫做伪数组，你也可以把它叫做其它的都可以。
JavaScript函数作用域
weixin_49756484的博客
05-18 1059
JavaScript函数作用域 JavaScript作用域 作用域： 作用域指一个变量的作用范围 JS中一共两种作用域： （1）全局作用域 （2）函数作用域（局部作用域） 1、全局作用域 直接写在script标签的JS代码，都在全局作用域 全局作用域在页面打卡的时候创建，在页面关闭时销毁 在全局作用域中有一个对象window，他代表一个浏览器的窗口，它由浏览器创建，我们可以直接使用 在全局作用域中： 创建的变量都会作为window对象的属性保存 全局中的函数都...
JavaScript 函数学习
qq_66198247的博客
04-27 1897
一.函数的使用 函数在使用时分为两步：声明函数和调用函数 1.声明函数 function是声明函数的关键字,必须小写 由于函数一般是为了实现某个功能才定义的，所以通常我们将函数名命名为动词，比如getSum 2.调用函数 调用的时候千万不要忘记添加小括号 口诀:函数不调用，自己不执行。 注意︰声明函数本身并不会执行代码，只有调用函数时才会执行函数体代码。 3.函数的封装 函数的封装是把一个或者多个功能通过函数的方式封装起来，对外只提供一个简单的函数接口 简单理解:封装类似于将电
JavaScript函数详细介绍
叶子yes的博客
08-12 7688
自由变量的值如何得到 —— 要到创建这个函数的那个父级作用域寻找，如果没有就一直向上级祖先元素寻找（这就是所谓的"静态作用域"，静态作用域是指函数的作用域在函数定义时就已经确定了）...
JavaScript 函数参数默认值
热门推荐
ximingx
03-13 1万+
传统写法： function fn(param) { let p = param || 'hello'; console.log(p); } 上方代码中，函数体内的写法是：如果 param 不存在，就用 hello字符串做兜底。这样写比较啰嗦。 ES6 写法：（参数默认值的写法，很简洁） function fn(param = 'hello') { console.log(param); } 在 ES6 中定义方法时，我们可以给方法里的参数加一个默认值（缺省值）： 方法被调用
JavaScript函数及其作用
weixin_44703582的博客
12-22 1846
目录 一、函数的作用 二、函数的使用 三、函数封装 四、函数的返回值 五、函数的两种声明方式 总结 一、函数的作用 在 JS 里面，我们可能会定义非常多的相同代码或者功能相似的代码，这些代码可能需要大量重复使用。虽然 for循环语句也能实现一些简单的重复操作，但是比较具有局限性，此时我们就可以使用 JS 中的函数。 简单来说就是： 函数封装了一段可被重复调用执行的代码块。通过此代码块可以实现大量代码的重复使用。 二、函数的使用 在JavaScript中，每个函数其实..
Javascript函数作为参数——JS学习笔记
qq_41135011的博客
10-19 7425
JS函数作为参数JS函数作为参数无参有参匿名类型来个狠的：自调用 JS函数作为参数 今天我们来康一康函数作为参数~ 无参 这是无参数函数作为参数 function test1(Func) { Func(); } function test2() { alert("我是test2"); } test1(test2); //无参数只写函数名 成功执行test2： 有参 现在调用的函数有一个参数了： function test1(Func) { Func(mydata); } functi
JavaScript函数式编程
11-17
JavaScript函数式编程
javascript 函数速查表
10-29
js 函数速查表,方便大家快速的找到相关函数。
declare:明确声明Javascript函数中的参数类型
05-21
在Javascript中，声明函数时，不能对其参数类型进行任何限制。 在执行过程中，您始终必须手动检查参数的类型。 这意味着您可以使用任何类型的参数调用相同的函数。 这可能会导致无法预料的行为。 例如，根据其参数...
JS函数重载的解决方案
10-25
在面向对象的编程中，很多语言都支持函数重载，能根据函数传递的不同个数、类型的参数来做不同的操作，JS对它却不支持，需要我们额外做些小动作。
关于 forEach 到底能否改变原数组
weixin_50936255的博客
09-11 3507
今天朋友问我一道题，将 "kuai-shou-gong-cheng" 转化为 "KuaiShouGongCheng" 。我想着挺简单的，将字符串分割之后再使用 forEach 将分割后得到的数组的每个字符串的首字母大写，最后 join 即可。 但是问题就来了，我发现在 forEach 里面无论怎么改变 item ，最后原数组都不会被改变，于是我就很好奇了，不是说好 forEach 能改变原数组嘛，怎么又没变化呢。 那么下面我们就来搞清楚一下这个问题。 先说结论： ①当要改变的数组中的某个值是引用类.
Number 常用方法
weixin_50936255的博客
07-03 1436
（1）判断是否为整数：isInteger() （2）将字符串转换为整数：parseInt() （3）将字符串转换为浮点数：parseFloat() （4）四舍五入：toFixed() console.log(Number.isInteger(123)); // true console.log(Number.isInteger(123.123)); // false console.log(parseInt('123')); // 123 console.log(parseInt('123.12
js 垃圾回收
weixin_50936255的博客
07-06 982
1、标记清除 2、引用计数
JS 语言基础笔记——第四篇（Symbol类型属性）
weixin_50936255的博客
05-28 642
目录 前言 前言
Javascript函数
最新发布
05-31
JavaScript 函数是一段可重复使用的代码块，它可以接受输入（称为参数），并返回输出。定义函数的一般语法如下： ```javascript function functionName(parameter1, parameter2, parameter3) { // 函数体 return ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值