这篇文章主要介绍“JavaScript中的构造函数怎么使用”，在日常操作中，相信很多人在JavaScript中的构造函数怎么使用问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”JavaScript中的构造函数怎么使用”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！
一个普通的函数被用于创建一个类对象时，它就被称作构造函数，或者构造器。（为方便理解，你可以将JavaScript中构造器的创建理解为其他语言中的类的创建，目的就是利用它通过new来实列一个对象）
function Person(){
//...
}
//当做普通函数调用
var obj=Person();
//构造函数调用
var obj=new Person();构造函数的特点：
在书写规范上，我们习惯将构造函数名称的首字母大写。
通过new来创建一个对象。
无需在内写入return也会有返回值，而且返回的是一个对象。
利用构造函数创建一个js对象
构造函数创建对象(方法写在构造函数里，缺点:构造函数每执行一次， 就会创建一次方法。)
function Person(name,age,gender){
this.name=name;
this.age=age;
this.gender=gender;
// 方法写在里面
this.sayName=function(){
console.log(this.name);
}
}
function Dog(name,age){
this.name=name;
this.age=age;
}
var obj=new Person("张三",18,"男");
var obj1=new Person("李四",16,"男");
var dog=new Dog("乐乐",2);
obj.sayName();
obj1.sayName();
console.log(obj);
console.log(obj1);
console.log(dog);构造函数创建对象(方法写在构造函数外，缺点: 方法为全局方法，污染全局。)
function Person(name,age,gender){
this.name=name;
this.age=age;
this.gender=gender;
this.sayName=fun; //方法写在外面
}
function fun(){
console.log(this.name);
}
function Dog(name,age){
this.name=name;
this.age=age;
}
var obj=new Person("张三",18,"男");
var obj1=new Person("李四",16,"男");
var dog=new Dog("乐乐",2);
obj.sayName();
obj1.sayName();
console.log(obj);
console.log(obj1);
console.log(dog);构造函数创建对象改造(方法通过原型对象创建)
原型对象:prototype
我们所创建的每一个函数，解析器都会向函数中添加一个prototype属性。
指向构造函数的原型对象，我们可以通过__proto__来访问该属性。
构造函数.prototype.xxx ， xxx可以是变量，可以是方法。执行过程中会先去对象中找方法或者变量， 找不到就会去原型里寻找。
function Person(name,age,gender){
this.name=name;
this.age=age;
this.gender=gender;
}
function Dog(name,age){
this.name=name;
this.age=age;
}
/*为person添加统一的方法， 到原型对象中*/
Person.prototype.sayName=function(){
console.log(this.name);
}
var obj=new Person("张三",18,"男");
var obj1=new Person("李四",16,"男");
var dog=new Dog("乐乐",2);
obj.sayName();
obj1.sayName();
console.log(obj);
console.log(obj1);
console.log(dog);运行结果：
学习每一个概念，不仅要知道它是什么，还要知道为什么，以及解决什么样的问题。
举个例子，我们要录入一年级一班中每一位同学的个人信息，那么我们可以创建一些对象，比如：
var p1 = { name: 'zs', age: 6, gender: '男', hobby: 'basketball' };
var p2 = { name: 'ls', age: 6, gender: '女', hobby: 'dancing' };
var p3 = { name: 'ww', age: 6, gender: '女', hobby: 'singing' };
var p4 = { name: 'zl', age: 6, gender: '男', hobby: 'football' };
// ...像上面这样，我们可以把每一位同学的信息当做一个对象来处理。但是，我们会发现，我们重复地写了很多无意义的代码。比如 name、age、gender、hobby 。如果这个班上有60个学生，我们得重复写60遍。
这个时候，构造函数的优势就体现出来了。我们发现，虽然每位同学都有 name、gender、hobby这些属性， 但它们都是不同的，那我们就把这些属性当做构造函数的参数传递进去。而由于都是一年级的学生，age 基本都是6岁，所以我们就可以写死，遇到特殊情况再单独做处理即可。此时，我们就可以创建以下的函数：
function Person(name, gender, hobby) {
this.name = name;
this.gender = gender;
this.hobby = hobby;
this.age = 6;
}当创建上面的函数以后， 我们就可以通过 new 关键字调用，也就是通过构造函数来创建对象了。
var p1 = new Person('zs', '男', 'basketball');
var p2 = new Person('ls', '女', 'dancing');
var p3 = new Person('ww', '女', 'singing');
var p4 = new Person('zl', '男', 'football');
// ...此时你会发现，创建对象会变得非常方便。所以，虽然封装构造函数的过程会比较麻烦，但一旦封装成功，我们再创建对象就会变得非常轻松，这也是我们为什么要使用构造函数的原因。
在使用对象字面量创建一系列同一类型的对象时，这些对象可能具有一些相似的特征(属性)和行为(方法)，此时会产生很多重复的代码，而使用构造函数就可以实现代码复用。
先说一点基本概念。
function Animal(color) {
this.color = color;
}当一个函数创建好以后，我们并不知道它是不是构造函数，即使像上面的例子一样，函数名为大写，我们也不能确定。只有当一个函数以 new 关键字来调用的时候，我们才能说它是一个构造函数。就像下面这样：
var dog = new Animal("black");以下我们只讨论构造函数的执行过程，也就是以 new 关键字来调用的情况。
我们还是以上面的 Person 为例。
function Person(name, gender, hobby) {
this.name = name;
this.gender = gender;
this.hobby = hobby;
this.age = 6;
}
var p1 = new Person('zs', '男', 'basketball');此时，构造函数会有以下几个执行过程：
1）当以 new 关键字调用时，会创建一个新的内存空间，标记为 Animal 的实例。
2）函数体内部的 this 指向该内存
通过以上两步，我们就可以得出这样的结论。
var p2 = new Person('ls', '女', 'dancing'); // 创建一个新的内存 #f2
var p3 = new Person('ww', '女', 'singing'); // 创建一个新的内存 #f3每当创建一个实例的时候，就会创建一个新的内存空间(#f2, #f3)，创建 #f2 的时候，函数体内部的 this 指向 #f2, 创建 #f3 的时候，函数体内部的 this 指向 #f3。
3） 执行函数体内的代码
通过上面的讲解，你就可以知道，给 this 添加属性，就相当于给实例添加属性。
4）默认返回 this
由于函数体内部的this指向新创建的内存空间，默认返回 this ，就相当于默认返回了该内存空间，也就是上图中的 #f1。此时，#f1的内存空间被变量p1所接受。也就是说 p1 这个变量，保存的内存地址就是 #f1，同时被标记为 Person 的实例。
以上就是构造函数的整个执行过程。
构造函数执行过程的最后一步是默认返回 this 。言外之意，构造函数的返回值还有其它情况。下面我们就来聊聊关于构造函数返回值的问题。
1）没有手动添加返回值，默认返回 this
function Person1() {
this.name = 'zhangsan';
}
var p1 = new Person1();按照上面讲的，我们复习一遍。首先，当用 new 关键字调用时，产生一个新的内存空间 #f11，并标记为 Person1 的实例；接着，函数体内部的 this 指向该内存空间 #f11；执行函数体内部的代码；由于函数体内部的this 指向该内存空间，而该内存空间又被变量 p1 所接收，所以 p1 中就会有一个 name 属性，属性值为 ‘zhangsan’。
p1: {
name: 'zhangsan'
}2）手动添加一个基本数据类型的返回值，最终还是返回 this
function Person2() {
this.age = 28;
return 50;
}
var p2 = new Person2();
console.log(p2.age); // 28
p2: {
age: 28
}如果上面是一个普通函数的调用，那么返回值就是 50。
3）手动添加一个复杂数据类型(对象)的返回值，最终返回该对象
直接上例子
function Person3() {
this.height = '180';
return ['a', 'b', 'c'];
}
var p3 = new Person3();
console.log(p3.height); // undefined
console.log(p3.length); // 3
console.log(p3[0]); // 'a'再来一个例子
function Person4() {
this.gender = '男';
return { gender: '中性' };
}
var p4 = new Person4();
console.log(p4.gender); // '中性'大小写都可以
如果不会出错，那么，用new和不用new调用构造函数，有什么区别？
1）使用new操作符调用函数
例子：
function Person(name){
this.name = name;
this.say = function(){
return "I am " + this.name;
}
}
var person1 = new Person('nicole');
person1.say(); // "I am nicole"用new调用构造函数，函数内部会发生如下变化：
创建一个this变量，该变量指向一个空对象。并且该对象继承函数的原型；
属性和方法被加入到this引用的对象中；
隐式返回this对象（如果没有显性返回其他对象）
用伪程序来展示上述变化：
function Person(name){
// 创建this变量，指向空对象
var this = {};
// 属性和方法被加入到this引用的对象中
this.name = name;
this.say = function(){
return "I am " + this.name;
}
// 返回this对象
return this;
}可以看出，用new调用构造函数，最大特点为，this对象指向构造函数生成的对象，所以，person1.say()会返回字符串： “I am nicole”。
小贴士：如果指定了返回对象，那么，this对象可能被丢失。
function Person(name){
this.name = name;
this.say = function(){
return "I am " + this.name;
}
var that = {};
that.name = "It is that!";
return that;
}
var person1 = new Person('nicole');
person1.name; // "It is that!"2）直接调用函数
如果直接调用函数，那么，this对象指向window，并且，不会默认返回任何对象（除非显性声明返回值）。
还是拿Person函数为例，直接调用Person函数：
var person1 = Person('nicole');
person1; // undefined
window.name; // nicole可见，直接调用构造函数的结果，并不是我们想要的。
3）小结
为了防止因为忘记使用new关键字而调用构造函数，可以加一些判断条件强行调用new关键字，代码如下：
function Person(name){
if (!(this instanceof Person)) {
return new Person(name);
}
this.name = name;
this.say = function(){
return "I am " + this.name;
}
}
var person1 = Person('nicole');
console.log(person1.say()); // I am nicole
var person2 = new Person('lisa');
console.log(person2.say()); // I am lisa到此，关于“JavaScript中的构造函数怎么使用”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注亿速云网站，小编会继续努力为大家带来更多实用的文章！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
