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

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之构造函数的更多相关文章

  1. 深入理解Javascript中构造函数和原型对象的区别

    在 Javascript中prototype属性的详解 这篇文章中,详细介绍了构造函数的缺点以及原型(prototype),原型链(prototype chain),构造函数(constructor) ...

  2. Javascript中构造函数的返回值问题和new对象的过程

    首先明确一点:javascript中构造函数是不需要有返回值的,这一点跟java很类似.可以认为构造函数和普通函数的最大差别就是:构造函数中没有return语句,普通函数可以有return语句:构造函 ...

  3. 解决JavaScript中构造函数浪费内存的问题!

    解决JavaScript中构造函数浪费内存的问题! 把构造函数中的公共的方法放到构造函数的原型对象上! // 构造函数的问题! function Gouzaohanshu(name, age, gen ...

  4. Javascript正则构造函数与正则表达字面量&&常用正则表达式

    本文不讨论正则表达式入门,即如何使用正则匹配.讨论的是两种创建正则表达式的优劣和一些细节,最后给出一些常用正则匹配表达式. Javascript中的正则表达式也是对象,我们可以使用两种方法创建正则表达 ...

  5. JavaScript使用构造函数获取变量的类型名

    在JavaScript中,如何准确获取变量的类型名是一个经常使用的问题. 但是常常不能获取到变量的精确名称,或者必须使用jQuery 中的方法,这里 我通过 typeof ,jQuery.type 和 ...

  6. Javascript中构造函数与new命令

    典型的面向对象编程语言(比如C++和Java),存在“类”(class)这个概念.所谓“类”就是对象的模板,对象就是“类”的实例.但是,在JavaScript语言的对象体系,不是基于“类”的,而是基于 ...

  7. Javascript中构造函数与new命令2

    典型的面向对象编程语言(比如C++和Java),存在"类"(class)这个概念.所谓"类"就是对象的模板,对象就是"类"的实例.但是,在J ...

  8. Javascript将构造函数扩展为简单工厂

    一般而言,在Javascript中创建对象时需要使用关键字new(按构造函数去调用),但是某些时候,开发者希望无论new关键字有没有被显式使用,构造函数都可以被正常调用,即构造函数同时还具备简单工厂的 ...

  9. javascript笔记—— 构造函数

    出处:http://www.cnblogs.com/RicCC/archive/2008/02/15/JavaScript-Object-Model-Execution-Model.html 数据类型 ...

  10. javascript 封装 构造函数继承 非构造函数继承

    1 封装 把"属性"(property)和"方法"(method),封装成一个对象,甚至要从原型对象生成一个实例对象 1.1 简单封装:var cat1 = { ...

随机推荐

  1. 033 01 Android 零基础入门 01 Java基础语法 03 Java运算符 13 运算符和表达式知识点总结

    033 01 Android 零基础入门 01 Java基础语法 03 Java运算符 13 运算符和表达式知识点总结 本文知识点:运算符和表达式知识点总结 前面学习的几篇文都是运算符和表达式相关的知 ...

  2. Zookeeper基础理论

    Zookeeper是分布式开源协调服务, 主要用来解决分布式集群中应用系统的一致性问题. 本质上是分布式小文件存储系统.   特性 全局数据一致性(集群中每个服务器保存一份相同的数据副本,Client ...

  3. 在自己电脑上查看git远程分支列表比实际云端的远程分支要多一些

    问题 最近打开一个很久没有打开过的项目,使用git branch -a查看了一下所以分支,其中有些远程分支没有什么用了 于是准备去gitlab上删除它,结果到gitlab上发现没有这些分支,猜测是自己 ...

  4. # vue 如何通过前端来导出excel表格

    在做一些简单的demo时,偶尔会遇到导出excel表格.如果请后端帮忙的话 比较浪费时间,那么前端如何导出excel表格,下面就来记录一下之前使用到的案例 一.安装依赖 npm i file-save ...

  5. 每日一题 LeetCode 679. 24点游戏 【递归】【全排列】

    题目链接 https://leetcode-cn.com/problems/24-game/ 题目说明 题解 主要方法:递归 + 全排列 解释说明: 将 4 个数进行组合形成算式,发现除了 (a❈b) ...

  6. 吐血分享一款免费看所有付费影视的app,不好用来石欠我

    前言 朋友经常找我要各种付费影视资源,在下逛遍各大网站,终于找到一款app,那简直是神器啊. 几乎各大主流平台的付费影视都能观看,亲测有效.还在浏览器一个一个搜资源而费劲?? 还在为只买了一个平台的V ...

  7. Angular8 ie兼容性解决

    启用腻子脚本 polyfills.ts /* IE9, IE10 and IE11 requires all of the following polyfills. */ import 'core-j ...

  8. vscode 插件保存记录

  9. 多测师讲解jmeter _图片详解_(全)高级讲师肖sir

  10. 多测师讲解ui自动化框架设计思想_高级讲师肖sir

    UI自动化框架:UI自动化框架可以分为8个模块,conf.data.public.pageobject.testcase.runner.report.log.conf是用来储存系统环境.数据库.邮件的 ...