# 5.构造函数和原型

# 1 .概述

在典型的OOP语言中(如java)，都存在类的概念，类就是对象的模板，对象就是实例，但是在ES6之前，JS中并没有引入类的概念

ES6，全称ESMAScript 6.0

在ES6之前，对象不是基于类创建的，而是用一种成为构造函数的特殊函数来定义对象和它的特征。

创建对象可以通过以下三种方式：

对象字面量
new Object()
自定义构造函数

// 1. 使用 new Object()
let obj1 = new Object()

// 2. 利用 对象字面量创建对象
let obj2 = {};

// 3.利用构造函数创建对象
function Person(name, age) {
    this.name = name
    this.age = age
    this.drink = function () {
        console.log('喝水')
    }
}
let zhangsan = new Person('张三', 18)
console.log('zhangsan')

# 2.构造函数

构造函数是一种特殊的函数，主要用来初始化对象，即为对象成员变量赋初始值，它总与new一起使用。

我们可以把对象中一些公共的属性和方法抽取出来，然后封装到这个函数里面。

在JS中，使用构造函数时需要注意以下两点：

构造函数用于创建某一类对象，其首字母要大写
构造函数要和new一起使用

new在执行时做的四件事情：

在内存中创建一个新的空对象
让this指向这个新的对象
执行构造函数里面的代码，给这个新对象添加属性和方法
返回这个新对象(所以构造函数里不需要return)

JavaScript 的构造函数中可以添加一些成员，可以在构造函数本身上添加，也可以在构造函数内部的this上添加。

通过这两种方式添加的成员，就分别称为静态成员和实例成员

静态成员：在构造函数上添加的成员称为静态成员，只能由构造函数本身访问
实例成员：在构造函数内部创建的对象成员成为实例成员，只能由实例化的对象来访问(就是通过this添加的成员)

function Person (name, age) {
    this.name = name
    this.age = age
    // 这两个都是实例成员
    // 只能通过实例化的对象来访问
}
Person.sex = '男'
// 这个sex就是静态成员，只能通过构造函数访问

# 3.构造函数的问题

构造函数方法很好用，但是存在浪费内存的问题

以上文的Person() 构造函数为例

实例化的对象中，含有 drink 方法，方法属于复杂数据类型，会额外开辟内存空间用于存储

而当现在实例化了 zhangsan 对象时，开辟了内存空间用于存储 drink 方法

但现在再实例化 luoxiang 对象时，又会再开辟一个内存空间存储 luoxiang对象多的drink方法

两个drink方法完全一致，但是却占了两个内存空间，且

luoxiang.drink === zhangsan.drink	// false

这河里么.jpg

# 4.构造函数原型 prototype

原型是什么？——一个对象，称prototype为原型对象

原型的作用是什么？——共享方法

构造函数通过原型分配的函数是所有对象所共享的

JavaScript规定，每一个构造函数都有一个prototype属性，指向另一个对象。

注意这个prototype 就是一个对象，这个对象的所有属性和方法，都会被构造函数所拥有

console.dir(Person)

可以把不变的方法，直接定义在prototype对象上，这样所有对象的实例就可以共享这些方法

function Person (name, age) {
    this.name = name
    this.age = age
}
Person.prototype.drink = function () {
	console.log('喝水')
}
let zhangsan = new Person('张三', 18)
zhangsan.drink()
let luoxiang = new Person('罗翔', 19)
luoxiang.drink()
console.log(zhangsan.drink === luoxiang.drink)	//true

一般情况下，公共属性定义到构造函数里面，公共方法定义在原型对象上

# 5.对象原型 proto

对象都会有一个属性__proto__ 指向构造函数的prototype原型对象，之所以对象可以使用构造函数prototype原型对象的属性和方法，就是因为对象有__proto__原型的存在

console.log(zhangsan)
console.log(zhangsan.__proto__ === Person.prototype)

方法的查找规则：

