JavaScript高级总结(1)

最新推荐文章于 2024-10-16 16:26:58 发布
最新推荐文章于 2024-10-16 16:26:58 发布
阅读量149 收藏
点赞数
分类专栏： JavaScript 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/WildKingxue/article/details/120067953
版权
本文详细介绍了JavaScript函数的定义、表达式、构造函数、函数提升、自调用及作为值使用等概念，并探讨了函数参数的显式与隐式、值传递与对象传递。此外，还讲解了函数调用的不同方式，包括常规调用、作为方法调用、构造函数调用以及使用call()和apply()。通过对this关键字的讨论，展示了其在不同调用场景下的行为。
摘要由CSDN通过智能技术生成

一.JavaScript 函数

1.JavaScript函数的定义

JavaScript 函数是被设计为执行特定任务的代码块。

JavaScript 函数会在某代码调用它时被执行。

JavaScript 使用关键字 function 定义函数，其后是函数名和括号 ()。

函数的声明格式

function  functionname(parameters){

          执行代码

}

function--声明

functionname--函数名称

parameters-- 参数

{}--函数体

函数名可包含字母、数字、下划线和美元符号（规则与变量名相同）。

圆括号可包括由逗号分隔的参数：

（参数1,参数2,参数3,......）

由于函数声明不是一个可执行语句，所以不以分号结束。

函数可以通过声明定义，也可以是一个表达式。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>函数</title>
		<script type="text/javascript">
			//声明	函数名称 参数
			function app(a,b,c){
				return a+b*c;//执行的代码
			}
			alert(app(5,10,2));//访问函数名称，参数值
		</script>
	</head>
	<body>
	</body>
</html>

2.函数表达式

JavaScript 函数可以通过一个表达式定义。

函数表达式可以存储在变量中.

格式：var 变量名称 = function (参数1, 参数2) {执行的代码};

以上函数实际上是一个 匿名函数 (函数没有名称)。

函数存储在变量中，不需要函数名称，通常通过变量名来调用。

在函数表达式存储在变量后，变量也可作为一个函数使用.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>函数表达式</title>
		<script type="text/javascript">
		//定义一个变量    匿名函数
			var x = function (a, b) {return a * b};//执行的代码
			var z=x(5,8)//给变量x赋值
			alert(z);//访问变量z
		</script>
	</head>
	<body>
	</body>
</html>

 3.function() 构造函数

函数可以通过关键字 function 定义。

函数同样可以通过内置的 JavaScript 函数构造器（Function()）定义。

var 变量 = new Function【函数构造器】(参数1, 参数2, 执行的代码);

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>构造函数</title>
		<script type="text/javascript">
		//创建变量  声明  执行的代码
			var shao=new Function("name","age","return name+'is'+age+'years old'");
			alert(shao("xhaoshao",20));//访问
		</script>
	</head>
	<body>
	</body>
</html>

 4.函数提升（Hoisting）

提升（Hoisting）是 JavaScript 默认将当前作用域提升到前面去的的行为。

提升（Hoisting）应用在变量的声明与函数的声明。

因此，函数可以在声明之前调用：

格式：

var 变量=函数名称(参数1,参数2);//
            alert(变量);
            function 函数名称(参数1,参数2){  //声明
                执行的代码
            }

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>函数提升</title>
		<script type="text/javascript">
			var shao=num(10,15);//定义一个变量名称  
			alert(shao);//调用/访问
			function num(a,b){  //声明
				return a+b;//执行代码
			}
		</script>
	</head>
	<body>
	</body>
</html>

5.自调用函数

函数表达式可以 "自调用"。【自己调用自己的】

如果表达式后面紧跟 () ，则会自动调用。

不能自调用声明的函数。

通过添加括号，来说明它是一个函数表达式：

函数中的代码将在其他代码调用该函数时执行：

  • 当事件发生时（当用户点击按钮时）
  • 当 JavaScript 代码调用时
  • 自动的（自调用）
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>自调用函数</title>
		<script type="text/javascript">
			(function shao(name){//声明
				alert(name);//调用
			})("xiaoshao");
			
		</script>
	</head>
	<body>
	</body>
</html>

 6.函数可作为一个值使用

JavaScript 函数作为一个值使用。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			var res1 = (function test3(name) {//声明 变量
				return "hello," + name;//执行代码
			})("zhangsan");
			alert(res1);//调用
		</script>
	</head>
	<body>
	</body>
</html>

 二.JavaScript 函数参数

函数显式参数(Parameters)与隐式参数(Arguments)

1.函数显示参数Parameters

