JS高级特性（一）

最新推荐文章于 2024-01-15 10:00:11 发布
最新推荐文章于 2024-01-15 10:00:11 发布
阅读量430 收藏
点赞数
分类专栏： JavaScript 文章标签： JS高级特性 JS函数 闭包

一、函数

1、如何定义函数

<!DOCTYPE html>
<html>
  <head>
    <title>01_如何定义函数.html</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

  </head>
  
  <body>
    This is my HTML page. <br>
  </body>
  <script type="text/javascript">
  	//1 普通方式
	function add(a,b){
		return a + b;
	}
	
	//2 直接量方式
	var add = function(a,b){
		return a + b;
	}
	
	//3 构造函数方式(在javascript里,底层提供Function对象)
	var add = new Function('a','b','return a+b;');
	
	//javascript中不存在类的概念,只有对象的概念
	
  </script>
</html>

2、Arguments对象

<!DOCTYPE html>
<html>
  <head>
    <title>02_Arguments 对象.html</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

  </head>
  
  <body>
    This is my HTML page. <br>
  </body>
  <script type="text/javascript">
  	/*
  	 * Java中具有函数重载:
  	 * 	* 节省了函数的命名空间
  	 * 	* 代码更加简单
  	 * 	* 重载的性能更好
  	 * 
  	 * javascript也想实现函数的重载?没有
  	 * 	* 在javascript中定义多个同名的函数,只有最后一个定义的函数起作用
  	 * 	* NaN:表示不是一个数值的内容(不存在的值)
  	 * Arguments对象:
  	 * 	* Arguments对象是数组对象
  	 * 	* 利用Arguments对象的length属性,获取参数的个数
  	 * 	* 利用Arguments对象的特性,模拟函数重载的效果?可以
  	 */
//	function add(a,b){
//		return a+b;
//	}
//	function add(a,b,c){
//		return a+b+c;
//	}
//	
//	alert(add(1,2));		//output	3	NaN
//	alert(add(1,2,3));		//output	6
	
//	function fn(){
//		alert(arguments.length);
//	}
//	
//	fn();				//output	0
//	fn("a");			//output	1
//	fn("a","b");		//output	2
//	fn("a","b","c");	//output	3
	
	function add(){
		if(arguments.length==2){
			return arguments[0] + arguments[1];
		}else if(arguments.length==3){
			return arguments[0] + arguments[1] + arguments[2];
		}
	}
	
	alert(add(1,2));		//output	3
	alert(add(1,2,3));		//output	6
	
  </script>
</html>

3、变量的作用域

<!DOCTYPE html>
<html>
  <head>
    <title>03_变量的作用域.html</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

  </head>
  
  <body>
    This is my HTML page. <br>
  </body>
  <script type="text/javascript">
  	/*
  	 * 变量的作用域:
  	 * 	* javascript中存在(变量)
  	 * 		* 全局变量:全局域
  	 * 		* 局部变量:当前局部域(函数域)
  	 * 	* javascript中存在(域)
  	 * 		* 全局域
  	 * 		* 函数域(局部域)
  	 */
//	var a = "a";
//	
//	function fn(){
//		var b = "b";
//		
//		alert(a);		//output	a
//		alert(b);		//output	b
//	}
//	
//	fn();
//	alert(a);			//output	a
//	alert(b);			//output	undefind
	
	/*
	 * 定义局部变量时,不使用"var"修饰符:
	 * 	* javascript语法上支持这种写法
	 * 	* 局部变量b被定义出来
	 * 	* javascript会自动将局部变量b定义为全局变量
	 * 在实际开发中,不建议这样编写:
	 * 	* 编码不规范
	 */
//	var a = "a";
//	
//	function fn(){
//		b = "b";
//		
//		alert(a);		//output	a
//		alert(b);		//output	b
//	}
//	
//	fn();
//	alert(a);			//output	a
//	alert(b);			//output	b
	
	/*
	 * 在javascript中,定义全局变量与局部变量同名时:
	 * 	* 在函数域中,只能访问到局部变量
	 * 
	 * 解读代码(代码的执行情况):
	 * 	* 定义一个全局变量a,并初始化为a(存在并且有值)
	 * 	* 定义一个函数fn()(而不执行的时候)
	 * 		* 局部变量a被定义,并没有初始化(存在但是没值)
	 * 	* 调用函数fn()
	 * 		* 第一次打印变量a,是局部变量a,结果为undefind
	 * 		* 第二次打印变量a,是局部变量a,结果为b
	 * 	* 在全局域中,访问变量a,只能是全局变量a
	 */
	var a = "a";
	
	function fn(){
		alert(a);		//output	undefind
		
		var a = "b";
		
		alert(a);		//output	b
	}
	
	fn();
	alert(a);			//output	a
	
  </script>
