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 相关文章推荐
JS 面向对象之神奇的prototype
Feb 26 Javascript
jquery div拖动效果示例代码
Dec 08 Javascript
jquery选择器排除某个DOM元素的方法(实例演示)
Apr 25 Javascript
一个字符串反转函数可实现字符串倒序
Sep 15 Javascript
一个JavaScript防止表单重复提交的实例
Oct 21 Javascript
js获取当前日期时间及其它操作汇总
Apr 17 Javascript
js清除浏览器缓存的几种方法
Mar 15 Javascript
AngularJS中$http的交互问题
Mar 29 Javascript
JS基于设计模式中的单例模式(Singleton)实现封装对数据增删改查功能
Feb 06 Javascript
完美解决axios在ie下的兼容性问题
Mar 05 Javascript
vue项目国际化vue-i18n的安装使用教程
Mar 14 Javascript
了解JavaScript中let语句
May 30 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
3种平台下安装php4经验点滴
2006/10/09 PHP
IIS+PHP+MySQL+Zend配置 (视频教程)
2006/12/13 PHP
jQuery EasyUI API 中文文档 - DateBox日期框
2011/10/15 PHP
php设置编码格式的方法
2013/03/05 PHP
Yii2隐藏frontend/web和backend/web的方法
2015/12/12 PHP
js 新浪的一个图片播放图片轮换效果代码
2008/07/15 Javascript
在线编辑器中换行与内容自动提取
2009/04/24 Javascript
jQuery插件slicebox实现3D动画图片轮播切换特效
2015/04/12 Javascript
原生Javascript和jQuery做轮播图简单例子
2016/10/11 Javascript
浅谈js script标签中的预解析
2016/12/30 Javascript
angular十大常见问题
2017/03/07 Javascript
聊聊JavaScript如何实现继承及特点
2017/04/07 Javascript
vue 组件 全局注册和局部注册的实现
2018/02/28 Javascript
antd Upload 文件上传的示例代码
2018/12/14 Javascript
node.js基础知识汇总
2020/08/25 Javascript
布同 Python中文问题解决方法(总结了多位前人经验,初学者必看)
2011/03/13 Python
Python使用pygame模块编写俄罗斯方块游戏的代码实例
2015/12/08 Python
python音频处理用到的操作的示例代码
2017/10/27 Python
Python numpy实现数组合并实例(vstack,hstack)
2018/01/09 Python
python 删除字符串中连续多个空格并保留一个的方法
2018/12/22 Python
Python实现微信自动好友验证,自动回复,发送群聊链接方法
2019/02/21 Python
Python制作简易版小工具之计算天数的实现思路
2020/02/13 Python
浅谈Django中的QueryDict元素为数组的坑
2020/03/31 Python
python中rc1什么意思
2020/06/19 Python
python 5个实用的技巧
2020/09/27 Python
PyCharm安装PyQt5及其工具(Qt Designer、PyUIC、PyRcc)的步骤详解
2020/11/02 Python
python爬取代理ip的示例
2020/12/18 Python
numba提升python运行速度的实例方法
2021/01/25 Python
如何写一份好的自荐信
2014/01/02 职场文书
杠杆的科学教学反思
2014/01/10 职场文书
2014年护士个人工作总结
2014/11/11 职场文书
优秀班组事迹材料
2014/12/24 职场文书
生产车间主任岗位职责
2015/04/08 职场文书
2015年度保密工作总结
2015/04/24 职场文书
学习焦裕禄观后感
2015/06/09 职场文书
Java中的继承、多态以及封装
2022/04/11 Java/Android