原型对象详解(简单易懂)

基本概念

什么是原型对象？

每一个对象都有他的原型对象
它可以使用自己原型对象上的
属性和方法

获取原型对象的方法(3种)

1.通过对象__proto__获取
2.通过构造函数prototype属性拿到原型
3 通过类的 prototype 属性

//1 通过对象__proto__获取
 let cat = {
        name: "miaomiao"
    }
    cat.__proto__.eat = function () {
        console.log("吃鱼");
    }
    cat.eat();//吃鱼
    
//2.通过构造函数prototype属性拿到原型
   function Cat(name, age) {
        this.name = name;
        this.age = age;

    }
    let cat = new Cat("喵喵", 2);//创建cat 赋值给Cat
    Cat.prototype.eat = function () {//原型上多了个eat方法
        console.log("吃鱼");
    }
    cat.eat();//吃鱼
    
    //3通过类prototype 属性
    
        class Cat {//类里可以加一些属性和方法
        constructor(name,age){
            this.name=name;
            this.age=age;
        }


    }
    Cat.prototype.eat = function(){//给Cat的原型添加一个eat方法
        console.log("吃鱼");
    }
    let cat = new Cat("123",2);
    console.log(cat);
    cat.eat();//吃鱼

原型对象有什么用？

能用prototype 扩展对象

例：创建和时间对象 想输出中文格式时间

  let date = new Date();
    console.log(date);
    //目标 希望输出 中文 2021年xx月xx日
    Date.prototype.formate = function () {
        let year = this.getFullYear();//年
        let month = this.getMonth() + 1;//月
        let date = this.getDate();//天
        return `${year}年${month}月${date}日`

    }
console.log(date.formate());//用原型扩展 date 变量

类的继承

子对象 可以使用父对象的方法这就是继承
，

对象可以使用 本身原型的方法 也是继承

 //例子 博客系统 普通用户 管理用户 登录需要用户类
 // 管理员用户有name和密码 可以登录, 也可以删除用户 普通用户有name和密码 
 //让管理员 继承普通用户 就能使用 普通用户的登录方法
 
     class User {// 普通用户类
        constructor(username, password) {
            this.username = username;
            this.password = password;
        }
        login() {//登陆方法
            console.log("登录");
        }
    }

    class Admin extends User {//管理员类
        deletePerson() {//自定义一个删除方法
            console.log("删除一个人");
        }

    }
    let admin = new Admin();
    admin.login();//登录 ps子集的admin 可以使用父级的login

原型继承与原型链

 //es5 原型继承 prototype
    function User(username, password) {
        this.username = username;
        this.password = password;
        this.login = function () {
            console.log("登录");
        }
    }
    // 思路 直接让 Admin的prototype等于 new User
    function Admin() {// 目的 使用父类方法
        this.delrtePerson = function () {
            console.log("删除一个人");
        }

    }
    Admin.prototype = new User();//继承 直接让原型等于创建实例(实例肯定有所有构造函数和方法)
    let admin = new Admin();
    admin.login();//登录 能调用父类的方法

原型链

什么是原型链

//例 admin 的prototype是一个对象 
//那么prototype的对象也能有原型(prototype对象)Object原型对象 无限原型
//例子

function User(username, password) {
        this.username = username;
        this.password = password;
        // this.login = function(){
        //     console.log("登录");
        // }
    }
    // 思路 直接让 Admin的prototype等于 new User
    function Admin() {// 目的 使用父类方法
        this.delrtePerson = function () {
            console.log("删除一个人");
        }

    }
    Object.prototype.login = function () {
        console.log("Object原型上的登录方法");
    }
    Admin.prototype = new User();//继承 直接让原型等于创建实例(实例肯定有所有构造函数和方法)
    let admin = new Admin();
    admin.login();//错误 删除了login方法 输出Object原型上的登录方法
    //admin 先向原型找结果没有 在向admin找 在向User找 再向 Object找
    let a = [1, 2, 3]
    a.login();//输出两个 所有对象原型都是Object prototype