<h3></html></h3>

4、几种特殊的函数

<!DOCTYPE html>
<html>
  <head>
    <title>04_几种特殊的函数.html</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

  </head>
  
  <body>
    This is my HTML page. <br>
  </body>
  <script type="text/javascript">
  	/*
  	 * 1 匿名函数:没有名的函数
  	 * 	* (匿名回调函数)可以将匿名函数作为参数传递给其他函数。这样，接收方函数就能利用所传递的函数来完成某些事情。
  	 * 	* (自调函数)可以定义某个匿名函数来执行某些一次性任务。
  	 */
	//function(){}
	
	/*
	 * 这种情况下,函数one和two,称之为叫做回调函数
	 * 	* 定义:将一个函数作为另一个函数的参数,而作为参数的函数就叫做回调函数
	 * 将匿名函数作为参数:匿名回调函数
	 * 	* 定义: 将一个匿名函数作为另一个函数的参数,而作为参数的匿名函数就叫做匿名回调函数
	 */
//	var one = function(){return 1;}
//	var two = function(){return 2;}
	
	//函数fn()的参数a,b是参数函数
//	function fn(a,b){
//		return a() + b();
//	}
//	
//	//alert(fn(one,two));			//output	3
//	//以上写法是否可以改写?
//	alert(fn(function(){return 1;},function(){return 2;}));		//output	3
	
	/*
	 * 一次性任务:函数只被调用一次
	 * 	* 实现页面初始化工作的函数(不严格)
	 * 	* 定义即调用的函数(不严格)
	 * 	* 自调函数:自己调用自己
	 * 		* 第一个小括号:封装函数
	 * 		* 第二个小括号:调用函数(传参)
	 */
//	(
//		function(){
//			alert("javascript");
//		}
//	)();
	
//	(
//		function(str){
//			alert(str+" javascript");
//		}
//	)("hello");
	
  </script>
</html>

<!DOCTYPE html>
<html>
  <head>
    <title>04_几种特殊函数.html</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

  </head>
  
  <body>
    This is my HTML page. <br>
  </body>
  <script type="text/javascript">
  	/*
  	 * 内部(私有)函数(Java里内部类)
  	 * 	* 保证了私有性 —— 外部不能访问不到(提供了安全性)
  	 */
//	function fn(){
//		var a = "a";
//		
//		function n(){
//			var b = "b";
//			
//			alert(a+b);		//output	ab
//		}
//		
//		return n();
//	}
//	
//	fn();		//output	ab
	
	/*
	 * (了解)返回函数的函数(内部函数的一种特殊用法)
	 * 	* 可以在全局域中,访问到局部变量的值
	 * 	* 定义一个函数时,最终执行两个逻辑代码块
	 */
	function fn(){
		//逻辑代码块
		var a = "a";
		
		return function(){
			//逻辑代码块
			return a;
		}
	}
	
	alert(fn());			//output	function(){return a;}
	
	//var fun = fn();
	//var fun = function(){return a;}
	
	//alert(fun());			//output	a
	
	alert(fn()());			//output	a
	
	/*
	 * javascript中的特殊函数,不是必要使用的内容
	 * 	* 第一次完成实现逻辑内容时,很少会用到特殊函数
	 * 	* 在做代码优化的时候,会使用特殊函数
	 * 
	 * 代码实现:一次性做到代码最优
	 * 	* 实现逻辑内容
	 * 	* 代码优化
	 */
	
  </script>
</html>

二、闭包

1、作用域链

<!DOCTYPE html>
<html>
  <head>
    <title>01_作用域链.html</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

  </head>
  
  <body>
    This is my HTML page. <br>
  </body>
  <script type="text/javascript">
  	
	var a = "a";
	
	function fn(){
		var b = "b";
		
		alert(a);			//output	a
		alert(b);			//output	b
		
		function n(){
			var c = "c";
			
			alert(a);		//output	a
			alert(b);		//output	b
			alert(c);		//output	c
		}
		
		return n();
	}
	
	fn();
	
  </script>