先在对象本事查找是否有该方法
如果有，则调用
如果没有，则顺着__proto__到构造函数原型对象prototype上查找

# 6.constructor构造函数

对象原型(__proto__)和构造函数(prototype)原型对象中，都有一个 constructor 属性，constructor，称为构造函数，因为它指回构造函数本身

console.log(Person.prototype)
console.log(zhangsan.__proto__)
console.log(Person.prototype.constructor)
console.log(zhangsan.__proto__ .constructor)
console.log(Person.prototype.constructor === zhangsan.__proto__ .constructor)	// true

constructor 主要用于记录该对象引用于哪个构造函数，它可以让原型对象重新指向原来的构造函数

很多情况下，需要手动利用constructor，重新指挥原来的构造函数

Person.prototype = {
    drink: function () { console.log('喝水') },
    eat: function () { console.log('干饭') }
}
// 实例化省略
console.log(Person.prototype.constructor)
console.log(zhangsan.__proto__ .constructor)
// 指回的不是Person了
// 这是因为通过对象将方法赋值到原型时，使用的是 = ，将原型覆盖了
// 所以需要重新指回 构造函数
Person.prototype = {
    constructor: Person,
    drink: function () { console.log('喝水') },
    eat: function () { console.log('干饭') }
}

# 7.构造函数、实例、原型对象三者之间的关系

Person.prototype --> Person.prototype (原型对象)
Person(构造函数) <-- Person.prototype.constructor

new Person() --> 实例对象
实例对象.__proto__ --> Person.prototype
实例对象.__proto__.constructor --> Person
== Person.prototype.constructor --> Person

# 8.原型链

既然 prototype 是个对象……那……prototype里……会不会有 __proto__属性？

console.log(Person.prototype)

console.log(Person.prototype.__proto__ === Object.prototype)
// true
console.log(Person.prototype.__proto__.constructor === Object)
// true
// 既然Object.prototype也是对象……
console.log(Object.prototype.__proto__)
// null

实例对象 --> 原型对象 --> 原型对象的原型对象 --> ... --> Object.prototype --> null

形成了一个链式结构——原型链

zhangsan.__proto__ === Person.prototype
zhangsan.__proto__.__proto__ === Object.prototype
zhangsan.__proto__.__proto__.__proto__ === null

# 9.JavaScript 的成员查找机制

当访问一个对象的属性(包括方法)时，首先查找这个对象自身有没有该属性
如果没有，则查找其原型(也就是__proto__ 指向的 prototype 原型对象)
如果还是没有，就查找原型对象的原型(Object的原型对象)
以此类推，一直查找到Object为止(因为Object.prototype.__proto__ === null)
__proto__ 对象原型的意义在于为对象成员查找机制提供一个方向

zhangsan.sex = '男'
console.log(zhangsan.sex)
Person.prototype.subject = '犯罪心理学'
console.log(zhangsan.subject)
Object.prototype.crime = '流氓罪'
console.log(zhangsan.crime)
zhangsan.teacher = '罗翔'
Person.prototype.teacher = '李四'
console.log(zhangsan.teacher)
// 就近原则

# 10.原型对象this指向

在构造函数中，this指向的是实例对象
原型对象函数里的this，指向的是实例对象

let that;
Person.prototype.drink = function () {
	console.log('喝水')
	that = this
}
zhangsan.drink()
console.log(that === zhangsan)
// true

# 11.扩展内置对象

可以通过原型对象，对原来的内置对象进行扩展自定义的方法。

比如，给数组添加求和的功能。

console.log(Array.prototype)
Array.prototype.sum = function () {
    let sum = 0;
    this.forEach(num => sum+=num)
    // return this.reduce((sum, n) => sum+n, 0)
    return sum
}
let arr = [2,3,4,5,6,7]
console.log(arr.sum())
let arr2 = new Array(11,22,33)
console.log(arr2.sum())

← 4.ES6中类和对象注意点 6.构造函数与原型继承 →