JavaScript构造函数原理及实现流程解析
在学习构造函数之前我们需要知道我们学习构造函数需要学习什么：
1.什么是构造函数
2.构造函数用来做什么
3.构造函数的执行过程
4.构造函数的返回值
1.所以首先我们需要知道什么是构造函数：
在我看来，构造函数具有两个特点可以判断是否为构造函数：
1.当函数名为首字母大写时，这个是一个可以大概判断构造函数与普通函数的一个特点，但是不是绝对正确，因为普通函数也可以是大写字母开头
2.当我们需要调用构造函数时我们需要new <构造函数>,也就是产生一个实例化对象。
function Student(name,age,sex,height){
this.name=name;
this.age=age;
this.sex=sex;
this.height=height;
}
//调用构造函数，也就是实例化一个对象。
var p=new Student('luke',23,'nan',180)
console.log(p);
控制台输出：
可以看出输出的是一个对象
2.构造函数是用来做什么的：
1.当我们平时创建对象时可能会用如下创建对象的方式来创建，上代码：
//用创建对象方式来创建
var stu1={name:'zs',age:20,sex:"male",height:186};
var stu2={name:'ls',age:21,sex:"male",height:180}
var stu3={name:'ww',age:22,sex:"female",height:156}
var stu4={name:'jx',age:23,sex:"female",height:165}
var stu5={name:'xf',age:24,sex:"male",height:180}
2.当我们用构造函数来创建这个对象时：
//用构造函数来创建对象
function Student(name,age,sex,height){
this.name=name;
this.age=age;
this.sex=sex;
this.height=height;
}
var stu1=new Student('zs',20,"male",186);
var stu2=new Student('ls',21,"male",180);
var stu3=new Student('ww',22,"female",156);
var stu4=new Student('jx',23,"female",165);
var stu5=new Student('xf',24,"male",180);
这样看起来是不是要简洁的多呢，这里因为只有五个人，要是五六十个就会看出明显效果
3.构造函数的执行过程
在前面我们知道了构造函数是什么，和其作用，也通过代码来看出了构造函数的作用。那我现在我们需要知道构造函数的执行过程，因为学习一个东西我们需要学习其原理，而不是其表面
所以接下来我就来讲一讲构造函数的执行过程：
在之前我们都知道，要调用构造函数我们需要在其前面加一个new关键字，所以主要就是new在其作用，在执行new关键字后，很明显，他跟以往的函数调用就不同了，他会依次执行以下步骤：
1.new过后会产生一个空对象，作为一个返回的对象实例
2.将空对象的原型指向了构造函数的prototype属性
3.将空对象的值赋值给构造函数里面的this值
4.开始执行构造函数里的代码
4.构造函数的返回值
知道了其执行过程，显而易见，new关键字创建的实例对象为构造函数的返回值。
其实这是不对的，哈哈。
返回值需要分情况来定：
1.当函数中没有return来返回值的时候，会返回this，也就是实例化对象。就像在说2.构造函数有什么作用时说的一样
2.当函数中return中返回一个复杂类型数据的时候，构造函数会返回这个复杂类型数据，上代码：
function Student(name,age,sex,height){
this.name=name;
this.age=age;
this.sex=sex;
this.height=height;
return {name:'fanhui',weight:60}
}
var Stu1=new Student('zs',20,"male",186);
console.log(Stu1);
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
BootStrap Validator对于隐藏域验证和程序赋值即时验证的问题浅析
这篇文章主要介绍了BootStrap Validator对于隐藏域验证和程序赋值即时验证的问题的解决方法,非常不错，具有参考借鉴价值，需要的朋友可以参考下2016-12-12
这篇文章主要介绍了offsetLeft实现图片滚动效果实例代码，有需要的朋友可以参考一下2013-11-11
这篇文章主要介绍了js封装可使用的构造函数继承用法,实例分析了使用属性拷贝来实现拷贝继承的技巧,需要的朋友可以参考下2015-01-01
网上看到许多关于八皇后算法的文章，很少能看到使用javascript来实现的，今天就给大家使用javascript来解决下这个问题，有需要的小伙伴可以参考下。2015-04-04
学习的目的是对装饰者模式模式有进一步的理解，并运用在自己的项目中；对TypeScript装饰器的理解，更好的使用装饰器，例如在nodejsweb框架中、vue-property-decorator中，或者是自定义装饰器，能熟练运用并掌握其基本的实现原理。2021-04-04
这篇文章主要为大家介绍了js实现数组转树示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-06-06
这篇文章主要为大家详细介绍了JavaScript贪吃蛇的实现代码，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-09-09
这篇文章主要为大家介绍了axios 工具函数使用示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-12-12
图片横向滚动效果，大家可能都已经很熟悉了，本文为大家介绍下使用js实现横向滚动效果，喜欢的朋友可以参考下，希望对大家有所帮助2013-09-09
将HTML自动转为JS代码...2006-07-07
最新评论