js 中的构造函数，构造函数作用，构造函数和普通函数的区别

àì夳堔傛蜴生んèń 2022-11-27 08:55 182阅读 0赞

**函数的定义方式：**  
1.声明式函数定义： function 函数名 （）\{\}；这种定义方式，会将函数声明提升到该函数所在作用域的最开头，也是就无论你在这个函数的最小作用域的那儿使用这种方式声明的函数，在这个作用域内，你都可以调用这个函数为你所用。  
2.函数表达式：let fun = function()\{\}; 此方式定义的函数，只能在该作用域中，这段赋值代码执行之后才能通过fun（）调用函数，否则，由于变量声明提升，fun === undefined。  
3.new Function 形式： var fun1 = new Function (arg1 , arg2 ,arg3 ,…, argN , body )；Function构造函数所有的参数都是字符串类型。除了最后一个参数, 其余的参数都作为生成函数的参数即形参。这里可以没有参数。最后一个参数, 表示的是要创建函数的函数体。

**构造函数**  
在 JavaScript 中，用 new 关键字来调用的函数，称为构造函数。构造函数首字母一般大写（规范）。  
之所以有构造函数与普通函数之分，主要从功能上进行区别的，构造函数的主要 功能为 初始化对象，特点是和new 一起使用。new就是在创建对象，从无到有，构造函数就是在为初始化的对象添加属性和方法。

**1、常用的构造函数：**  
　var arr = \[\]; 为 var arr = new Array();  
　var obj = \{\} 为 var obj = new Object();  
　var date = new Date();  
　  
**2、执行构造函数时发生的事 ：**

let p = new Person();
    function Person(name,age,sex){ 
    	this.name = name;
    	this.age = age;
    	this.sex = sex;
    }
    Person.prototype.say = function(){ 
    	console.log('定义了一个Person的新方法say');
    }
    let f = new Person ('青衣浏阳',18,'男');  // f.name = '青衣浏阳';f.age = 18; f.sex = '男'；
    f.say();     //定义了一个Person的新方法say

构造函数会有以下几个执行过程  
(1) 当以 new 关键字调用时，会创建一个新的内存空间，标记为 Animal 的实例。  
(2)函数体内部的 this 指向该内存

var f1 = new Person('ls',20, '女');  // 创建一个新的内存 #f1
    var f2 = new Person('lss',22, '女');  // 创建一个新的内存 #f2

每当创建一个实例的时候，就会创建一个新的内存空间(\#f1, \#f2)，创建 \#f1 的时候，函数体内部的 this 指向 \#f1, 创建 \#f2 的时候，函数体内部的 this 指向 \#f2。

(3) 执行函数体内的代码  
就是给 this 添加属性，就相当于给实例添加属性。  
(4) 默认返回 this  
由于函数体内部的this指向新创建的内存空间，默认返回 this ，就相当于默认返回了该内存空间，也就是上图中的 \#f1。此时，\#f1的内存空间被变量p1所接受。也就是说 p1 这个变量，保存的内存地址就是 \#f1，同时被标记为 Person 的实例。  
以上就是构造函数的整个执行过程。

**3、用new和不用new调用构造函数，有什么区别？**

1、用new调用构造函数，函数内部会发生如下变化：  
创建一个this变量，该变量指向一个空对象。并且该对象继承函数的原型；  
属性和方法被加入到this引用的对象中；  
隐式返回this对象（如果没有显性返回其他对象）  
简单的说 用new调用构造函数，最大特点为，this对象指向构造函数生成的对象

2、如果直接调用函数，那么，this对象指向window，并且，不会默认返回任何对象（除非显性声明返回值）。

**4、构造函数的返回值**  
构造函数执行过程的最后一步是默认返回 this 。言外之意，构造函数的返回值还有其它情况。  
没有手动添加返回值，默认返回 this。手动添加一个基本数据类型的返回值，最终还是返回 this。

function P() { 
     this.name = '青衣浏阳';
    }
    var p1 = new P();
    console.log(p1)  //Person1 {name: "青衣浏阳"}

手动添加一个复杂数据类型(对象)的返回值，最终返回该对象。

function P2() { 
      this.sex = '男';
      return {  sex: '女' };
    }
    var p3 = new P2();
    console.log(p3.sex);  //女

**5、构造函数有什么用？**  
当你需要大批量的写对象的时候，就需要用到构造函数，它可以方便创建多个对象的实例，并且创建的对象可以被标识为特定的类型，可以通过继承扩展代码

举个例子，我们要录入很多同学的个人信息，那么我们可以创建一些对象，比如：

var p1 = {  name: 'zs', age: 6, sex: '男'};
    var p2 = {  name: 'ls', age: 6, sex: '女'};
    var p3 = {  name: 'ww', age: 6, sex: '女'};
    var p4 = {  name: 'zl', age: 6, sex: '男'};

像上面这样，我们可以把每一位同学的信息当做一个对象来处理。但是，我们会发现，我们重复地写了很多无意义的代码。比如 name、age、sex 。如果这个班上有60个学生，我们得重复写60遍。

这个时候，构造函数的优势就体现出来了。我们发现，虽然每位同学都有 name、age、sex这些属性， 但它们都是不同的，那我们就把这些属性当做构造函数的参数传递进去。此时，我们就可以创建以下的函数：

function Person(name,age, sex,) { 
        this.name = name;
        this.age = age;
        this.sex= sex;
    }

当创建上面的函数以后， 我们就可以通过 new 关键字调用，也就是通过构造函数来创建对象了。

var p1 = new Person('zs', 5,'男');
    var p2 = new Person('luci', 5,'女');
    var p3 = new Person('jack', 6,'男');
    var p4 = new Person('lusi', 6,'女');

此时你会发现，创建对象会变得非常方便。所以，虽然封装构造函数的过程会比较麻烦，但一旦封装成功，我们再创建对象就会变得非常轻松，这也是我们为什么要使用构造函数的原因。  
在使用对象字面量创建一系列同一类型的对象时，这些对象可能具有一些相似的特征(属性)和行为(方法)，此时会产生很多重复的代码，而使用构造函数就可以实现代码复用。

**6、 构造函数和普通函数的区别**  
1、构造函数也是一个普通函数，创建方式和普通函数一样，但构造函数习惯上首字母大写。  
2、调用方式不一样。  
普通函数的调用方式：直接调用 person();  
构造函数的调用方式：需要使用new关键字来调用 new Person();  
3、构造函数的函数名与类名相同：Person( ) 这个构造函数，Person 既是函数名，也是这个对象的类名。(ES6 中 class 与构造函数的关 系,通过class定义的类 和通过构造函数定义的类 二者本质相同。并且在js执行时，会将第一种转会为第二种执行。所以 ES6 class的写法实质就是构造函数)  
4、内部用this 来构造属性和方法  
5、构造函数的执行流程  
A、立刻在堆内存中创建一个新的对象  
B、将新建的对象设置为函数中的this  
C、逐个执行函数中的代码  
D、将新建的对象作为返回值  
6、构造函数的返回值默认是this 也有其他情况 。普通函数：因为没有返回值，所以为undefined

写在最后，如有错误欢迎留言指正和补充~