构造函数(自定义):主要的作用就是创造对象,实现可重用的对象创建代码
基本语法
- 相当于普通函数,但是有2个约定:
1. 它们只能由 "new" 操作符来执行(必须)
2. 它们的命名以大写字母开头(只是一种规范,不大写也行)
- 当一个函数被使用 new 操作符执行时,它按照以下步骤:
1. 一个新的空对象被创建并分配给 this。
2. 函数体执行。通常它会修改 this,为其添加新的属性。
3. 返回 this 的值。
function User(name) {
// this = {};(隐式创建)
// 添加属性到 this
this.name = name;
this.isAdmin = false;
// return this;(隐式返回)
}
var user = new User("jack");
console.log(user)
/*
{
"name": "jack",
"isAdmin": false
}
*/
- 不写 new 的时候就是普通函数调用,没有创造对象的能力
function Person(){};
var oa = new Person(); //能得到一个空对象
var oz = Person(); //什么也得不到,这个就是普通函数调用
- 如果没有参数,我们可以省略 new 后的括号(但是规范不建议这样做)
function Person(){};
var oa = new Person(); // 能得到一个空对象
var oz = new Person; // 能得到一个空对象
- 构造函数内部的 this ,由于和 new 连用的关系,是指向当前实例对象的
- 每次 new 的时候,函数内部的 this 都是指向当前这次的实例化对象
function Person(){
console.log(this);
}
var oa = new Person(); // 本次调用的时候,this => oa
var oz = new Person(); // 本次调用的时候,this => oz
- 通常,构造器没有 return 语句,也不建议写 return 语句。
- 它们的任务是将所有必要的东西写入 this,并自动转换为结果。
1. 如果 return 返回的是一个对象,则返回这个对象,而不是 this。
2. 如果 return 返回的是一个原始类型,则忽略。
添加方法
- 我们在使用构造函数的时候,可以通过一些代码和内容向当前的对象中添加一些内容
function Person(){
this.name = 'jack';
this.age = 18;
}
var oa = new Person();
// 我们得到的两个对象里面都有自己的成员 name 和 age
console.log(oa);
/*
{
name: 'jack',
age: 18
}
*/
- 写构造函数的时候,添加一些方法进去
function Person(){
this.name = 'jack';
this.age = 18;
this.sayHi = function(){
console.log('hello world');
}
}
var oa = new Person();
var oz = new Person();
oa.sayHi() // 'hello world'
oz.sayHi() // 'hello world'
- 但是上例有个缺点: 一摸一样的函数出现了两次,占用了两个空间地址
function Person(){
this.name = 'jack';
this.age = 18;
this.sayHi = function(){
console.log('hello world');
}
}
// 第一次 new 的时候,Person这个函数要执行一遍
// 执行一遍就会创造一个新的函数,并且把函数地址赋值给 this.sayHi
var oa = new Person();
// 第二次 new 的时候,Person这个函数要执行一遍
// 执行一遍就会创造一个新的函数,并且把函数地址赋值给 this.sayHi
var oz = new Person();
console.log(oa.sayHi === oz.sayHi) // false
- 分析:
- 上面的例子,我们两个对象内的sayHi 函数就是一个代码一模一样,功能一模一样
- 但是是两个空间函数,占用两个内存空间
- 也就是说 oa.sayHi 是一个地址,oz.sayHi是一个地址
- 所以我们执行 console.log(oa.sayHi === oz.sayHi) 的到的结果是 false
- 怎么解决这个问题呢?把方法添加到构造函数的原型上就行了
function Person(){
this.name = 'jack';
this.age = 18;
// 在prototype上的属性和方法,会被这个函数new的对象所共享
Person.prototype.sayHi = function(){
console.log('hello world');
}
}
var oa = new Person();
var oz = new Person();
console.log(oa.sayHi === oz.sayHi) // true