原型和原型链

一、构造函数

1、定义：

主要用来创建对象，并为对象的成员赋初始值。我们可以把对象中的一些公共的属性和方法抽取出来，封装到构造函数中。

function Person( name, age ) {
    this.name = name
    this.age = age 
    this.sing = function() {
        console.log('我会唱歌')
    }
}

2、静态成员与实例成员

静态成员是属于类本身的成员，而不是类的实例。指通过类或构造函数访问的成员，不需要创建实例对象就能访问。

function Person() {

}
Person.school = '厦门大学'    // 添加静态属性 school
Person.sayHello = finction() {
    console.log('Hello')     // 添加静态方法 sayHello   
}
console.log(Person.school)
Person.sayHello()

实例成员属于类的实例，每个实例都有自己独立的实例成员。

let p1 = new Person('张三', 18)
console.log(p1.name)    // p1.name 就是实例成员

3、构造函数和类的区别

类中的成员方法是定义在类中的，使用类创建对象后，这些对象的方法都是引用了同一个方法，这样可以节省内存空间。

而使用构造函数创建的对象并不是引用同一个方法。

 

二、原型对象

1、访问原型对象

在JavaScript中，每个构造函数都有一个原型对象存在，构造函数可以通过prototype属性来访问这个原型对象。

构造函数————————prototype————————>原型对象

利用原型对象，可以实现为所有的实例对象共享实例方法。

 

在JavaScript中，每个对象都有一个_proto_属性，这个属性指向了对象的原型对象。

对象—————————_proto_————————>原型对象

2、访问构造函数

在原型对象中有一个constructor属性，指向了构造函数

 

三、原型链

在JavaScript中，对象有原型对象，原型对象也有原型对象，这就形成了一个链式结构，原型对象与原型对象是像链条一样连起来的，这个链条的尽头的对象就是Object.prototype

可以将原型链的结构总结为以下4点。

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

接下来我们根据以上4点，绘制原型链的结构图

 

成员查找机制：当访问一个实例对象的成员时，JavaScript首先会判断实例对象有没有这个成员，如果有，就直接使用；如果没有，再判断原型对象中有没有这个成员。如果在原型对象中找到了这个成员，就使用；没有找到，就继续查找原型对象的原型对象，如果直到最后都没有找到，则返回undefined