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

 更新时间:2020-11-19 14:49:37   作者:佚名   我要评论(0)

在学习构造函数之前我们需要知道我们学习构造函数需要学习什么:
1.什么是构造函数
2.构造函数用来做什么
3.构造函数的执行过程
4.构造函数的返回值
1.所以首先我们

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

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

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

您可能感兴趣的文章:
  • JavaScript对象字面量和构造函数原理与用法详解
  • JavaScript如何借用构造函数继承
  • js核心基础之构造函数constructor用法实例分析
  • JavaScript中工厂函数与构造函数示例详解
  • 深入浅析js原型链和vue构造函数
  • JavaScript原型对象、构造函数和实例对象功能与用法详解
  • js构造函数创建对象是否加new问题
  • 详解Javascript 中的 class、构造函数、工厂函数

相关文章

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

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

    在学习构造函数之前我们需要知道我们学习构造函数需要学习什么: 1.什么是构造函数 2.构造函数用来做什么 3.构造函数的执行过程 4.构造函数的返回值 1.所以首先我们
    2020-11-19
  • Docker重命名镜像名称和TAG操作

    Docker重命名镜像名称和TAG操作

    使用docker images时,可能会出现REPOSITORY和TAG均为none的镜像,如下图 这时,我们可以重命名镜像 # docker tag IMAGEID(镜像id) REPOSITORY:TAG(仓库:标签)
    2020-11-19
  • C# 设置防火墙的创建规则

    C# 设置防火墙的创建规则

      对于某些程序,我们只允许它使用某些特定端口、网络类型或者特定IP类型等信息。这时候,需要使用到防火墙里面的“高级设置”,创建某些特定的入站或者出栈规则,
    2020-11-19
  • JS数据类型分类及常用判断方法

    JS数据类型分类及常用判断方法

    数据类型判断的方法 在探索数据类型判断方法的时候我们需要知道JS中有哪些数据类型: 我们可以把JS中数据类型分为两类: 1.基本数据类型:Undefined、Null、B
    2020-11-19
  • c# 字段和方法设计建议

    c# 字段和方法设计建议

    1、不要为抽象类提供公开的构造方法   抽象类可以有构造方法,但是抽象类不能实例化。如果编程人员没有制定构造方法,编译器会自动生成一个默认的protected构造方
    2020-11-19
  • 如何扩展Spring Cache实现支持多级缓存

    如何扩展Spring Cache实现支持多级缓存

    为什么多级缓存 缓存的引入是现在大部分系统所必须考虑的 redis 作为常用中间件,虽然我们一般业务系统(毕竟业务量有限)不会遇到如下图 在随着 data-size 的增大和
    2020-11-19
  • H5 js点击按钮复制文本到粘贴板

    H5 js点击按钮复制文本到粘贴板

    本文实例为大家分享了js点击按钮复制文本到粘贴板的具体代码,供大家参考,具体内容如下 准备:先去下载clipboard.js: 官网 移动端效果如下: 应用:html+js 代码
    2020-11-19
  • Android studio配置国内镜像源的实现

    Android studio配置国内镜像源的实现

    PS:网上看到的AS配置国内镜像源的博客版本有点老了,就想着做个比较新的博客了 推荐的几个国内镜像源地址: 1、东软信息学院(笔者当前在用) mirrors.neusoft.ed
    2020-11-19
  • JavaScript实现alert弹框效果

    JavaScript实现alert弹框效果

    本文实例为大家分享了JavaScript实现alert弹框的具体代码,供大家参考,具体内容如下 因本人水平有限,不足之处还望大家指正。 先上图: 为什么会出现这个需求?
    2020-11-19
  • C/C++宏替换实现详解

    C/C++宏替换实现详解

    基本形式 #define name replacement_text 通常情况下,#define 指令占一行,替换文本是 define 指令行尾部的所有剩余部分,但也可以把一个较长的宏定义分成若
    2020-11-19

最新评论