原型，原型链，闭包，匿名函数，函数类，继承，this冒充

码农阿茹

于 2022-06-06 19:44:00 发布

阅读量139

点赞数

文章标签：原型模式

本文链接：https://blog.csdn.net/m0_69674158/article/details/125152502

版权

六：this冒充（含this指向问题）

一：原型与原型链

1.什么是原型

每个构造函数（类）都有个显示原型prototype，每个实例（对象）都有一个隐式原型--proto--

对象的隐式原型—proto—等于其构造函数（类）的显示原型prototype ，当查找对象的属性或方法时，先在自身上查找，找不到沿着—proto—向上逐级查找。

2.什么是原型链

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

3.原型链的作用

①实现了js的继承

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

<!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);
		

		function Animal(name,age){
			this.name = name;
			this.age = age;
		}
		Animal.prototype.say = function(){
			alert(`大家好我的名字是${this.name},今年${this.age}岁`)
		}
		
		 function Student(name,age,no){
			 Animal.call(this,name,age);
		 }
		 Student.prototype = Object.create(Animal.prototype);
		 Student.prototype.constructor = Student;

		 Student.prototype.study = function(){
			 alert(`大家好我是${this.name},我正在努力学习前端`);
		 }
		
		 var s1 = new Student("小明",17,"001");
		 var s2 = new Student("小高",22,"004");
		 
		
		</script>
	</body>
</html>

二：闭包

1.什么是闭包

闭包就是函数嵌套函数；函数作为返回值被返回，函数作为参数被传入。

2.闭包的作用

01创建局部作用域；

02在函数外部可以访问函数内部的局部变量；

03封装组件与插件

3.闭包的缺点

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

4.闭包的考点

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

<script type="text/javascript">	
	var b = 100;
	function fn (){
		b++;
		console.log(b);
	}
	function outer(callback){
		var b = 500;
		callback();
	}
	outer(fn);
	// 01 闭包中的自由变量,是在函数定义时候确定的,不是执行的时候
	// 02 闭包中的自由遍历不会销毁
</script>

三：匿名函数自执行

1.概念：

匿名函数自执行,类似函数嵌套函数,也形成了闭包,可以创建局部变量（没有名字的函数，可能只会调用一次，或者传递参数的时候用）

2.直接调用（加括号）

（function（）{}）（）

<!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>
	<ul>
		<li>列表1</li>
		<li>列表2</li>
		<li>列表3</li>
		<li>列表4</li>
		<li>列表5</li>
	</ul>
	 
	<script type="text/javascript">
	var lis = document.querySelectorAll("ul li");
	for(var i=0;i<lis.length;i++){
		(function(j){
			lis[j].onclick = function(){
				alert(j);
			}
		})(i)
		
	}
	// (function(){
	// 		var i =10;
	// 		 console.log("匿名函数被执行了1")
	// })();
	// alert(i);
	/* !function(){
		 console.log("被执行2");
	 }() */
	</script>
</body>
</html>

四：函数类

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

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

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

五：继承

1.js如何实现继承

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

②通过原型链实现继承

函数类继承：

继承构造函数
function Student（name，age，no）{
Animal.call(this,name,age)
}
继承原型
Student.prototype = Object.creat(Animal.prototype)
修正构造函数
Student.prototype.constructor =Stuent;

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