构造函数及其应用

构造函数

构造函数,顾名思义构造某个事物的函数,该事物就是对象。构造函数是用来构造对象的函数。
JavaScript 中没有单独的构造函数,只是人为的把这种使用new关键字调用的函数称作构造函数,我们也可以认为凡是使用 new 关键字调用的函数都是构造函数
用法如下

new 构造函数名(参数);

构造函数为什么能创建对象

构造函数创建对象源于其调用方法,调用构造函数时需要在函数名前加上 new 关键字,我们虽然并没有创建对象但该关键字帮助我们创建一个对象
当使用new关键字时,会在函数内部隐式声明一个对象,通过这个对象的属性值是通过构造函数的参数传进来的值,我们只需要将参数的值赋值给对象的属性
在给隐式对象赋值时,需要通过 this 关键字,我们暂且可以将 this 看作是这个对象,使用对象的赋值方式赋值就可以
函数会自动返回该对象,所以构造函数能够创建对象
示例如下

function People(name,age,gender){
    //var this = {}; 我们暂且可以理解为函数会隐式创建对象并赋值给this
    this.name = name;// 对象赋值
    this.age = age;
    this.gendere = gender;
    // return this;此时会返回对象
}

构造函数有什么用

构造函数主要是用来创建对象的
用字面量也可以创建对象,为什么要用构造函数呢

构造函数创建对象的方便之处

  1. 创建具有不同属性的对象时,从效果方面看,字面量创建对象与构造函数创建对象并没有明显差别
    用字面量创建对象时,需要对每个对象赋不同的值
var obj = {
    name:'Lee',
    age:'20'
};
var women = {
    gender:'women',
    address:'XXX'
};

用构造函数创建具有不同属性的对象时,也是多次创建,多次赋值。
需要先创建构造函数,在构造函数中将需要的属性值通过参数接收,然后通过new 调用创建对象

function Women(gender,address){
    this.gender = gender;
    this.address = address;
}
var women = new Women('weomen','XXX');

function Obj(name,age){
    this.name = name;
    this.age = age;
}
var obj = new Obj('Lee','20');
  1. 当要创建同一类对象时,构造函数的作用就比较明显
    使用字面量创建时,我们需要每创建一个对象就要给其赋值,如果具有相同属性时,需要给同一个属性多次赋值很麻烦,一旦有所变动就要重新更改多次
var lee = {
    name:'Lee',
    age:'20',
    gender:'men',
    address:'XXX'
};
var john = {
    name :'John',
    age:'21',
    gender:'women',
    address:'XXX'
};
john.country = 'China';
lee.country = 'China';

如果一旦有新添加的属性,我们需要改变多次,现在我只是创建了两个对象,如果有多个对象工作量很大,且会出现重复的代码
如果用构造函数就可以实现一次声明,多次使用的效果,减少重复的代码

// 创建叫做 People 的构造函数
function People(name,age,gender,address,country){
    this.name= name;
    this.age = age;
    this.gender = gender;
    this.address = address;
    this.country = country;
}
//此时创建两个对象,相比之前创建的对象简洁了不少,也规避了重复代码的出现,构造函数也可以多次使用
var lee = new People('Lee',20,'women','XXX','China');
var john = new People('john',21,'men','XXX','China');

这就是构造函数的作用之一,也是使用构造函数创建对象的原因

怎么使用构造函数创建对象

  1. 声明构造函数
    声明构造函数和声明普通函数的步骤一样,使用function 关键字声明即可,如果需要参数可以传入参数
    可以在函数内部接收参数作为对象的属性值
function People(name,age){
    this.age = age;
    this.name = name;
}
  1. 使用 new 关键字调用构造函数,声明一个变量接收构造函数返回的对象,对象创建完成
var john = new People('john',21);

构造函数与普通函数的区别

构造函数是指人为的将某个函数区别于其他函数,该函数只用来创建对象
普通函数是指实现某一个功能

相同点

  1. 构造函数在性质上与普通函数一样都是函数
    他们的声明方式,传参方式都一样,都能返回一个值
    既然构造函数与其他函数都是函数那么能否想其他函数一样作为数据或参数使用呢
    当然可以
  2. 作为数据赋值给变量
    示例如下
function People(name,age){
    this.age = age;
    this.name = name;
}
var people = People;
// 调用时与调用构造函数一样
var john = new peole('john','21');
console.log(john.name);
console.log(john.age);

此时能够正常输出
在这里插入图片描述

  1. 作为参数传递给函数
    示例如下
// 我们创建一个构造函数
function BlackPeople(color,area,people){
    // 构造函数传递给函数后仍然可以使用 new 关键字进行调用
    //构造函数 中的参数仍然可以传入
    this.people = new people('black',23);//可以用参数接收构造函数返回的对象
    this.color = color;
    this.area = area;
}

// 我们把 People 作为参数传入
var black = new BlackPeople('black','Africa',People);
console.log(black.people.name);//我们可以访问构造函数返回的对象中的属性

此时能够正常输出
在这里插入图片描述

  1. 与普通函数一样我们可以把构造函数作为返回值 return 出去
    示例如下

 function BlackPeople(color,area,people){
    this.color = color;
    this.area = area;
    return people;
}
var black = new BlackPeople('black','Africa',People);// 此时 black 接收的就不再是 BlackPeople 构造函数隐式创建的对象,而是 return 出去的参数 people 接收的对应的对象
var blackPeople = new black('black',23);//我们可以使用new调用函数将People构造函数返回的对象用变量blackPeople接收
console.log(black.color)//此时是 undefined
console.log(blackPeople.name);// 此时是 black

此时输出为
在这里插入图片描述

由此可以看出构造函数其本质仍是函数

不同点

  1. 调用方式
    构造函数与普通函数的不同在于,构造函数在调用时需要加上 new 关键字,只有加上new关键字在不人为的在函数中返回一个对象的情况下,才能创建并返回一个对象
    普通函数调用则不需要 new 关键字,即可调用
  2. 返回值
    构造函数的返回值在一般情况下是一个对象,但是如果手动 return 一个值的时候,如果这个值是原始类型的数据,会被忽略不会被返回,如果是引用类型的数据则会被返回
    普通函数的返回值可以返回任一类型的值
  3. 命名方式
    命名方式的不同,构造函数的命名一般采用 大驼峰命名法

大驼峰命名法是指从第一个单词开始每个单词的首字母都大写
普通函数的命名一般采用 小驼峰命名法
小驼峰命名法是指第一个单词的首字母不大写,后面的每个单词的首字母都大写
示例如下

// 小驼峰命名法
myName
// 大驼峰命名法
People

构造函数js中的通常用法

构造函数在js中通常用来创建具有相同属性的对象,即同类对象。
构造函数的作用类似于 类 在 Java 中的作用,我们在js中也可以称构造函数是一个类,这也是js能够面向对象的原因和基础。
我们从其调用方式上也可以看出这一特点。
之前我们创建一个 People 的构造函数然后用 new 创建一个对象,此种用法与 Java 中 创建一个 class 然后用 new 创建一个实例是相似的。
所以我们可以认为构造函数是js实现面向对象语言(例如:Java)中的一些功能(面向对象、继承、多态等)的基础。

总结

  1. 构造函数本质上还是函数,除了在调用时需要使用 new 之外,其使用方法与其他函数大致相同。
  2. 在 js 中任何函数都可以使用 new 关键字调用,构造函数只是人为的区分。
  3. 构造函数的命名规则使用 大驼峰 命名法。
  • 1
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

前端御书房

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值