js构造函数
1. 什么是构造函数
在JavaScript中,用new关键字来调用的函数,称为构造函数,构造函数首字母一般大写
2. 使用构造函数的场景
var p1 = { name:'Tom',age:'18',sex:'男'};
var p2 = { name:'Jerry',age:'18',sex:'男'};
var p3 = { name:'Speike',age:'20',sex:'男'};
var p4 = { name:'Tyke',age:'8',sex:'男'};、
var p... = { ...}
示例: 如果我们要录班级同学人员信息,我们创建了每一个同学“对象”,
如果班级人数的情况下,我们需要重复写很多次。
这个时候构造函数的优势就提现出来了,我们发现,录入同学信息中都有,name
,age
,sex
这些属性,但是她们各个有自己的值,那我们就把这些属性,当做构造函数的参数传入,我们可以由此创建出如下函数。
function Person(name, age, sex) {
this.name = name;
this.age= age;
this.sex= sex;
}
如上函数,我们可以通过new关键字,也就是通过构造函数来创建对象了。
var p1 = new Person('Tom', '18', '男');
var p2 = new Person('Jerry', '18', '男');
此时,我们发现,创建对象,会很方便,在此场景下,产生很多重复代码,而使用构造函数就可以实现代码的复用。
3. 构造函数执行过程
function Animal(color) {
this.color = color;
}
此时的Animal
函数还不算一个构造函数,当它有一个new关键字来调用时,我们才能说它是一个构造函数。如下面这样
var dog = new Animal("black");
执行过程:
function Person(name, age, sex) {
this.name = name;
this.age= age;
this.sex= sex;
}
var p1 = Person('Tom','男','18');
此时,Person构造函数会有一下几个执行过程。
- 当以new关键字调用,会创建出一个新的工作空间,标记为Person的实例
- 将空对象的原型绑定为new操作符后面的构造函数的原型
- 函数体内部的 this 指向该内存,并执行构造函数的函数体,创建相关属性和方法
- 判断执行结果是否返回了新的对象,如果有返回新对象,就是用返回的新对象,没有的话,返回原来创建的对象(obj)
我们可以得出如下结论。
var p1 = Person('Tom','男','18');
每当创建一个实例的时候,就会创建一个新的内存空间(p1
),创建 p1
的时候,函数体内部的 this
指向 p1
执行函数体内的代码
这里我们可以发现,给 this 添加属性,就相当于给实例添加属性。
默认返回 this
由于函数体内部的this指向新创建的内存空间,默认返回 this
,就相当于默认返回了该内存空间,也就是上图中的 p1
。此时,p1
的内存空间被变量p1
所接受。也就是说 p1
这个变量,保存的内存地址就是 p1
,同时被标记为 Person
的实例。
如果没有手动添加返回值,默认返回this
function Person() {
this.name = 'Tom';
}
var p1 = new Person();