再学一次「原型和原型链」-五八三

一、构造函数

1. 基本概念

构造函数和普通函数本质上没什么区别，一个函数是否是构造函数，与声明无关，而是由调用时是否使用new来决定。当使用new关键字调用函数时，便被叫做了构造函数。构造函数作用与工厂函数一致，都是用来创建对象的，但是代码更加简洁。构造函数命名通常采用首字母大写的方式，以便与普通函数和变量进行区分。

2. `new`关键字

代码演示

写一个构造函数，并创建两个实例对象。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>构造函数</title>
</head>
<body>
  <script>
    function Person(name,age){
      this.name = name
      this.age = age
    }

     const p1 = new Person('Du', 18)
     const p2 = new Person('Lu', 19)
     console.log(p1,p2);

  </script>
</body>
</html>

`new` 工作原理

将刚刚代码里的p2改一下调用方式，不使用new关键字。

...
 const p1 = new Person('Du', 18)
 const p2 = Person('Lu', 19)
 console.log(p1,p2);
...

可以发现打印出的结果如下，p1会打印一个对象，p2则是undefined

通过上面的代码，可以得到一个结论，使用new关键字调用的函数，帮我们创建了一个对象，并且赋值后return了这个对象。

即new关键字在使用时做的工作：

（1）创建一个空对象
（2）把this指向这个对象
（3）对象的赋值
（4）返回这个对象

3. 在构造函数`new`里`return`

如果在构造函数内部手动return，会有两种情况：

若return 基本数据类型：手动return的内容无效

function Person(name,age){


   this.name = name


   this.age = age


   return 1
}



const p1 = new Person('Du', 18)

console.log(p1);  // Person

若return 引用数据类型：手动return的内容有效

function Person(name,age){


   this.name = name


   this.age = age


   return ['a','b','c']
}



const p1 = new Person('Du', 18)

console.log(p1);  // ['a','b','c']

4. 构造函数的内部方法

给Person内部添加一个吃东西的方法

function Person(name,age){


   this.name = name


   this.age = age


   this.eat = function(){
     console.log('吃东西')
   }
}

const p1 = new Person('Du', 18)
const p2 = new Person('Lu', 20)
console.log(p1,p2); 
// p1.eat和p2.eat是同一个函数吗？
console.log(p1.eat === p2.eat)

每次new的时候，都会执行一次function，就在堆内存里开辟一个新的空间，虽然代码一样，但是地址不同。就会导致每次调用一次构造函数，多出一个函数堆空间，导致内存资源的浪费。

针对这个问题，如果把这些公有方法放在原型对象里共享，则会避免上述问题。

二、原型对象

原型对象是什么？

任何函数在声明的时候，会自动创建一个对象，称之为原型对象。
原型对象相关三个属性：构造函数、原型对象、实例对象三者关系

prototype：属于构造函数，指向原型对象

__proto__ : 属于实例对象，指向原型对象

注意：这个属性不是web标准，很多浏览器不会显示的。这个属性在开发中不能使用，只能用于学习研究。

constructor：属于原型对象，指向构造函数
静态成员：函数的属性
实例成员：实例对象的属性