目录

（一）原型的基本概念

什么是原型

原型对象有什么用？

（二）类与继承

什么是继承

（三）原型继承与原型链

什么是原型 什么是原型链

---

（一）原型的基本概念

• 什么是原型

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

获取原型的方法：

1. 通过对象的__proto__获取

2. 通过构造函数的prototype属性拿到原型

3. 通过类的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:13Cat.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:13Cat.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继承：prototypefunction 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继承：prototypefunction 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原型上的登陆方法