【JavaScript】面向对象——构造函数（详解）

理解并上手使用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 = name
    this.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来构造属性和方法。