JS基础-构造函数

文章目录 前言一、构造函数是什么？二、构造函数的特点三、使用构造函数有哪些好处?四、构造函数的返回值五、实例

---

前言

什么是构造函数?
构造函数有何作用?

一、构造函数是什么？

在 JavaScript 中，用 new 关键字来调用的函数，称为构造函数。
例如:new Fn()

二、构造函数的特点

1.构造函数的首字母必须大写，用来区分于普通函数。这是一种语法规范，小写也不会报错。
2.内部使用的this对象，来指向即将要生成的实例对象
3.使用New来生成实例对象
格式：var 变量名=new 构造函数名

三、使用构造函数有哪些好处?

在使用对象字面量创建一系列同一类型的对象时，这些对象可能具有一些相似的特征(属性)和行为(方法)，此时会产生很多重复的代码，而使用构造函数就可以实现代码复用。
举个例：
学校录入某个班级的个人信息时,可以使用创建对象来

var n1 = { Student_No: 2191111, name: 'zhangsan', age: 21, gender: '男'};
var n2 = { Student_No: 2191112, name: 'lisi', age: 22, gender: '男' };
var n3 = { Student_No: 2191113, name: 'wangwu', age: 23, gender: '女' };
...

但是人数多时，要创建的对象就是几十上百个，而代码就很多重复的。
因此这里可以用到构造函数，来实现代码复用

function Class(Student_No,name,age,gender){
  this.Student_No=Student_No;
  this.name=name;
  this.age=age;
  this.gender=gender;
}

var n1=new Class(2191111, 'zhangsan',21,'男')
var n2=new Class(2191112, 'lisi',22,'男')
var n3=new Class(2191113, 'wangwu',23,'女')

可以发现创建对象过程变得简单了，没有那些重复的代码了。

四、构造函数的返回值

首先看构造函数是否手动添加return
如果添加了return 再看return后面是不是引用数据
如果是那么就返回这个return的值
不是就返回这个构造函数运行完毕之后创建的那个对象
没有手动添加return时返回这个构造函数运行完毕之后创建的那个对象

补充： 这里的引用数据也就是对象类型Object type，比如：Object 、Array 、Function 、Data等。

五、实例

例1

function Fn(a) {
						this.a = a;
						this.b = 20;
						//这是一个函数的代码块，可以随便写
						for (var i = 0; i < 10; i++) {
							console.log(i)
						}
						return "hello";
					}
					var n1 = new Fn
					console.log(n1)
					var n2 = new Fn(12)
					console.log(n2)

分析： 这里return后面不是引用数据 所以返回的就是Fn(a)函数运行完毕后的对象，里面的for循环正常运行，var n1 = new Fn 表示不传参里面的a为undefined
运行结果：

例2

function Fn() {
	    this.name="marry"
		var obj = {
			name:"karen",
			Fm: function() {
				this.name="jack"
			}
		}
		return obj;				
	}
	
	var f1=new Fn()
	console.log(f1.name)
	var f2=new ((new Fn()).Fm) ()
	console.log(f2.name)		
	
	var f3=new Fn()
	var f4=new (f3.Fm) ()
	console.log(f3.name,f4.name)

运行结果：

分析：
var f1=new Fn() //Fn()函数return值为obj 所以f1={name:“karen”,Fm:function(){ this.name=“jack” }}
因此console.log(f1.name) 打印 karen
var f2=new ((new Fn()).Fm) () //相当于var f2=new (f1.Fm) () ; Fm()没有手动添加return,所以f2={name:“jack”}
因此console.log(f2.name) //打印jack
var f3=new Fn();var f4=new (f3.Fm) () // 这里f3={name:“karen”,Fm:function(){ this.name=“jack” }},f4={name:“jack”}
注意：这里f3和f4 跟f1和f2原理一样，但他们不是一个对象，只是都是由Fn函数创建来的对象。
因此console.log(f3.name,f4.name) 打印karen,jack