前端---js（自学笔记13）（使用工厂函数和构造函数、构造函数修改、原型对象、垃圾回收）

╰半夏微凉° 2023-02-23 08:23 3阅读 0赞

# 使用工厂方法创建对象： #

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<script type="text/javascript">
    	     function createPerson(name,sex,age){
    	     	var obj =new Object();
    	     	obj.name=name;
    	        obj.sex=sex;
    	        obj.age=age;
    	        obj.sayName = function(){
    	        	alert(this.name);
    	        }
    	        return obj;
    	     }
    	     var obj1=createPerson("韩宇","男",25);
    	     var obj2=createPerson("任嘉伦","男",29);
    	     var obj3=createPerson("刘亦菲","女",25);
    	     console.log(obj1);
    	     console.log(obj2);
    	     console.log(obj3);
    		</script>
    	</head>
    	<body>
    	</body>
    </html>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FCVV9NT2xJX0lUVUk_size_16_color_FFFFFF_t_70][]

# 构造函数： #

使用工厂函数创建对象，其使用的构造函数为object，所创建的对象都为object类型，导致我们无法区分出多种不同类型的对象。

创建一个构造函数，构造函数就是一个普通的函数，创建方式和普通函数没有区别，不同的是构造函数习惯上首字母大写。

构造函数和普通的函数区别就是调用方式不同，普通函数直接调用，构造函数需要关键字new来调用

**构造函数执行流程： **

1.  立即创建一个新的对象
2.   将新建的对象设置为函数中的this，在构造函数中可以使用this来引用新建的对象
3.  逐行执行函数中的代码
4.  将新建的对象作为返回值返回

使用同一个构造函数创建的对象，我们称为一类对象，也将一个构造函数称为一个类。我们将通过一个构造函数创建对象，称为该类的实例。

**使用instanceof可以检查一个对象是否是一个类的实例，语法：对象  instanceof 构造函数。如果是返回true，如果不是返回false。所有对象都是Object的后代，所以任何对象和object做instanceof检查时，都会返回true。**

** this的情况：**

1.  当以函数的形式调用时，this是window
2.  当以方法的形式调用时，谁调用方法this就是谁
3.  当以构造函数的形式调用时，this就是新创建的那个对象

# 构造函数修改：  #

创建一个Person构造函数，

在person构造函数中，为每一个对象都添加了一个sayName方法，目前我们的方法又是在构造函数内部创建的，也就是说，构造函数每执行一次，就会创建一个新的sayName方法。所有sayName都是唯一的。如果所有需要的方法都是一样的，我们就没必要创建很多这个sayName方法，完全可以共享一个方法。

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<script type="text/javascript">
    	     function Person(name,sex,age){
    	     	this.name=name;
    	        this.sex=sex;
    	        this.age=age;
    	        this.sayName = fun
    	     }
    	     function fun(){
    	        	alert("大家好，我是"+this.name);
    	        };
    	     var per=new Person("韩宇","男",25);
    	     var per1=new Person("任嘉伦","男",29);
    	     var per2=new Person("刘亦菲","女",25);
    	     per.sayName();
    	     per1.sayName();
    		</script>
    	</head>
    	<body>
    	</body>
    </html>

#  原型对象： #

原型prototype:我们所创建的每一个函数，解析器都会向函数中添加一个属性prototype。这个属性对应着一个对象，这个对象就是我们所谓的原型对象。

如果函数作为普通函数调用Prototype没有任何作用。

当函数以构造函数的形式调用时，它所创建的对象中会有一个隐含属性，指向该构造函数的原型对象，我们可以通过\_proto\_来访问该属性

原型对象相当于一个公共区域，所有同一个类的实例都可以访问到这个原型对象，我们可以将对象中公共具有的内容，统一设置到原型对象中。

当我们访问一个对象的方法或属性时，他会现在对象自身中去寻找，如果有就直接使用。如果没有就去原型对象中寻找，有就直接使用。

以后我们创建构造函数时，可以将这些对象共有的属性和方法，统一添加到构造函数的原型对象中，这样就不用分别给每一个对象添加，也不会影响到全局作用域，就可以使每个对象都具有这些属性和方法了。

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<script type="text/javascript">
    	     function Person(name,sex,age){
    	     	this.name=name;
    	        this.sex=sex;
    	        this.age=age;
    	        
    	     }
    	     Person.prototype.sayName=function(){
    	        	alert("大家好，我是"+this.name);
    	        };
    	     var per=new Person("韩宇","男",25);
    	     var per1=new Person("任嘉伦","男",29);
    	     var per2=new Person("刘亦菲","女",25);
    	     per.sayName();
    	     per1.sayName();
    		</script>
    	</head>
    	<body>
    	</body>
    </html>

*   使用in检查对象中是否含有某个属性时，如果对象中没有，但是原型中有，则也返回true。
 *  可以使用对象的hasOwnPropert（），来检查对象自身中是否含有该属性。使用该方法只有当对象自身中含有属性时，才会返回true。
 *  原型对象也是对象，所以他也有原型。当我们使用一个对象的属性和方法时，会在自身找，如果自身有，就直接使用。如果没有则去原型对象中寻找，直到找到object对象的原型。object对象的原型没有原型，如果在object中依然没有找到，则返回undefined。

**toString： **

当我们直接在页面中打印一个对象时，事实上是输出的对象的toString（）方法的返回值，如果我们希望在输出对象时，不输出\[object,Object\],可以为对象添加一个toString（）方法。

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<script type="text/javascript">
    	    function Person(name,age,sex){
    	    	this.name=name;
    	    	this.age=age;
    	    	this.sex=sex;
    	    }
    	    Person.prototype.toString=function(){
    	    	//return"开心很重要！！";
    		return "Person[name="+this.name+",age="+this.age+",sex="+this.sex+"]"
    	    }
    		// 创建一个Person实例
    		var pre =new Person("韩宇",28,"男");
    		var pre1 =new Person("任嘉伦",28,"男");
    //		pre.toString=function(){
    //		//return"开心很重要！！";
    //		return "Person[name="+this.name+",age="+this.age+",sex="+this.sex+"]"
    //		}
    		console.log(pre);
    		console.log(pre.__proto__.__proto__.hasOwnProperty("toString"));
    		console.log(pre1);
    		</script>
    	</head>
    	<body>
    	</body>
    </html>

![20200706174837309.png][]

# 垃圾回收： #

垃圾积攒过多之后，会导致程序运行速度过慢。所以我们需要一个垃圾回收的机制，来处理程序运行过程中产生的垃圾。

当一个对象没有任何的变量或者属性对他进行引用，此时我们将无法操作该对象，此时这种对象就为一个垃圾，这种对象过多会占用大量的内存空间，导致程序运行变慢。所以这种垃圾必须处理。

在JS中拥有自动的垃圾回收机制，会自动将这些垃圾对象从内存中销毁。我们不需要，也不能进行垃圾回收机制。

我们需要做的是将不再使用的对象设置为空。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FCVV9NT2xJX0lUVUk_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200706145056713.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FCVV9NT2xJX0lUVUk=,size_16,color_FFFFFF,t_70
[20200706174837309.png]: https://img-blog.csdnimg.cn/20200706174837309.png