【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操作符调用了，那么它会执行如下操作：

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

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来构造属性和方法。