js原型和原型链以及原型继承

一、原型

原型是Javascript中的继承的基础，JavaScript的继承主要依靠原型链来实现的。

原型
​ 在JavaScript中，我们创建一个函数A(就是声明一个函数), 就会为该函数创建一个prototype属性。而且也会在内存中创建一个对象B，A函数的属性 prototype 指向这个对象B( 即：prototype的属性的值是这个对象 )。这个对象B就是函数A的原型对象，简称函数的原型。

二、原型链

原型本身也是一个对象，所以它也会有一个自己的原型，这一层一层的延续下去，直到最后指向 null，这就形成的 原型链

    //  原型和原型链

    1、通过工厂函数创建对象
    function createPerson(uname,age,phone){
        let obj = new Object();
        obj.uname = uname;
        obj.age   = age;
        obj.phone = phone;
        return obj;
    }

    let student0 = createPerson("aaa",20,"15156651651");
    let student1 = createPerson("bbbb",20,"15156651651");
    let student2 = createPerson("cccc",20,"15156651651");
    let student3 = createPerson("ddd",20,"15156651651");
    let student4 = createPerson("eeee",20,"15156651651");
    console.log(student0,student1,student2,student3,student4);

    function createDog(uname,age,type){
        let dog = {
            uname:uname,
            age:age,
            type:type
        }
        return dog;
    }
    let d0 = createDog("旺财",1,"中华田园犬");
    let d1 = createDog("旺财12",1,"中华田园犬");
    let d2 = createDog("旺财2",1,"中华田园犬");
    let d3 = createDog("旺财321",1,"中华田园犬");
    console.log(d0,d1,d2,d3);

    // 2、通过[构造函数]实例化对象
    function Person(uname,age,sex){  //构造函数
        this.uname = uname;
        this.age = age;
        this.sex = sex;
    }

    let p = new Person("小飞",18,"男");  //实例化对象
    let p1 = new Person("html",20,"nv ");
    console.log(p,p1);

     //   this  指向当前调用他的最终的对象
   /*  改变this指向
        一、call()  
            1、立即调用并执行函数
            2、可改变this指向
            3、传递字符形式的参数

        二、apply()  
            1、立即调用并执行函数
            2、可改变this指向
            3、只能传递数组的参数

        三、bind()
            1、不会调用并执行函数
            2、可改变this指向
            3、传递字符形式的参数
        
        四、 new 关键字
            1、在构造函数内部创建一个空对象
            2、将 this 指向到当前这个空对象上
            3、通过 this 向当前空对象上添加属性和方法
            4、返回对象
    */

 //  所有函数都有原型对象
    //  构造函数访问原型对象  prototype  --- 存放公共方法
    //  实例对象访问原型对象  __proto__  --- 存放公共方法
    //  constructor  构造方法（原型对象创建的构造函数）
    //  构造函数
    function Person(uname,age,sex){
        this.uname = uname;
        this.age = age;
        this.sex = sex;
        // this.fn = function(){
        //     console.log(this.uname+"今年"+this.age+"岁了------"+this.sex);
        // }
    }

    Person.prototype.fn = function(){
        console.log("这是原型对象上的方法");
    }

    console.log("原型对象----  prototype",Person.prototype);

    let p = new Person("小飞",18,"男");  //实例化对象
    let p1 = new Person("html",20,"nv");   //实例化对象
    let p2 = new Person("css",20,"nv");   //实例化对象
    console.log(p,p1);
   
    // p.fn();
    //  p1.fn();

    //console.log(p.fn === p1.fn);

    // console.log(Person.prototype === p.__proto__ );

    // console.log(p1.fn === p.fn);

    // console.log(Person.prototype.constructor === Person);

图示原型原型链解释：

蓝色为原型对象，简称原型

红色线连起来的为一条原型链

三、原型链继承

利用原型及原型链实现继承【面向对象】

 //利用原型及原型链实现继承【面向对象】

    //父  构造函数
    function Father(name,age,sex){
        // 指向创建它的实例对象 
        this.name = name;
        this.age = age;
        this.sex = sex;

    }
    //  Father构造函数的原型对象上的公共方法
    Father.prototype.money = function(){
        //原型对象上的this 指向 调用它的  实例对象
        console.log(this.name+"------在挣钱");
    }

   

    //  子 构造函数
    function Son(name,age,sex,email){
        // 指向创建它的实例对象  s

        //使用 call() 立即调用父类方法 ,并传递参数 【继承父类属性】
        Father.call(this,name,age,sex);

        //子类 自身属性
        this.email = email;

        /* this.name = name;
        this.age = age;
        this.sex = sex; */
    }
   
    //  直接将父构造函数的原型对象赋值给子构造函数的原型对象 
    // Son.prototype = Father.prototype;

    //  通过new 将父构造函数  的 实例对象  赋值给  son 的 原型对象
    Son.prototype = new Father();
    //利用  constructor  手动改变Son的原型对象的指向的构造函数
    Son.prototype.constructor = Son;
    // console.log("!!!",Son.prototype);

    //在son 的 原型对象上添加 game 方法
    Son.prototype.game = function(){
        console.log(this.name +  "-----在玩游戏");
    }

    let f = new Father("小飞",50,"男");
    let s = new Son("html",20,"女","[email protected]");

    console.log(f,s);

    f.money();

    s.money();

    s.game();