JavaScript：构造函数

一、理解构造函数

构造函数是一个函数
JS中的任何一个普通函数，当用new关键字来调用时，它就是构造函数。
构造函数与函数定义无关，与调用方法有关。
构造函数用new关键字来进行调用的函数称为构造函数，一般首字母大写（表示该函数以后希望被作为构造函数来使用）。
构造函数主要用来在创建对象时初始化对象，即为对象成员变量赋初始值/为初始化的对象添加属性成员或方法成员。
JS中面向对象编程是基于构造函数（constructor）和原型链（prototype）的。
JS语言中使用构造函数（constructor）作为对象的模板，所谓构造函数，就是提供一个生成对象的模板，并描述对象的基本结构的函数。一个构造函数，可以生成多个对象，每个对象都有相同的结构。JS中使用同一个构造函数创建的对象，我们称为一类对象，也将一个构造函数称为一个类(理解为模板，表示某一类实物的共同特征)。我们将通过这个构造函数创建的对象，称为是该类的实例。

二、构造函数的意义

使用对象字面量创建一系列同一类型的对象时，这些对象可能具有一些相似的特征(属性)和行为(方法)，此时会产生很多重复的代码，把这些重复性的特征和属性抽象出来，做成构造函数，可以实现代码复用。

JS中的构造函数的含义和用法_函数值组件中,怎么使用js构造器_瑞雨溪的博客-CSDN博客

三、构造函数作用

构造新对象，设置对象的属性和方法。

创建对象时完成初始化，当我们在new一个对象并传入参数的时候，会自动调用构造函数并完成参数的初始化。

四、构造函数的执行流程

4.1、立刻创建一个新的对象
4.2、将新建的对象设置为函数中this，在构造函数中可以使用this来引用新建的对象
4.3、逐行执行函数中的代码
4.4、将新建的对象作为返回值返回
使用同一个构造函数创建的对象，我们称为一类对象，也将一个构造函数称为一个类。我们将通过一个构造函数创建的对象，称为是该类的实例。

五、构造函数this的情况

5.1、当以函数的形式调用时，this是window
5.2、当以方法的形式调用时，谁调用方法this就是谁
5.3、当以构造函数的形式调用时，this就是新创建的那个对象

六、内置构造函数

ECMAScript提供了多个内置构造函数

Object、Array、String、Boolean、Number、Date…

var obj = new Object()
var arr = new Array()

七、自定义构造函数

首字母大写
通过new创建实例对象
创建构造函数时，里面的属性和方法前必须加this，this就表示当前运行时的对象

function Singer (name, song) {
    this.name = name
    this.sing = function () {
        console.log(`${name} 唱 ${song}`)
    }
}
// new 就是执行构造函数，返回一个对象，不写new就是普通函数的调用，没有创造对象的能力
let singer1 = new Singer("刘德华", "冰雨")
singer1.sing()

八、构造函数的return

8.1、不写return，返回一个对象

8.2、return一个基本数据类型，结果不变，返回一个对象

8.3、return一个复杂数据类型，返回一个复杂数据类型，比如对象、数组

九、构造函数与普通函数的区别

普通函数是小驼峰的名命方式，而构造函数是大驼峰的名命方式（行业规范）。
我们知道普通函数的this指向是指向全局对象的，而构造函数内部的this指向当前对象的实例。
使用的方式不同，普通函数直接调用，构造函数必须使用new 来调用，通过 new.target 来判断调用的方式是不是构造函数。
任何函数只要使用new操作符调用就是构造函数，而不使用new操作符调用的函数就是普通函数

十、new.target

new.target - JavaScript | MDN

用于判断对象的调用方式是否使用构造函数的方式来调用，如果不是构造函数调用，该表达式返回undefined，否则返回正常的构造函数。

function U(){
  if(new.target !== U){
   console.error('请使用new的方式来创建函数')
  }
}

U();
new U();

function Foo() {
  if (!new.target) throw "Foo() must be called with new";
  console.log("Foo instantiated with new");
}

Foo(); // throws "Foo() must be called with new"
new Foo(); // logs "Foo instantiated with new"

十一、实例成员和静态成员

function Singer (name, song) {
    this.name = name
    this.sing = function () {
        console.log(`${name} 唱 ${song}`)
    }
}

let S1 = Singer("刘德华", "冰雨") // 实例化对象

Singer.sex = "male" //在构造函数上添加的成员就成为静态成员

console.log(Singer.sex );//male 静态成员只能通过构造函数进行访问

Singer.prototype.age = 50 // 通过prototype添加的成员不是静态成员，是实例成员，也就是只要是实例化的对象都可以访问到