匿名函数闭包原型链 this冒充

最新推荐文章于 2025-05-21 09:24:30 发布

嘟噜嘟噜123

最新推荐文章于 2025-05-21 09:24:30 发布

阅读量129

点赞数

文章标签：原型模式 linq webview

本文链接：https://blog.youkuaiyun.com/m0_62371223/article/details/125154067

版权

1，函数类

function Animal（）{}
var a1 = new Animal()

1.11 1.通过new执行的函数称为构造函数，（建议大写)也可以称为类

1.12 2.通过new生成对象，称为类的实例（实例对象）

1.13 3.构造函数中的this指向对应的实例

2，原型链

2.1原型链的概念

1.每个构造函数（类）都有个显示原型prototype

2.每个实例（对象）都有一个隐式原型—proto—

3.对象的隐式原型—proto—等于其构造函数（类）的显示原型prototype

4.当查找对象的属性或方法时，先在自身上查找，找不到沿着—proto—向上逐级查找

5.我们把原型的原型的链条关系称为原型链

2.2原型链的作用

1.实现了js的继承

2.可以给所有的类的实例添加公用方法和属性


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<h1>如何创建一个对象</h1>
		<p>创建对象:1 字面量,2 new一个</p>
		<script>
		// 用字面量方式创建了一个对象实例
		var obj = {name:"mumu",age:18};
		console.log(obj);
		
		// new WOW().init()
		// new Date()
		// 创建一个动物类(用函数的方式)
		function Animal(name,age){
			this.name = name;
			this.age = age;
		}
		// 我们可以把每一个实例的公用方法,写在构造函数(类)的显示原型prototype上
		Animal.prototype.say = function(){
			alert(`大家好我的名字是${this.name},今年${this.age}岁`)
		}
		
		 // 写个一student类继承Animal
		 function Student(name,age,no){
			 // this指向的student new出来的实例
			 // 01 实现了对Animal构造函数的继承
			 Animal.call(this,name,age);
		 }
		 // 02 实现对原型的继承 Object.create 从现有的对象创建一个新的对象
		 Student.prototype = Object.create(Animal.prototype);
		 // 修改实例的构造函数
		 Student.prototype.constructor = Student;
		 // 添加Student实例的公用方法 study学习
		 Student.prototype.study = function(){
			 alert(`大家好我是${this.name},我正在努力学习前端`);
		 }
		 // 创建2个学生实例
		 var s1 = new Student("小明",17,"001");
		 var s2 = new Student("小高",22,"004");
		 
		// var a1 = new Animal("小黄",3);
		// var a2 = new Animal("小花",4)
		// Animal 是构造函数 和普通函数的区别指向前加new关键字
		// a1,a2 是实例对象
		// Animal中的this指向的是 其对应的实例
		// say方法是a1,a2实例的公用方法
		// 每一个对象实例都有一个隐是原型__proto__,等于其构造函数的显示原型
		// 有什么用呢?js的原型作用实现的"继承"
		// 当查找一个对象的属性,方法时候:先在自身上找,找不到这沿着原型向上查找,
		// 我们把原型的原型形成的链条关系叫原型链
		</script>
	</body>
</html>

3.继承

3.1class类可以用extends关键字实现继承

3.2函数类继承

3.2.1继承构造函数
        function Student（name，age，no）{
         Animal.call(this,name,age)
        }

3.2.2继承原型
Student.prototype = Object.creat(Animal.prototype)

3.2.3修正构造函数
Student.prototype.constructor =Stuent;

//自定义Student扩展方法
Student.prototype.study = function（）{}

4，闭包

4.1特点

特点：函数嵌套函数：函数作为返回值被返回，函数作为参数被传入

4.2作用：

01创建局部作用域；

02在函数外部可以访问函数内部的局部变量；03封装组件与插件

4.3缺点：

闭包中的自由变量不会被自动销毁，会常驻内存，使用不当容易造成内存泄漏

4.4考点：

闭包中的自由变量（在该作用域没有定义就使用的变量）在函数定义时候确定的，不是函数执行时候确定的

参考代码：


<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title></title>
</head>
<body>
	<h1>闭包</h1>
	<p>闭包:函数嵌套函,函数作为参数被传入,函数作为返回值被返回</p>
	<p>闭包作用:创建局部变量;可以封装组件或者插件;函数外部访问函数内部的局部变量</p>
	<p>闭包特点:闭包中的局部变量不会销毁,使用不当容易造成内存泄漏</p>
	<script type="text/javascript">
	// 函数作为返回值被返回,形成闭包
		/* function outer(){
			var a = 100;
			return function(){
				a++;
				console.log(a);
			}
		}
		var inner = outer();
		inner(); */
		// 01 a会常驻内存,不会销毁;可以在outer的外部访问a(自由变量)
		
		var b = 100;
	function fn (){
		b++;
		console.log(b);
	}
	function outer(callback){
		var b = 500;
		callback();
	}
	outer(fn);
	// 02 闭包中的自由变量,是在函数定义时候确定的,不是执行的时候
	// 02 闭包中的自由遍历不会销毁
	</script>
</body>
</html>

5，this冒充


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<h1>call方法</h1>
		<script>
		function add(a,b){
			console.log(a,b,this);
		}
		// add(3,5);
		// add.call({name:"mumu",age:18},3,5);		
		// 执行一个函数add,并把call的第一个参数作为add的this
		
		add.apply({name:"木木"},[3,5]);
		// apply与call都是执行一个函数,冒充this,apply传参方式是数组
		</script>
	</body>
</html>