JavaScript构造函数原理及实现流程解析


Posted in Javascript onNovember 19, 2020

在学习构造函数之前我们需要知道我们学习构造函数需要学习什么:

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);

控制台输出:

JavaScript构造函数原理及实现流程解析

可以看出输出的是一个对象

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);

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 函数参数限制说明
Nov 19 Javascript
javascript改变position值实现菜单滚动至顶部后固定
Jan 18 Javascript
js 单击式的下拉菜单效果实例
Aug 13 Javascript
Jquery 获取指定标签的对象及属性的设置与移除
May 29 Javascript
js实现可兼容IE、FF、Chrome、Opera及Safari的音乐播放器
Feb 11 Javascript
浅谈JavaScript事件的属性列表
Mar 01 Javascript
node.js抓取并分析网页内容有无特殊内容的js文件
Nov 17 Javascript
Bootstrap实现的标签页内容切换显示效果示例
May 25 Javascript
简述jQuery Easyui一些用法
Aug 01 jQuery
React Native悬浮按钮组件的示例代码
Apr 05 Javascript
layui加载数据显示loading加载完成loading消失的实例代码
Sep 23 Javascript
js节流防抖应用场景,以及在vue中节流防抖的具体实现操作
Sep 21 Javascript
javascript this指向相关问题及改变方法
Nov 19 #Javascript
JavaScript实现alert弹框效果
Nov 19 #Javascript
Vue 打包的静态文件不能直接运行的原因及解决办法
Nov 19 #Vue.js
如何使用 vue-cli 创建模板项目
Nov 19 #Vue.js
原生js实现自定义消息提示框
Nov 19 #Javascript
原生js实现点击按钮复制内容到剪切板
Nov 19 #Javascript
jQuery-App输入框实现实时搜索
Nov 19 #jQuery
You might like
PHP设计模式之结构模式的深入解析
2013/06/13 PHP
Yii2 rbac权限控制之菜单menu实例教程
2016/04/28 PHP
PHP实现上传图片到 zimg 服务器
2016/10/19 PHP
php mysql获取表字段名称和字段信息的三种方法
2016/11/13 PHP
PHP实现广度优先搜索算法(BFS,Broad First Search)详解
2017/09/16 PHP
PHP设计模式之建造者模式定义与用法简单示例
2018/08/13 PHP
Mootools 1.2教程 设置和获取样式表属性
2009/09/15 Javascript
js 完美图片新闻轮转效果,腾讯大粤网首页图片轮转改造而来
2011/11/21 Javascript
完美兼容各大浏览器获取HTTP_REFERER方法总结
2014/06/24 Javascript
javascript 构造函数方式定义对象
2015/01/02 Javascript
jQuery实现的简单折叠菜单(折叠面板)效果代码
2015/09/16 Javascript
JavaScript笔记之数据属性和存储器属性
2016/03/31 Javascript
js调用webservice构造SOAP进行身份验证
2016/04/27 Javascript
BootStrap的table表头固定tbody滚动的实例代码
2016/08/24 Javascript
node使用UEditor富文本编辑器的方法实例
2017/07/11 Javascript
Vue 实现前进刷新后退不刷新的效果
2019/06/14 Javascript
JS中作用域以及变量范围分析
2020/07/18 Javascript
[01:12:27]EG vs Secret 2018国际邀请赛淘汰赛BO3 第二场 8.22
2018/08/23 DOTA
[40:04]Secret vs Infamous 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.23
2019/09/05 DOTA
python统计日志ip访问数的方法
2015/07/06 Python
解决Pandas to_json()中文乱码,转化为json数组的问题
2018/05/10 Python
python判断一个数是否能被另一个整数整除的实例
2018/12/12 Python
Python面向对象程序设计示例小结
2019/01/30 Python
Python+Tensorflow+CNN实现车牌识别的示例代码
2019/10/11 Python
使用python 的matplotlib 画轨道实例
2020/01/19 Python
python with (as)语句实例详解
2020/02/04 Python
施华洛世奇匈牙利官网:SWAROVSKI匈牙利
2019/07/06 全球购物
应用服务器有那些
2012/01/19 面试题
医学生实习自荐信
2013/10/01 职场文书
职业生涯规划怎么写
2013/12/29 职场文书
技能竞赛活动方案
2014/02/21 职场文书
灰雀教学反思
2014/04/28 职场文书
2014年前台个人工作总结
2014/11/14 职场文书
2014年就业工作总结
2014/11/26 职场文书
八月一日观后感
2015/06/10 职场文书
基层工作经历证明
2015/06/19 职场文书