JavaScript 原型对象、原型链、成员查找机制

原型对象

深层理解构造函数

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

构造函数是一种特殊的函数，主要用来初始化对象，即为对象成员变量赋初始值，它总与 new 一起使用。我们可以把对象中一些公共的属性和方法抽取出来，然后封装到这个函数里面。

new的执行过程：

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

构造函数方法很好用，但是存在浪费内存的问题。如果所有对象都使用同一个函数，这样会节省内存，应该怎么做？

构造函数的原型对象

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

JavaScript规定，每个构造函数都有一个原型对象存在，这个原型对象通过构造函数的prototype属性来访问，属性指向了构造函数的原型对象

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

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

//构造函数的原型对象
function Person() {} // 定义函数
console.log(Person.prototype) // 输出结果：{constructor: ƒ}
console.log(typeof Person.prototype) // 输出结果：object

案例：利用原型对象共享方法

//利用原型对象共享方法
function Person(name){
    this.name=name
    // this.sayHello=function(){
    //     console.log("你好，我叫"+this.name)
    // }
}
//使用对象原型加入一个方法，和上述注释代码功能相同
Person.prototype.sayHello=function(){
    console.log("你好，我叫"+this.name)
}

var p1=new Person('张三')
var p2=new Person('李四')

p1.sayHello()
p2.sayHello()
//方法相同，即可共享
console.log(p1.sayHello===p2.sayHello)//打印结果为：true   

原型对象this指向：

• 构造函数中的this 指向实例对象.
• 原型对象里面放的是方法, 这个方法里面的this 指向的是这个方法的调用者, 也就是这个实例对象

理解：

1. 原型是什么 ？
   一个对象，我们也称为 prototype 为原型对象
2. 原型的作用是什么 ？
   共享方法

对象的原型对象

每个对象都有一个 __ proto__ 属性，这个属性指向了构造函数的原型对象protptype

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

注意：

• __proto__对象原型和原型对象 prototype 是等价的
• __proto__对象原型的意义就在于为对象的查找机制提供一个方向，或者说一条路线，但是它是一个非标准属性，因此实际开发中，不可以使用这个属性，它只是内部指向原型对象prototype

function Person() {}
var p1 = new Person()
console.log(p1.__proto__ === Person.prototype); // 输出结果：true
//对象是由构造函数创建出的，本质是一样的

实例对象和原型对象的关系：

访问对象的构造函数

每个原型对象中有一个constructor属性**，该属性指向构造函数本身

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

//访问对象的构造函数
function Person(){}
//通过原型对象的constructor属性来访问对象的构造函数 
console.log(Person.prototype.constructor===Person) //结果为：true
//函数名代表函数的入口地址,原型对象的constructor属性也代表着对象构造函数的地址

//通过实例对象的constructor属性来访问对象的构造函数
var p1=new Person()
console.log(p1.constructor===Person) //结果为：true

一般情况下，对象的方法都在构造函数的原型对象中设置。如果有多个对象的方法，可以给原型对象采取对象形式赋值，但是会覆盖构造函数原型对象原来的内容，修改后的原对象 constructor 就不再指向当前构造函数

此时，可以在修改后的原型对象中，添加一个 constructor 指向原来的构造函数

案例：用赋值方式修改原型对象为新的对象，就无法访问构造器函数

//用赋值方式修改原型对象为新的对象，就无法访问构造器函数
function Person() { }
//修改原型对象为一个新的对象
Person.prototype = {
	//constructor:Person //重新指回原来构造函数
    sayHello: function () {
        console.log("hello")
    }
}
var p1 = new Person()
//使用实例对象p1访问新的原型对象中属性
p1.sayHello() //输出结果：hello
//使用constructor属性无法访问原来的构造函数
console.log(p1.constructor) //输出结果：ƒ Object() { [native code] } 
//因此 ，需要 construtor：Person指回原来构造函数

构造函数、实例对象、原型对象的之间的关系：

原型对象的原型对象

function Person() {}
// 查看原型对象的原型对象 
console.log(Person.prototype.__proto__)
// 查看原型对象的原型对象的构造函数
console.log(Person.prototype.__proto__.constructor)

案例：Person.prototype.__proto__这个对象其实就是Object.prototype对象

function Person() {}
console.log(Person.prototype.__proto__ === Object.prototype) // true
var obj = {}
console.log(obj.__proto__ === Object.prototype) // true
console.log(Object.prototype.__proto__); // 输出结果：null

原型链

所有类都是直接或者间接从Object类继承产生。原型链反应的是一种继承关系

• 每个构造函数都有一个prototype属性指向原型对象。
• 原型对象通过constructor属性指向构造函数。
• 通过实例对象的 __proto__属性 可以访问原型对象。
• Object的原型对象的 __proto__属性 为null。

原型链结构图

函数在原型链中的结构

成员查找机制

• 当访问一个对象的属性（包括方法）时，首先查找这个对象自身有没有该属性
• 如果没有就查找它的原型（也就是 __proto__指向的 prototype 原型对象）
• 如果还没有就查找原型对象的原型（Object的原型对象）。
• 依此类推一直找到 Object为止（null）
• 如果最后都没查到，则会报undefined

__proto__对象原型的意义就在于为对象成员查找机制提供一个方向，或者说一条路线

//成员查找机制
function Person() { this.name = '张三' }
Person.prototype.name = '李四'
var p = new Person()
console.log(p.name)    // 输出结果：张三
delete p.name          // 删除对象p的name属性
console.log(p.name)    // 输出结果：李四
delete Person.prototype.name  // 删除原型对象的name属性
console.log(p.name)   // 输出结果：undefined

案例：利用原型对象扩展数组方法

//为数组添加sum()方法
Array.prototype.sum = function () {
    var sum = 0
    for (var i = 0; i < this.length; i++) {
        sum += this[i]
    }
    return sum
}
var arr = [1, 2, 3]
console.log(arr.sum()) // 输出结果：6
console.log(Array.proptotype) //有了sum（）方法

注意： 数组和字符串不能进行给原型对象覆盖操作，不可以采用Array.prototype={ }方式