</html>

2、闭包

<!DOCTYPE html>
<html>
  <head>
    <title>02_闭包.html</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

  </head>
  
  <body>
    This is my HTML page. <br>
  </body>
  <script type="text/javascript">
  	
	var a = "a";
	var n;
	function fn(){
		var b = "b";
		
		alert(a);			//output	a
		alert(b);			//output	b
		
		//变量定义,初始化
		n = function(){
			var c = "c";
			
			alert(a);		//output	a
			alert(b);		//output	b
			alert(c);		//output	c
		}
		
		return n();
	}
	
	//fn();
	n();
	
  </script>
</html>

3、循环中的闭包结构

<!DOCTYPE html>
<html>
  <head>
    <title>03_循环中的闭包结构.html</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

  </head>
  
  <body>
    This is my HTML page. <br>
  </body>
  <script type="text/javascript">
  	/*
  	 * * 定义了一个函数f()
  	 * 		* 定义了一个空的数组a
  	 * 		* 定义了一个局部变量i,没有初始化
  	 * 		* 遍历:
  	 * 			* 初始化局部变量i:0,1,2,3
  	 * 			* 初始化数组a:a[0],a[1],a[2] - function(){return i;}
  	 * 		* 返回值为数组a
  	 * 	* 定义一个全局变量fun,初始化为函数f()的调用(数组a)
  	 * 	* 调用全局变量fun
  	 */
//	function f(){
//		var a = [];
//		var i;
//		for(i = 0; i < 3; i++){
//			a[i] = function(){
//				return i;
//			}
//		}
//		return a;
//	}
//	
//	var fun = f();
//	
//	alert(fun[0]());		//output	3
//	alert(fun[1]());		//output	3
//	alert(fun[2]());		//output	3

//	function f(){
//		var a = [];
//		var i;
//		for(i = 0; i < 3; i++){
//			a[i] = (
//				function(x){
//					return x;
//				}
//			)(i);
//		}
//		return a;
//	}
//	
//	var fun = f();
//	
//	alert(fun[0]);		//output	0
//	alert(fun[1]);		//output	1
//	alert(fun[2]);		//output	2
	
//	function f(){
//		var a = [];
//		var i;
//		function n(x){
//			return x;
//		}
//		for(i = 0; i < 3; i++){
//			a[i] = n(i);
//		}
//		return a;
//	}
//	
//	var fun = f();
//	
//	alert(fun[0]);		//output	0
//	alert(fun[1]);		//output	1
//	alert(fun[2]);		//output	2
	
	function f(){
		var a = [];
		var i;
		for(i = 0; i < 3; i++){
			a[i] = i;
		}
		return a;
	}
	
	var fun = f();
	
	alert(fun[0]);		//output	0
	alert(fun[1]);		//output	1
	alert(fun[2]);		//output	2
	
  </script>
</html>






须佐能乎！
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
简单谈谈javascript高级特性
10-16
看过很多关于js高级特性介绍的文章，本文是个人感觉最通俗易懂的，这里分享给大家，希望大家能够喜欢
JavaScript高级特性
weixin_55101030的博客
09-21 462
Javascript高级特性
JavaScript高级特性详解
geng1025的博客
01-15 443
本文将深入探讨JavaScript中的一些高级特性，包括闭包、原型链、高阶函数和异步编程。我们将通过详细的注释和实例来帮助读者理解这些概念，并通过总结部分强调其在实际开发中的应用。
js高级特性-对象(原型对象，原型链，继承)
weixin_44749729的博客
08-13 367
概念 对象是JavaScript的基本数据类型 对象是一种复合值：它将很多值（原始值或者其他对象）聚合在一起，可通过名字访问这些值。对象也可看做是属性的无序集合，每个属性都是一个名/值对。属性名是字符串，因此我们可以把对象看成是从字符串到值得映射。 JavaScript对象还可以从一个称为原型的对象继承属性。对象的方法通常是继承的属性。这种“原型式继承”（prototypal inheritance）是JavaScript的核心特征。 除了字符串、数字、true、false、null和undifined之外
JS高阶特性
qq_32907491的博客
08-10 131
Array 对象用于在变量中存储多个值:第一个数组元素的索引值为 0，第二个索引值为 1，以此类推。更多有关 JavaScript Array 内容请参考。
JavaScript 技巧与高级特性
pwz1985的专栏
11-24 142
  随着 Ajax 应用的流行，JavaScript 语言得到了越来越多的关注。开发人员对 JavaScript 的使用也日益深入。 JavaScript 已经不再只是用来为页面添加一些花哨的效果，它已经成为构建 Ajax 应用的重要基石。 JavaScript 作为一种专门设计用来在浏览器中执行的动态语言，它有许多重要的特性，并且不同于传统的 Java 或 C++ 语言。熟悉这些特性可以帮助开...
