javascript_03_js function 模拟class-优快云博客

本文深入讲解JavaScript中的函数定义与使用、参数传递、递归、对象创建、闭包等核心概念，并探讨如何通过修改函数调用指针实现继承。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一. 函数的定义

<script type="text/javascript">
		function fn(){
			
		}
		//alert(typeof fn);//function
		/*
		1.没有返回值修饰符
		2.参数不需要修饰符
		*/
		//静态定义
		/*
		function fn1(a,b) {	
			return (a+b);
		}
		//alert(fn1(20,30));
		//匿名函数
		(function (a,b) {
		//alert(a+b);
		})(20,20);
		(function () {
			//alert("hello");
		})();
		
		//字面量方式 /直接量
		var fun=function(a,b){
			//alert("hello"+(a+b));
		}
		fun(10,10);
		
		var fun2=function f(){
			//alert("good job");
		}
		fun2();
		*/
		
		//动态匿名方式 
		var func=new Function("x","y","alert(x+y);");//x是方法的参数 alert(x);方法体 
		
		//func(100,120);
		
		/*
		函数的使用方式：
			1.直接调用:函数名字(参数。。。)
			2.放在a标签里面使用
			3.通过事件来使用
			4.递归
			5.闭包 
		*/
	</script>
</head>
<body>
	<a href="javascript:func(100,150)">我是一个链接</a>
	<button onclick="javascript:func(100,150)">点我啊</button>
</body>

       1.没有返回值修饰符
       2.参数不需要修饰符
       3.静态定义，可以先调用再定义
       4.匿名函数：把匿名函数当成一个整体
       5.动态匿名方式：不推荐使用
       6.函数的使用方式：
           1.直接调用：函数名字（参数。。。）
           2. 放在 a 标签里面使用
           3. 通过事件来使用
           4. 递归
           5. 闭包

二.修改指针

<script type="text/javascript">
	//指针：函数的调用者对象
	function fun() {
		alert(this);
	}
	
	fun();//this 代表的是调用该函数的对象 ---window
	
	
	//修改指针：改变调用函数的对象 
	function fun1(a,b){
		alert(a+b);
		alert(this);
	}
	
	function fun2(a,b){
		alert(a+b);
	}
	
	//需求：讲fun1的调用 指针指向fun2，该怎么办？
		fun1.call(fun2,20,30);//输出来是fun2对象==说明指针指向fun2(也就是 f2调用f1)
		fun1,apply(fun2,[20,30]);
		
		
		//简单模拟继承
		
		function Person(name,sex){
			this.name=name;
			this.sex=sex;
			this.speak=function(){
				alert(this.name);
			}
		}
		function chinese(name,sex,age) {
			this.name=name;
			this.sex=sex;
			this.age=age;
		}
		var person=new Person("张三","男 ");
		var ch=new chinese("李四" ," 女");
		person.speak.call(ch,"张三 ","男");
		
		ch.speak();
	
</script>

指针：函数的调用者对象

三.参数

<title>参数</title>
<script type="text/javascript">
	function fun(a,b,c){
		for(var i=0;i<arguments.length;i++){
			alert(arguments[i]);
		}
		alert(arguments.callee);//返回当前执行函数的对象
		func();
	}
	//fun(20,30,40);
	
	function func(){
		alert(func.caller);//返回的是调用该函数的函数对象 
	}
	
	//func();//null
	
</script>
</head>
<body>

</body>

四.递归

<title>递归</title>
<script type="text/javascript">
	//递归：函数自身调用自己(通俗)
	function fun(n){
		if(n==0){
			return 0;
		}
		return n+fun(n-1);
	}
	alert("所求之和为："+fun(3));
	
	//1,1,2,3,5,8,13,21,34,56
	function func(n){
		if(n==1||n==2){
			return 1;
		}else{
			return func(n-2)+func(n-1);
		}
	}
	alert("所求的数为："+func(6));
</script>
</head>

五.创建对象

1.字面量方式：可以动态添加属性局限性：只代表一个对象

2.使用 function 模拟 class

function Animal1(name, age) {
	this.name = name;
	this.age = age;
	
	this.bite = function() {
		alert(this.name + "又咬人了。。。");
	}
}
var animal1 = new Animal1("小泰迪", 2);
var animal2 = new Animal1("小藏獒", 2);
/* animal1.bite();
animal2.bite(); */

3. 使用工厂方式

var obj = new Object();
obj.name = "李四";
obj.age = 25;
obj.eat = function() {
	alert(this.name + " == eating...");
}

// obj.eat();

4. 使用原型对象

// 4. 使用原型对象
function Cat() {
	Cat.prototype.name = "小花猫";
	Cat.prototype.age = 2;
	
	// 函数里面没有静态域（没有静态变量）
	Cat.prototype.catchMouse = function() {
		alert(this.name + "==" + this.age);
	}
}

5. 结合原型以及 function 来

// 5. 结合原型以及 function 来
function Pig(name, age) {
	this.name = name;
	this.age = age;
	
	Pig.prototype.sleep = function(){
		alert(this.name + " == 吃完又要去睡觉了。。");
	}
}

6. 动态原型的方式

// 6. 动态原型的方式
function fun(name, age) {
	this.name = name;
	this.age = age;
	
	if(typeof fun.prototype.eat == "undefined") {
		fun.prototype.eat = function() {
			alert(this.name);
		}

六. 闭包

<title>闭包</title>
<script type="text/javascript">
/*
 	概念：
 		1. 函数里面的函数
 		2. 在外函数内部能调用外函数局部变量的函数 —— 闭包
 */
 
/*
 	作用域：作用的范围
 		全局作用域：
 		局部作用域：
 		
 		全局变量：
 			1. 函数外部定义的变量
 			2. 不用 var 修饰的变量
 		局部变量：
 */
/*  
 var a = 20;
 function fun() {
	 b = 30; // 全局变量
	 b++;
	 var c = 100; // 局部变量
	 alert(a++);
 } */
/*  fun();
 alert(a);
 alert(b); */
 /* alert(c);  *///undefined，被销毁了

// 闭包的内容
var num = 100;
function func() {
	var num2 = 100; // 相当于封装
	
	// 对外提供的公共的方法 setter 方法
	method = function() {
		num2+=1;
	}
	
	// public 方法
	var method2 = function() { // 闭包
		alert(num2);
		// alert("hello");
	}
	
	return method2; // 返回值
}

// func()(); 调用内部函数

// 问题：在函数外部要使用函数的局部变量，该怎么做？
// 确保局部变量在函数执行完毕的时候还存在于内存当中——闭包

/*
 	闭包作用：
 		1. 访问函数局部变量
 		2. 让局部变量长时间保留在内存当中
 */

var result = func(); // result == ?  method2
method();
result(); // method2() 打印101 ====说明 num2 还存在在内存当中
method();
result(); // method2() 打印102 ====说明 num2 还存在在内存当中

// 弊端：会浪费内存

</script>
</head>
<body

概念：

        1. 函数里面的函数
        2. 在外函数内部能调用外函数局部变量的函数 —— 闭包
       作用：
           1. 访问函数局部变量
           2. 让局部变量长时间保留在内存当中