当前位置：网站首页>Closure, prototype and original link

Closure, prototype and original link

2022-07-28 22:29:00 【Crane sorrow_】

One 、 Closure

1. What is a closure

A closure is a function nested function ; Function is returned as a return value , Function is passed in as an argument .

2. The function of closures

Create local scope
The local variables inside the function can be accessed outside the function
Package components and plug-ins

3. Disadvantages of closures

Free variables in closures are not automatically destroyed , Will reside in memory , Improper use can easily lead to memory leakage

4. Closure test site

Free variables in closures ( Variables used without definition in the scope of change ) It is determined when the function is defined , It is not determined when the function is executed

<script type="text/javascript">	
	var b = 100;
	function fn (){
		b++;
		console.log(b);
	}
	function outer(callback){
		var b = 500;
		callback();
	}
	outer(fn);
	// 01  Free variables in closures , It is determined when the function is defined , It's not the time to implement 
	// 02  Free traversal in closures does not destroy 
</script>

Two 、 Prototype and original link

1. What is the prototype and the original link

Each structure function ( class ) There is a display prototype prototype
Each instance ( object ) They all have an implicit prototype __proto__
The implicit prototype of the object __proto__ Equal to its constructor ( class ) The display prototype of prototype
When looking for the properties or methods of an object , Now find yourself , If you can't find it, follow the prototype of the prototype (__proto__.__proto__ Upward search )
We call the chain relationship of prototype form as prototype chain

2. effect

Realized js Inheritance
You can add common methods and properties to all instances of classes

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<h1> How to create an object </h1>
		<p> Create objects :1  Literal ,2 new One </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(` Hello, my name is ${this.name}, This year, ${this.age} year `)
		}
		
		 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(` Hello, I'm ${this.name}, I'm trying to learn the front end `);
		 }
		
		 var s1 = new Student(" Xiao Ming ",17,"001");
		 var s2 = new Student(" Little high ",22,"004");
		 
		
		</script>
	</body>
</html>

3、 ... and ： Anonymous function self executing

1. Concept ：

Anonymous function self executing , Similar to function nested function , Closures are also formed , You can create local variables （ Functions without names , It may only be called once , Or when passing parameters ）

<!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> Anonymous functions </h1>
	<p> Anonymous function self executing , Similar to function nested function , Closures are also formed , You can create local variables </p>
	<ul>
		<li> list 1</li>
		<li> list 2</li>
		<li> list 3</li>
		<li> list 4</li>
		<li> list 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)
		
	}
	</script>
</body>
</html>

Four ： Function class

adopt new The function executed is called constructor ,（ It is suggested to capitalize ) It can also be called a class
adopt new Generating objects , An instance called a class （ Instance object ）
In the constructor this Point to the corresponding instance

5、 ... and ： Inherit

1.js How to implement inheritance

class Class can be used extends Keyword implementation inheritance
Inheritance through prototype chain

2. Function class inheritance ：

Inheritance constructor
function Student（name,age,no）{
Animal.call(this,name,age)
}
Inherit the prototype
Student.prototype = Object.creat(Animal.prototype)
Fix constructor
Student.prototype.constructor =Stuent;
// Customize Student Extension method
Student.prototype.study = function（）{}