functionName(parameter1, parameter2, parameter3) { // 要执行的代码…… }

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>显性参数</title>
		<script type="text/javascript">
			function shao(name,age) {//声明  参数
				return name+","+age;//执行代码
			}
			alert(shao("xiaoshao",20));//调用
		</script>
	</head>
	<body>
	</body>
</html>

2. 函数隐式参数Arguments

JavaScript 函数有个内置的对象 arguments 对象。

argument 对象包含了函数调用的参数数组。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>隐式参数</title>
		<script type="text/javascript">
			function shao() {//声明
				return arguments[0] + "," + arguments[1];//执行代码
			}
			alert(shao("xiaoshao", 23));//调用
		</script>
	</head>
	<body>
	</body>
</html>

 3.值传递参数

函数调用中的参数（parameter）是函数的参数（argument）。

JavaScript 参数通过值传递：函数只知道值，而不是参数的位置。

如果函数改变了参数的值，它不会改变参数的原始值。

参数的改变在函数之外是不可见的。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>值传递参数</title>
		<script type="text/javascript">
			function test3(name, age) {
				return name + "," + age;
			}
			var canshu1 = "王五"; //类型string
			var canshu2 = 25; //类型number
			alert(canshu1.charAt(1)); //canshu1变量就是对象
			//var res1 = test3(canshu1, canshu2);//执行的代码
			//alert(res1);//调用
		</script>
	</head>
	<body>
	</body>
</html>

 4.参数通过对象传递

在 JavaScript 中，对象引用是值。

正因如此，对象的行为就像它们通过引用来传递：

如果函数改变了对象属性，它也改变了原始值。

对象属性的改变在函数之外是可见的。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>对象传递参数</title>
		<script type="text/javascript">
			function test3(name, age) {
				return name + "," + age;
			}
			var canshu1 = "王五"; //类型string
			var canshu2 = 25; //类型number
			//alert(canshu1.charAt(1)); //canshu1变量就是对象
			var res1 = test3(canshu1, canshu2);//执行的代码
			alert(res1);//调用
		</script>
	</head>
	<body>
	</body>
</html>

三.函数的调用 

调用 JavaScript 函数：

在函数被定义时，函数内部的代码不会执行。

在函数被调用时，函数内部的代码会被执行。

调用函数通常也可以说“启动函数”或“执行函数”。

this 关键词

在 JavaScript 中，被称为 this 的事物，指的是“拥有”当前代码的对象。

this 的值，在函数中使用时，是“拥有”该函数的对象。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>this的使用</title>
		<script type="text/javascript">
			var stu = {
				name: "zhangsan",
				testname: function() {
					alert(this.name);
				}
			};
			stu.testname();
		</script>
	</head>
	<body>
	</body>
</html>

 请注意 this 并不是变量。它属于关键词。您无法改变 this 的值。

JavaScript 函数有 4 种调用方式。

1.作为一个函数调用

调用一个函数作为一个全局函数，会导致 this 的值成为全局对象。

作为变量来使用 window 对象很容易使程序崩溃。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>函数调用</title>
		<script type="text/javascript">
			function shao(x,y,z){
				return x*y/z
			}
			var num=shao(10,20,5);
			alert(num);
		</script>
	</head>
	<body>
	</body>
</html>

  

2.函数作为方法调用

以对象方法来调用函数，会导致 this 的值成为对象本身。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>函数调用</title>
		<script type="text/javascript">
			var shao={
				x:10,
				y:20,
				z:function(){
					return this.x+this.y;
				}
			}
			var a=shao.z();
			alert(a);
		</script>
	</head>
	<body>
	</body>
</html>

 

3.使用构造函数调用函数

如果函数调用前使用了 new 关键字, 则是调用了构造函数。

这看起来就像创建了新的函数，但实际上 JavaScript 函数是重新创建的对象。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>函数的调用</title>
		<script type="text/javascript">
			function myobj() {
				this.name = "zhangsan";
				this.age = 23;
				this.test1 = function() {
					return this.name + "-" + this.age;
				};
			}
			var obj = new myobj(); //构造函数的调用会创建一个新的对象
			//新的对象会从函数中继承属性和方法
			//alert(obj.name);
			//alert(obj.age);
			obj.name = "lisi";
			var res = obj.test1();
			alert(res);
		</script>
	</head>
	<body>
	</body>
</html>

4.作为函数方法调用函数

在 JavaScript 中, 函数是对象。JavaScript 函数有它的属性和方法。

call() 和 apply() 是预定义的函数方法。 两个方法可用于调用函数，两个方法的第一个参数必须是对象本身。

call()

call() 方法是预定义的 JavaScript 方法。

它可以用来调用所有者对象作为参数的方法。

通过 call()，您能够使用属于另一个对象的方法。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>call函数的调用</title>
		<script type="text/javascript">
			function myFunction(a, b) {
				return a * b;
			}
			var myfun;
			myfun = myFunction.call(myfun, 8, 12.5);
			alert(myfun);
		</script>
	</head>
	<body>
	</body>
</html>

 apply()

apply() 方法与 call() 方法非常相似。

apply() 方法接受数组中的参数。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			function num(x, y) {
				return x / y;
			}
			var a = [525, 25];
			var shao = num.apply(this, a);
			alert(shao);
		</script>
	</head>
	<body>
	</body>
</html>

call() 和 apply() 之间的区别

不同之处是：

  • call() 方法分别接受参数。
  • apply() 方法接受数组形式的参数。
  • 如果要使用数组而不是参数列表，则 apply() 方法非常方便。
WildKingxue
关注
专栏目录
javascript学习！！！！
北海几经夏的博客
03-09 150
文章目录js基础显示方案计算数据类型对象new字符串方法js作用域对象对象易变遍历对象对象方法对象访问器对象构造器函数定义函数自调用箭头函数参数thiscall()apply()Math.max()全局&局部变量闭包继承 参考教程W3school_javascript css,js精华汇总！！！这篇真的太全面了 本文内容重点：js作用域、闭包、继承、面向对象设计 js基础 显示方案 window.alert() document.write() innerHTML console.log() //
JavaScript函数—学习前端基础必备的知识，掌握了函数的定义、函数的参数 、函数的以及返回，离成功又近一步
weixin_45788388的博客
04-24 231
学习函数最大的目的就是给我们省劲儿，它可以对代码复用。 函数定义一次，可以无限制的调用。 逻辑修改的时候，只要改函数定义里就可以了。 通过参数，我们可以得出不同的结果。
JavaScript基础语法
m0_62558365的博客
04-28 1551
JavaScript基础语法 JavaScript是web开发者必学的三种语言之一 HTML定义网页的内容 css规定网页的布局 JavaScript对网页进行编程 JavaScript被设计为向HTML页面增加交互性
JavaScript高级（详细总结）
程序员阿龙的博客
08-19 2273
JavaScript高级（详细总结）
JavaScript高级知识点总结
weixin_44763882的博客
08-30 2787
文章目录JavaScript总结：第一天：JS原型介绍1、JS组成的部分2、类型检测3、面向对象介绍4、面向过程和面向对象区别5、创建对象的三种方式6、this做了几件事7、显示对象结构8、构造函数和实例对象的关系9、构造函数带来的问题10、原型添加方法11、什么是原型12、构造函数和实例对象和原型对象之间的关系13、什么样子的数据需要写在原型中？16、实例对象使用的属性和方法层层搜索17、为内置对象添加方法18、把局部变量变成全局变量第二天：面向对象特点,贪吃蛇项目1、面向对象特点2、什么是原型？3、函数
JavaScript高级知识总结（高级篇）
王春燕的博客
05-02 7669
目录 一、深入基础 1.1数据类型 1.分类： 2.判断： 3.undefined与null的区别？ 4.严格区别变量类型与数据类型？ 1.2数据变量与内存 1.什么是数据？ 2.什么是内存？ 3.什么是变量？ 4.内存，数据，变量三者之间的关系 5.var a = xxx; a内存中到底保存的是什么？ 6.关于引用变量的赋值问题： 7.在js调用函数时传递变量参数时，是值传递还是引用传递？ 8.js引擎如何管理内存 1.3对象 1.什么是对象？ 2.为什么用对象？
JavaScript 高级（进阶）
m0_73198722的博客
10-29 833
JS高级
尚硅谷JavaScript高级学习笔记
javaThinker的专栏
03-08 1118
JavaScript中函数是对象。我们后续描述构造函数的内存模型时，会将构造函数称为构造函数对象。typeof 运算符来查看值的类型，它返回的是类型的字符串值 会做数据转换 输出： 每个函数都有一个prototype属性，它默认指向一个0bject空对象(即称为:原型对象) 给原型对象添加属性、方法，函数的所有实例对象自动拥有原型中的属性(方法) 16、显式原型和隐式原型 和 中保存的都是原型对象的地址值。Fun的prototype、f的__proto__属性什么时
day04 JavaScript高级程序设计 阅读总结
weixin_49172439的博客
03-21 1653
《JavaScript高级程序设计》（第四版）阅读总结 额，据说这本是前端er必看书籍，花了20个小时简单把这本书过了一下，目前暂时很少用到的东西我这一遍就没有过了，等以后要用的时候再回来继续学了。 先来谈谈这本书的缺点，书籍前面章节用到了一些后面才讲到的东西，比如第三章讲symbol对象时，就用到了后面才讲的iterator和generator。然后就是感觉讲的有点太广了，而且基本没有课后习题，看过就是看过了，顶多自己花时间把书里面的例子都敲一遍。所以我建议应该和现代JavaScript教程一起食用。 反
JavaScript高级-自我总结
Hi_ZH的博客
04-22 1299
JavaScript 知识点
Javascript高级笔记总结.pdf
04-03
JavaScript是Web开发中不可或缺的一部分，它负责为网页添加动态效果和交互性。在JavaScript中，ES6（ECMAScript 2015）引入了许多新特性，极大地提升了开发效率和代码质量。本篇笔记主要围绕ES6中创建变量的新方法...
对javascript的一点点认识总结《javascript高级程序设计》读书笔记
10-28
在深入探讨JavaScript编程语言之前，...在《JavaScript高级程序设计》这本书中，作者深入探讨了这些概念，并提供了一系列实用的编程技巧和最佳实践，这对于任何希望深化JavaScript知识的开发者来说都是一份宝贵的资源。
基于JavaScript、CSS、HTML和Java的MySQL高级深度总结设计源码
10-04
该项目是一款综合运用HTML、JavaScript、CSS和Java的高级MySQL深度总结设计源码，汇集2041个文件，涵盖656个PNG图片、576个JavaScript文件、327个CSS文件、218个HTML文件、49个Java文件以及少量XML、JSON、Map等其他...
JavaScript总结1
08-03
了解这些基础知识后，可以进一步学习JavaScript的更高级特性，如函数、对象、数组、原型链、闭包、异步编程等。随着技术的发展，现代JavaScript（ES6+）还引入了许多新特性，如箭头函数、模板字符串、let和const、...
npm 和 npx 的区别和使用场景
Dou_Hua6的博客
10-09 665
自动下载和缓存：如果本地未安装所需包，npx会自动下载并执行，执行完毕后可以选择保留或删除。脚本运行：通过package.json中的scripts字段定义和运行自定义脚本。依赖管理：管理项目的dependencies和devDependencies。简化命令行工具的使用：临时执行命令，避免全局安装带来的版本冲突或污染。npm 全称：Node Package Manager。发布包：将自己的包发布到npm注册表供他人使用。：无需全局安装即可运行npm包中的可执行文件。
【JavaScript】移动色块案例 实现一个可以拖动并且在拖动过程中会自动改变颜色的色块（JS 事件监听器）
m0_66584716的博客
10-11 1338
- **移动色块**：用户可以通过鼠标按住并拖动页面上的红色方块（`#blocks`）。当用户按下鼠标左键时，色块开始跟随鼠标的移动而移动；当用户释放鼠标左键时，色块停止移动。 - **显示当前位置**：随着色块的移动，其当前的屏幕坐标（相对于浏览器窗口）会被实时更新，并显示在页面底部左侧的位置显示区域（`#positionDisplay`）中。 - **自动变色**：一旦用户开始拖动色块，系统就会每隔300毫秒随机改变一次色块的颜色。颜色的变化是通过调用 `getRandomColor()` 函数生成一个
ECMAScript标准解析及其发展历史与技术演进
qq_20245171的博客
10-15 503
ECMAScript（简称ES）是由ECMA国际（欧洲计算机制造商协会）制定的一种脚本语言规范。它是JavaScript、JScript等语言的基础，并为现代Web开发提供了强大的支持。ECMAScript标准不仅定义了语言的语法和语义，还涵盖了数据类型、对象模型和执行环境等内容，极大推动了JavaScript语言的发展。本文将全面介绍ECMAScript标准的起源、各个版本的演变、关键特性以及未来趋势，深入探讨其对Web开发及编程语言设计的影响。
Element-plus el-form、el-dialog 数据回显同时用时，重置失效问题
Mr. Zhang Xiaojian's Blog
10-12 499
当第一次打开网页并点击“编辑”按钮时，虽然对话框变量变为 true 使对话框可见，但同步代码会将 formData 对象的属性设置为默认值。由于 Vue 的异步更新机制，DOM 实际上还未更新，因此表单组件内绑定了这些有值的初始数据。这样，在后续调用 resetFields 方法时，表单将会重置为这些默认值而不是空值。编辑时表单的初始值被设置成了回显的数据，而不是空字符串。时，表单会回到上次设置的初始值，即回显的数据。
基于Java微信小程序的水果销售系统详细设计和实现(源码+lw+部署文档+讲解等)
最新发布
源码好优多
10-16 384
请联系我获取更详细的演示视频。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值