文章目录

理解并上手使用JavaScript中的构造函数1、我们先理解什么是构造函数？2、JavaScript中的构造函数是怎么样的？3、使用new操作符会发生什么？4、构造函数的属性5、构造函数与函数的区别

理解并上手使用JavaScript中的构造函数

1、我们先理解什么是构造函数？

构造函数也称之为构造器，通常是我们在创建对象时会调用的函数；在其他面向对象的编程语言里面，构造函数是是存在于类中的一个方法，称之为构造函数；但是在JavaScript中的构造函数有点不太一样；

2、JavaScript中的构造函数是怎么样的？

构造函数也是一个普通的函数，从表现形式来说，和千千万万个普通的函数没有任何区别；那么如果这么一个普通的函数被使用new操作符来调用了，那么这个函数就称之为构造函数；

如下示例代码所示：

function Foo (num) {console.log('foo~' + num)}// 普通方式调用Foo() // foo~// 通过new关键字调用foo函数，此时这个函数就是构造函数var f1 = new Foo(20) // foo~console.log(f1) // foo {}

上面的打印结果：foo是该函数的类型，{}是返回的空对象

3、使用new操作符会发生什么？

如果一个函数被使用new操作符调用了，那么它会执行如下操作：

在内存中创建一个新的对象（空对象）；这个对象内部的[[prototype]]属性会被赋值为该构造函数的prototype属性；构造函数内部的this，会指向创建出来的新对象；执行函数的内部代码（函数体代码）；如果构造函数没有返回非空对象，则返回创建出来的新对象。

function Person(){}var p1 = new Person()var p2 = new Person()console.log(p1) // Person {}

4、构造函数的属性

构造函数的属性实际上就是对象的变量。一个对象可以包含多个属性，定义构造函数的属性时使用this关键字。

示例代码如下：

// 构造函数的属性function Person (name) {this.name = namethis.sayMe = function () {console.log('我的名字叫' + this.name)}}// 利用构造函数创建对象var spiderMan = new Person('彼得·本杰明·帕克')console.log(spiderMan) // Person { name: '彼得·本杰明·帕克', sayMe: [Function] }spiderMan.sayMe() // 我的名字叫彼得·本杰明·帕克

5、构造函数与函数的区别

构造函数也是普通函数，创建方式和普通函数一样，但构造函数习惯上首字母大写。构造函数和普通函数的区别在于：调用方式不一样。作用也不一样（构造函数用来新建实例对象）。调用方式不一样。

a. 普通函数的调用方式：直接调用 person();

b.构造函数的调用方式：需要使用new关键字来调用 new Person()**;构造函数的名称与类名相同：Person（）这个构造函数，Person既是函数名，也是这个对象的类名。构造函数的内部用this来构造属性和方法。