详解vue高级特性
10-15
Vue.js 是一款流行的前端框架，其高级特性极大地增强了开发者构建复杂应用的能力。本文将深入探讨Vue的几个关键高级特性，包括watch的进阶用法、$event的不同表现以及异步更新队列的工作原理。 首先，让我们关注Vue...
Vue.js组件高级特性实例详解
10-17
主要介绍了Vue.js组件高级特性,结合实例形式详细分析了vue.js组件递归、模板、动态加载、渲染等相关操作技巧,需要的朋友可以参考下
js高级特性
04-03
JavaScript，作为一种广泛应用于Web开发的脚本语言，其高级...通过深入理解这些JavaScript高级特性，开发者可以编写出更高效、更易维护的代码，提升编程能力。学习这些内容，对于阅读源码、使用开发工具也会大有裨益。
Javascrip高级特性其中两个【作用域、闭包】
mikeyPlisetsky的博客
11-11 171
作用域、闭包
JS高级特性
originalApril的博客
06-16 254
本文主要介绍了什么是代码段，什么是预解析，执行上下文和数据存储，及一些执行上下文的练习题。
javascript的高级特性
Singularinty的博客
07-03 454
高级javascript编程原理javascript的特殊之处每个函数对象都有一个prototype对象每个函数对象的prototype都有一个constructor属性函数构建的时候prototype指向父对象的prototype，或者理解为复制一份函数构建的时候prototype的constructor指向自己调用函数的时候会执行constructor方法函数可以调用自己的prototype对...
javaScript高级特性（类比JAVA理解javaScript）
wang2963973852的博客
11-02 968
本文承接于之前写的一篇文章： http://blog.csdn.net/wang2963973852/article/details/52945187
JS高级特性（三）
qq_34416191的博客
09-03 515
五、原型（prototype） 1、研究函数对象的原型属性 01_研究函数对象的原型属性.html --> This is my HTML page. //原型是函数对象的一个属性(普通对象是没有原型属性的.). function Hero(){ this.name =
JavaScript 函数，从入门到精通
清心
08-31 810
函数入门 一：认识JavaScript函数 1.函数是对象 所有JavaScript函数都是对象，所以它具有对象的全部特征： 可以通过字面量创建 function fn() {} 可以赋值给变量，数组或其他对象的属性 可以作为函数的参数来传递 可以作为函数的返回值 可以动态创建和分配属性 2.函数作为对象，具有属性：如 标记属性、计算结果属性、工具函数属性 标记属性 可以在函数上挂载一些标记属性，如该函数是否可用、函数序号、使用环境等等与该函数有关的特征信息。 // 例1：函数的封装者标记 fun
javascript高级特性(面向对象)
weixin_30693183的博客
08-04 133
javascript高级特性(面向对象): * 面向对象: * 面向对象和面向过程的区别: * 面向对象:人就是对象,年龄\性别就是属性,出生\上学\结婚就是方法. * 面向过程:人出生、上学、工作、结婚、生子、去世整个过程. * 对象和类的区别: * 类:类比作一堆美女. * 对象:对象就是范冰冰. * javascript的开发工具: * WebSt...
Tedu教育JavaScript的课件
最新发布
02-06
它已成为全球最受欢迎的编程语言之一，主要用于为网页添加交互性和动态内容。 - 与Java的区别：尽管名称相似，但JavaScript和Java是两种截然不同的语言，JavaScript主要用于Web前端，而Java主要应用于服务器端和企业...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值