（一）原型的基本概念

什么是原型

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

获取原型的方法：

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

          // 1. 创建一个 cat 对象
        let cat = {
            name: "喵喵"
        }
        // 2.原型对象上添加一个方法 吃鱼
        cat.__proto__.eat = function () {
            console.log(this.name, '吃鱼');
        }

        cat.eat(); //喵喵 吃鱼

cat 对象可以调用cat原型对象上的 eat 方法

     //构造函数
        function Cat(name, age) {
            this.name = name;
            this.age = age;
        }
        let cat = new Cat("喵喵", 2);
        // 如果原型对象上没有eat方法会报错 Uncaught TypeError: cat.ear is not a function at 原型的基本概念.html:31:13

        Cat.prototype.eat = function () {
            console.log(this.name, "吃鱼");
        }
        cat.eat(); //喵喵 吃鱼

原型对象有什么用？

比如：如果想要让date.formate()直接输出年月日是没有这个功能的可以利用原型扩展这个对象

   //构造函数
        function Cat(name, age) {
            this.name = name;
            this.age = age;
        }
        let cat = new Cat("喵喵", 2);
        // 如果原型对象上没有eat方法会报错 Uncaught TypeError: cat.ear is not a function at 原型的基本概念.html:31:13

        Cat.prototype.eat = function () {
            console.log(this.name, "吃鱼");
        }
        cat.eat(); //喵喵 吃鱼

        let date = new Date();
        console.log(date); //Mon Feb 14 2022 19:35:41 GMT+0800 (中国标准时间)
        // 目标输出 xxxx年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()); //2022年2月14日

（二）类与继承

基本语法

     // ES6类的基本语法 Es5用构造函数
        class Cat {

        }
        let cat = new Cat();
        console.log(cat); //Cat {}

添加原型方法

        // ES6类的基本语法 Es5用构造函数
        class Cat {
            constructor(name, age) {
                this.name = name;
                this.age = age;

            }
        }
        // 添加类的原型方法
        Cat.prototype.eat = function () {
            console.log(this.name, "吃鱼");
        }
        let cat = new Cat("喵喵", 2);
        cat.eat(); //喵喵 吃鱼

什么是继承

继承就是子对象可以使用父对象所有的属性和方法

比如管理员登录

     // 博客系统 普通用户  管理员用户 
        class User {
            constructor(username, password) {
                this.username = username;
                this.password = password;
            }
            login() {
                console.log('登录');
            }
        }
        //ES6继承
        // Admin继承User所以可以使用登录功能
        class Admin extends User {
            deletePerson() {
                console.log('删除一个用户 ');
            }
        }
        let admin = new Admin('管理员');
        admin.login(); //登录
        admin.deletePerson() //删除一份用户

（三）原型继承与原型链

ES5继承

      // ES5继承：prototype
        function User(username, password) {
            this.username = username;
            this.password = password;
            this.login = function () {
                console.log('登录');
            }
        }

        function Admin() {
            this.deletePerson = function () {
                console.log('删除一个用户');
            }
        }
        // 分析：目的：希望Admin使用User上的方法
        // 1.系统默认Admin可以使用 prototype 构造函数对象原型 上的属性 和 方法
        // 2.设置Admin对象原型为User的实例 就可以拥有 User 的属性和方法 所以 admin就可以使用User的方法和属性


        Admin.prototype = new User(); //

        let admin = new Admin();

        admin.login(); //登录

什么是原型什么是原型链

构造函数的 prototype 对象的 __proto__ 他们都可以拥有 prototype/__proto__

他们无限拥有原型比如admin.login 会先查找自身拥有login方法吗，没有就网prototype上查找还没有继续向上查找一直到Object的原型上找到为止，没有就报错。

比如

        // ES5继承：prototype
        function User(username, password) {
            this.username = username;
            this.password = password;
            this.login = function () {
                console.log('登录');
            }
        }

        function Admin() {
            this.deletePerson = function () {
                console.log('删除一个用户');
            }
        }

        Object.prototype.login = function () {
            console.log('Object原型上的登陆方法');
        }

        let a = [1, 2, 3];
        a.login(); //Object原型上的登陆方法