深入理解原型

构造函数

创建一个函数，当我们new这个函数，哪个这个过程就叫做构造函数
通过构造函数创建对象也称为实例化

function Animal(color) {
    // 实例属性
 this.color = color;
}
// 静态属性
Animal.age = '4'
let dog = new Animal('black')

在构造函数上定义方法，（方法是不共享的）
每生成一个对象，添加一个方法，都是新建的内存，这样会造成内存的浪费

    function Star() {
        this.sing = function () {
            console.log('我爱唱歌');
        }
    }
    let stu1 = new Star();
    let stu2 = new Star();
    stu1.sing();//我爱唱歌
    stu2.sing();//我爱唱歌
    console.log(stu1.sing === stu2.sing);//false

在构造函数的原型上定义方法（方法是共享的）

    function Star(name) {
        this.name = name;
    }
    Star.prototype.sing = function () {
        console.log('我爱唱歌', this.name);
    };
    let stu1 = new Star('小红');
    let stu2 = new Star('小蓝');
    stu1.sing();//我爱唱歌 小红
    stu2.sing();//我爱唱歌 小蓝
    console.log(stu1.sing === stu2.sing);//true

new 过程发生了什么

看一段代码

function Person(){

}
Person.prototype.index = 10
let stu = new Person()
console.log(stu.index) //10

步骤详解 new 过程
1.首先会创建一个新的空对象 let stu = new Object()
2.把创建的对象 stu 的_proto_指向 Person 的原型对象prototype stu._proto_ = Person.prototype
3.改变 this 的指向，指向创建的新对象 Person.call(stu)
我们可以发现，我们并没有把属性也赋值给新的对象，那么新的对象是怎么拿到值的呢？答案是原型链，当执行步骤 2 的时候，原型链就产生了，
stu->Person.prototype->Object.prototype->null
当 stu 查找自身属性 index，如果找不到就会向上查找，直到最顶层 null 为止。如果找到属性，那么会立刻终止，停止查找

静态属性

function Person(){

}
Person.name = 's'
Person.prototype.age = '1'
const p = new Person()
console.log(p.age) // 1
console.log(p.name) // undefined

因为 name 是 Person 的静态属性，是绑定在 Person 的函数上的，并不在原型链上，所以 p 是获取不 name 的。

proto

每一个 js 对象（除了 null）都具有一个属性叫 _proto_，这个属性会指向该对象的原型

对象_proto_属性的值就是它对应的原型对象，

function Person(){

}
var person = new Person()
console.log(person._proto_===Person.prototype) // true

var one = {x: 1};
var two = new Object();
one.__proto__ === Object.prototype // true
two.__proto__ === Object.prototype // true
one.toString === one.__proto__.toString // true

prototype

只有函数才会有 prototype
什么是原型：Father.prototype就是原型，其作用就是共享方法
通过原型共享方法可以避免内存空间的浪费

原型链

开局一张图

170e2ba41e08f444.png

person1到null这个过程，（蓝色的线），就称为原型链

分析一下过程

1.我们从Person开始，开始从创建一个函数Person
2.创建对象let person1 = new Person() person1._proto_=== Person.prototype
3.Person.prototype.constructor === Person原型的构造器指向原型
4.Person.prototype._proto_ === Object.prototype
5.Object.prototype._proto_ === null
从图中还可以看出的关系

person1._proto_._proto_ === Object.prototype  
person1._proto_._proto_._proto_ === null

6.Function._proto_=== Function.prototype
7.Function.prototype._proto_ === Object.prototype
8.Function.prototype.constructor === Function

看一道题目

Object.prototype.__proto__    //null
Function.prototype.__proto__  //Object.prototype
Object.__proto__              //Function.prototype

继承

看一道题目

按照如下要求实现Person 和 Student 对象
 a)Student 继承Person
 b)Person 包含一个实例变量 name， 包含一个方法 printName
 c)Student 包含一个实例变量 score， 包含一个实例方法printScore
 d)所有Person和Student对象之间共享一个方法

es5 写法

// 先定义两个函数
function Person(name){
    //实例变量name
    this.name = name
    // 包含的方法
    this.printName = function(){
        console.log('this is printName')
    }
}
// 共享方法要放在原型上
Person.prototype.comment = function(){
    console.log('共享方法')
}
function Student(score){
    this.score = score
    this.printScore = function(){
        console.log('this is printScore')
    }
}
// student 想要继承Person的原型的方法，就要吧 Person的实例赋值给Student的原型
Student.prototype = new Person
    let person = new Person('小紫',80);
    let stu = new Student('小红',100);
    console.log(stu.printName===person.printName);//false
    console.log(stu.comment===person.comment);//true

es6 写法
class 类，本质上还是函数，只不过是函数的语法糖，写起来更方便

//类中的所有方法都会被继承
  class Person {
        constructor(name) {
            this.name = name;
        }
        printName() {
            console.log('This is printName');
        }
        commonMethods(){
            console.log('我是共享方法');
        }
    }

    class Student extends Person {
        constructor(name, score) {
            //调用父类的constructor(name) 此时是作为一个函数
            super(name); // this指向是当前环境Student
            //相当于Student.prototype.constructor.call(this)

            // 此时super作为一个对象使用
            console.log(super.printName())//this指向是Person
            // 相当于 Person.prototype.printName()
            this.score = score;
        }
        printScore() {
            console.log('This is printScore');
        }
    }

    let stu = new Student('小红');
    let person = new Person('小紫');
    console.log(stu.printName===person.printName);//true
    console.log(stu.commonMethods===person.commonMethods);//true