JS基础原型与继承

妖狐艹你老母 2023-10-06 21:40 13阅读 0赞

#### 阅读目录 ####

*  原型基础
 *   *  原型对象
     *   *  使用数组原型对象的 concat 方法完成连接操作
         *  默认情况下创建的对象都有原型。
         *  以下 x、y 的原型都为元对象 Object，即JS中的根对象
         *  创建一个极简对象（纯数据字典对象）没有原型（原型为 \`null\`)
         *  函数拥有多个原型，prototype 用于实例对象使用，\`\_\_proto\_\_\` 用于函数对象使用
         *  原型关系分析，与方法继承的示例
         *  使用构造函数创建对象的原型体现
         *  \`constructor\` 存在于 \`prototype\` 原型中，用于指向构建函数的引用。
         *  使用对象的 \`constructor\` 创建对象
     *  原型链
     *  原型检测
     *  属性遍历
     *  借用原型 \*
     *  this 不受原型继承影响
 *  原型总结
 *   *  prototype
     *  Object.create
     *  \`\_\_proto\_\_\`
     *  使用建议
 *  构造函数
 *   *  原型属性
     *  constructor
     *  使用优化
     *   *  通过原型定义方法不会产生函数复制
         *  演示使用原型为多个实例共享属性
     *  体验继承
 *  继承与多态
 *   *  继承实现
     *  构造函数
     *  方法重写
     *  多态
 *  深挖继承
 *   *  构造函数
     *  原型工厂
     *  对象工厂 \*
     *  Mixin模式
     *  实例操作

## 原型基础 ##

### 原型对象 ###

每个对象都有一个原型 `prototype` 对象，通过函数创建的对象也将拥有这个原型对象。  
原型是一个指向对象的指针。

1.  可以将原型理解为对象的父亲，对象从原型对象继承来属性
2.  原型就是对象除了是某个对象的父母外没有什么特别之处
3.  所有函数的原型默认是 Object 的实例，所以可以使用 `toString / toValues / isPrototypeOf`等方法的原因。
4.  使用原型对象为多个对象共享属性或方法
5.  如果对象本身不存在属性或方法将到原型上查找
6.  使用原型可以解决，通过构建函数创建对象时复制多个函数造成的内存占用问题
7.  原型包含 `constructor` 属性，指向构造函数
8.  对象包含 `__proto__` 指向他的原型对象

#### 使用数组原型对象的 concat 方法完成连接操作 ####

下例使用的就是数组原型对象的 `concat` 方法完成的连接操作。

let hd = ["a"];
    console.log(hd.concat("b"));
    console.log(hd);

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_16_color_FFFFFF_t_70_g_se_x_16]

#### 默认情况下创建的对象都有原型。 ####

let hd = {
         name: "wgchen" };
    console.log(hd);

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_17_color_FFFFFF_t_70_g_se_x_16]

#### 以下 x、y 的原型都为元对象 Object，即JS中的根对象 ####

let x = {
        };
    let y = {
        };
    console.log(Object.getPrototypeOf(x) == Object.getPrototypeOf(y)); //true
    // Object.getPrototypeOf（）方法返回指定对象的原型（即内部属性的值）。[[Prototype]]

#### 创建一个极简对象（纯数据字典对象）没有原型（原型为 `null`) ####

我们也可以创建一个极简对象（纯数据字典对象）没有原型（原型为 `null`)

// hasOwnProperty() 方法会返回一个布尔值，指示对象自身属性中是否具有指定的属性（也就是，是否有指定的键）。
    
    let hd = {
         name: 3 };
    console.log(hd.hasOwnProperty("name")); // true
    
    let xj = Object.create(null, {
        
      name: {
        
        value: "wgchen"
      }
    });
    
    console.log(xj.hasOwnProperty("name"));
    // Uncaught TypeError: xj.hasOwnProperty is not a function
    
    //Object.keys是静态方法，不是原型方法所以是可以使用的
    console.log(Object.keys(xj));

console.log(xj);

![在这里插入图片描述][700a4bbcf3fb4e0aab395b329f0410c0.png]

#### 函数拥有多个原型，prototype 用于实例对象使用，`__proto__` 用于函数对象使用 ####

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16]

#### 原型关系分析，与方法继承的示例 ####

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 1]

let hd = new Object();
    hd.name = "wgchen";
    
    Object.prototype.show = function() {
        
      console.log("blog");
    };
    hd.show();
    
    function User() {
        }
    let xj = new User();
    xj.show();
    
    User.show();

![在这里插入图片描述][6576e64c6e374603a1865964ef6abb55.png]

#### 使用构造函数创建对象的原型体现 ####

1.  构造函数拥有原型
2.  创建对象时构造函数把原型赋予对象

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 2]

function User() {
        }
    let xj = new User();
    console.log(xj.__proto__ == User.prototype); // true

下面使用数组会产生多级继承即原型链

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_11_color_FFFFFF_t_70_g_se_x_16]

let hd = [];
    console.log(hd);
    console.log(hd.__proto__ == Array.prototype);
    
    let str = "";
    console.log(str.__proto__ == String.prototype);

下面使用 `setPrototypeOf` 与 `getPrototypeOf` 获取与设置原型

let hd = {
        };
    let parent = {
         name: "parent" };
    Object.setPrototypeOf(hd, parent);
    
    console.log(hd);
    console.log(Object.getPrototypeOf(hd));

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 3]  
使用自定义构造函数创建的对象的原型体现

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_11_color_FFFFFF_t_70_g_se_x_16 1]

function User() {
        }
    let hd = new User();
    console.log(hd);

#### `constructor` 存在于 `prototype` 原型中，用于指向构建函数的引用。 ####

function hd() {
        
      this.show = function() {
        
        return "show method";
      };
    }
    
    const obj = new hd(); 
    console.log(obj instanceof hd); //true
    
    const obj2 = new obj.constructor();
    console.dir(obj2.show()); //show method

#### 使用对象的 `constructor` 创建对象 ####

function User(name, age) {
        
      this.name = name;
      this.age = age;
    }
    
    function createByObject(obj, ...args) {
        
      const constructor = Object.getPrototypeOf(obj).constructor;
      return new constructor(...args);
    }
    
    let hd = new User("wgchen");
    let xj = createByObject(hd, "willem", 12);
    
    console.log(xj);

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_17_color_FFFFFF_t_70_g_se_x_16 1]

### 原型链 ###

通过引用类型的原型，继承另一个引用类型的属性与方法，这就是实现继承的步骤。

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 4]  
使用 `Object.setPrototypeOf` 可设置对象的原型，下面的示例中继承关系为 `obj>hd>cms`。

`Object.getPrototypeOf` 用于获取一个对象的原型。

### 原型检测 ###

`instanceof` 检测构造函数的 `prototype` 属性是否出现在某个实例对象的原型链上。

使用 `isPrototypeOf` 检测一个对象是否在另一个对象的原型链中

### 属性遍历 ###

使用 `in` 检测原型链上是否存在属性，使用 `hasOwnProperty` 只检测当前对象。

let a = {
         url: "blog" };
    let b = {
         name: "wgchen" };
    Object.setPrototypeOf(a, b);
    
    console.log("name" in a); // true
    console.log(a.hasOwnProperty("name")); // false
    console.log(a.hasOwnProperty("url")); // true

使用 `for/in` 遍历时同时会遍历原型上的属性如下例

![在这里插入图片描述][ed104b7963e2493481069e906fb61761.png]  
`hasOwnProperty` 方法判断对象是否存在属性，而不会查找原型。  
所以如果只想遍历对象属性使用以下代码

### 借用原型 \* ###

使用 `call` 或 `apply` 可以借用其他原型方法完成功能。

下面的 xj 对象不能使用 max 方法，但可以借用 hd 对象的原型方法。

上例中如果方法可以传参，那就可以不在 `xj` 对象中定义 `get` 方法了。

因为 `Math.max` 就是获取最大值的方法，所以代码可以再次优化

下面是获取设置了 `class` 属性的按钮，但DOM节点不能直接使用数组的 `filter` 等方法，但借用数组的原型方法就可以操作了。

<body>
      <button message="wgchen" class="red">wgchen but</button>
      <button message="blog">blog but</button>
    </body>
    <script>
      let btns = document.querySelectorAll("button");
      btns = Array.prototype.filter.call(btns, item => {
        
        return item.hasAttribute("class");
      });
    </script>

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 5]

### this 不受原型继承影响 ###

this 指向调用属性时使用的是对象。

## 原型总结 ##

### prototype ###

函数也是对象，也有原型，函数有 `prototype` 属性指向他的原型

为构造函数设置的原型指，当使用构造函数创建对象时把这个原型赋予给这个对象

函数默认 `prototype` 指包含一个属性 `constructor` 的对象，`constructor` 指向当前构造函数

function User(name) {
        
      this.name = name;
    }
    
    let xj = new User("wgchen"); // User {name: 'wgchen'}
    
    console.log(xj);
    console.log(User.prototype.constructor == User); //true
    console.log(xj.__proto__ == User.prototype); //true
    
    let lisi = new xj.constructor("李四");
    console.log(lisi.__proto__ == xj.__proto__); //true

原型中保存引用类型会造成对象共享属性，所以一般只会在原型中定义方法。

function User() {
        }
    
    User.prototype = {
        
      lessons: ["JS", "VUE"]
    };
    
    const lisi = new User();
    const wangwu = new User();
    
    lisi.lessons.push("CSS");
    
    console.log(lisi.lessons); //["JS", "VUE", "CSS"]
    console.log(wangwu.lessons); //["JS", "VUE", "CSS"]

为 Object 原型对象添加方法，将影响所有函数

<body>
      <button onclick="this.hide()">wgchen</button>
    </body>
    <script>
      Object.prototype.hide = function() {
        
        this.style.display = "none";
      };
    </script>

了解了原型后可以为系统对象添加方法，比如为字符串添加了一截断函数。

不能将系统对象的原型直接赋值

String.prototype.truncate = function (len = 5) {
        
    	return this.length <= len ? this : this.substr(0, len) + '...';
    }
    console.log('人不是机器都会有累的时候'.truncate(3)); //人不是...

### Object.create ###

使用 `Object.create` 创建一个新对象时，使用现有对象做为新对象的原型对象。

使用Object.create 设置对象原型

let user = {
        
      show() {
        
        return this.name;
      }
    };
    
    let hd = Object.create(user);
    hd.name = "wgchen";
    console.log(hd.show()); // wgchen

在设置时使用第二个参数设置新对象的属性

### `__proto__` ###

在实例化对象上存在 `__proto__` 记录了原型，所以可以通过对象访问到原型的属性或方法。

*  `__proto__` 不是对象属性，理解为 `prototype` 的 `get/set` 实现，他是一个非标准定义。
 *  `__proto__` 内部使用 `get/set` 控制值，所以只允许对象或 `null`
 *  建议使用 `Object.setPrototypeOf` 与 `Object.getProttoeypOf` 替代 `__proto__`

下面修改对象的 `__proto__` 是不会成功的，因为 `_proto__` 内部使用 `get/set` 控制值，所以只允许对象或 `null`

let xj = {
        };
    xj.__proto__ = "willem";
    console.log(xj);

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_17_color_FFFFFF_t_70_g_se_x_16 2]  
下面定义的 `__proto__` 就会成功，因为这是一个极简对象，没有原型对象所以不会影响`__proto__` 赋值。

let hd = Object.create(null);
    hd.__proto__ = "wgchen";
    console.log(hd);

![在这里插入图片描述][217f04f87ee348819bdb1ae8318f25f1.png]

下面通过改变对象的 `__proto__` 原型对象来实现继承，继承可以实现多层,

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_18_color_FFFFFF_t_70_g_se_x_16]  
构造函数中的 `__proto__` 使用

console.log(lisi);
    console.log(xiaoming);

![在这里插入图片描述][99375317d2724a4ebe3b43d0e4b7c017.png]  
可以使用 `__proto__` 或 `Object.setPrototypeOf` 设置对象的原型，  
使用 `Object.getProttoeypOf` 获取对象原型。

对象设置属性，只是修改对象属性并不会修改原型属性，使用 `hasOwnProperty` 判断对象本身是否含有属性并不会检测原型。

function User() {
        }
    const lisi = new User();
    const wangwu = new User();
    
    lisi.name = "小明";
    console.log(lisi.name); // 小明
    console.log(lisi.hasOwnProperty("name")); // true
    
    //修改原型属性后
    lisi.__proto__.name = "张三";
    console.log(wangwu.name); // 张三
    
    //删除对象属性后
    delete lisi.name;
    console.log(lisi.hasOwnProperty("name")); // false
    console.log(lisi.name); // 张三

使用 `in` 会检测原型与对象，而 `hasOwnProperty` 只检测对象，所以结合后可判断属性是否在原型中。

function User() {
        
    }
    
    User.prototype.name = "wgchen";
    
    const lisi = new User();
    
    //in会在原型中检测
    console.log("name" in lisi); // true
    
    //hasOwnProperty 检测对象属性
    console.log(lisi.hasOwnProperty("name")); // false

### 使用建议 ###

通过前介绍我们知道可以使用多种方式设置原型，下面是按时间顺序的排列

1.  `prototype` 构造函数的原型属性
2.  `Object.create` 创建对象时指定原型
3.  `__proto__` 声明自定义的非标准属性设置原型，解决之前通过 `Object.create` 定义原型，而没提供获取方法
4.  `Object.setPrototypeOf` 设置对象原型

这几种方式都可以管理原型，一般以我个人情况来讲使用 prototype 更改构造函数原型，使用 `Object.setPrototypeOf` 与 `Object.getPrototypeOf` 获取或设置原型。

## 构造函数 ##

### 原型属性 ###

构造函数在被 `new` 时把构造函数的原型`（prototype）`赋值给新对象。  
 如果对象中存在属性将使用对象属性，不再原型上查找方法。

构造函数只会产生一个原型对象

对象的原型引用，构造函数的原型对象，是在创建对象时确定的，当构造函数原型对象改变时会影响后面的实例对象。

function hd() {
        }
    hd.prototype.name = "wgcms";
    
    const obj1 = new hd();
    console.log(obj1.name); //wgcms
    
    hd.prototype = {
        
      name: "willem"
    };
    const obj2 = new hd();
    console.dir(obj2.name); //willem

### constructor ###

构造函数的原型中包含属性 constructor 指向该构造函数，以下代码说明了这一点

function User(name) {
        
      this.name = name;
    }
    
    let hd = new User("wgchen");
    let xj = new hd.constructor("willem");
    console.log(xj); // User {name: 'willem'}

以下代码直接设置了构造函数的原型将造成 constructor 丢失

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_17_color_FFFFFF_t_70_g_se_x_16 3]  
正确的做法是要保证原型中的 constructor 指向构造函数

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_17_color_FFFFFF_t_70_g_se_x_16 4]

### 使用优化 ###

使用构造函数会产生函数复制造成内存占用，及函数不能共享的问题。

function User(name) {
        
      this.name = name;
      this.get = function() {
        
        return this.name;
      };
    }
    
    let lisi = new User("小明");
    let wangwu = new User("王五");
    
    console.log(lisi.get == wangwu.get); //false

#### 通过原型定义方法不会产生函数复制 ####

#### 演示使用原型为多个实例共享属性 ####

将方法定义在原型上为对象共享，解决通过构造函数创建对象函数复制的内存占用问题

使用 `Object.assign` 一次设置原型方法来复用，后面会使用这个功能实现 `Mixin` 模式

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_19_color_FFFFFF_t_70_g_se_x_16]

### 体验继承 ###

下面为 Stu 更改了原型为 User 的实例对象，lisi 是通过构造函数 Stu 创建的实例对象

1.  lisi 在执行 getName 方法时会从自身并向上查找原型，这就是原型链特性
2.  当然如果把 getName 添加到对象上，就不继续追溯原型链了

"use strict";
    
    function User() {
        }
    
    User.prototype.getName = function() {
        
      return this.name;
    };
    
    function Stu(name) {
        
      this.name = name;
    }
    
    Stu.prototype = new User();
    const lisi = new Stu("李四");
    
    console.log(lisi.__proto__);
    console.log(lisi.getName());

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 6]

## 继承与多态 ##

当对象中没使用的属性时，JS会从原型上获取这就是继承在JavaScript中的实现。

### 继承实现 ###

下面使用 Object.create 创建对象，做为Admin、Member的原型对象来实现继承。

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 7]

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_19_color_FFFFFF_t_70_g_se_x_16 1]  
不能使用以下方式操作，因为这样会改变User的原型方法，这不是继承，这是改变原型

...
    function User() {
        }
    User.prototype.getUserName = function() {
        };
    
    function Admin() {
        }
    Admin.prototype = User.prototype;
    Admin.prototype.role = function() {
        };
    ...

### 构造函数 ###

有多种方式通过构造函数创建对象

function Admin() {
        }
    console.log(Admin == Admin.prototype.constructor); //true
    
    let hd = new Admin.prototype.constructor();
    console.log(hd);
    
    let xj = new Admin();
    console.log(xj);

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_11_color_FFFFFF_t_70_g_se_x_16 2]  
因为有时根据得到的对象获取构造函数，然后再创建新对象所以需要保证构造函数存在，但如果直接设置了 `Admin.prototype` 属性会造成 `constructor` 丢失，所以需要再次设置constructor值。

使用 `Object.defineProperty` 定义来禁止遍历 constructor 属性

完全重写构建函数原型，只对后面应用对象有效

### 方法重写 ###

下而展示的是子类需要重写父类方法的技巧。

parent method
    child method

### 多态 ###

根据多种不同的形态产生不同的结果，下而会根据不同形态的对象得到了不同的结果。

![在这里插入图片描述][3b07b9645bee481fa56f728a204ed8ca.png]

## 深挖继承 ##

继承是为了复用代码，继承的本质是将原型指向到另一个对象。

### 构造函数 ###

我们希望调用父类构造函数完成对象的属性初始化，但像下面这样使用是不会成功的。因为此时 this 指向了window，无法为当前对象声明属性。

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 8]  
解决上面的问题是使用 `call/apply` 为每个生成的对象设置属性

![在这里插入图片描述][86d7357a52fc48789fc092a805f2367e.png]

### 原型工厂 ###

原型工厂是将继承的过程封装，使用继承业务简单化。

![在这里插入图片描述][8628b4c015654082be5f97fc7d99e95c.png]  
![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_16_color_FFFFFF_t_70_g_se_x_16 1]

### 对象工厂 \* ###

在原型继承基础上，将对象的生成使用函数完成，并在函数内部为对象添加属性或方法。

![在这里插入图片描述][88656d505dbb45d28da0c0b0370892b5.png]

### Mixin模式 ###

JS不能实现多继承，如果要使用多个类的方法时可以使用 mixin 混合模式来完成。

1.  mixin 类是一个包含许多供其它类使用的方法的类
2.  mixin 类不用来继承做为其它类的父类

> 其他语言也有类似的操作比如php 语言中可以使用 trait 完成类似操作。

下面是示例中 Admin需要使用 Request.prototype 与 Credit 的功能，因为JS 是单继承，我们不得不将无关的类连接一下，显然下面的代码实现并不佳

下面分拆功能使用 `Mixin` 实现多继承，使用代码结构更清晰。  
只让 Admin 继承 User 原型

mixin 类也可以继承其他类，比如下面的 Create 类获取积分要请求后台，就需要继承 Request 来完成。

super 是在 mixin 类的原型中查找，而不是在 User 原型中

### 实例操作 ###

使用 `call/apply` 制作选项卡

![在这里插入图片描述][93b7a230996046d68b84bf2e59ae4fb2.gif_pic_center]

<!DOCTYPE html>
    <html>
    
    <head>
      <meta charset="utf-8">
      <title>wgchen</title>
    </head>
    <style>
      * {
        
        padding: 0;
        margin: 0;
      }
    
      body {
        
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100vw;
        height: 50vh;
      }
    
      main {
        
        width: 400px;
        flex-direction: column;
        position: relative;
        margin-right: 20px;
      }
    
      main nav {
        
        display: flex;
        height: 50px;
        align-items: center;
      }
    
      main nav a {
        
        background: #95a5a6;
        margin-right: px;
        padding: 10px 20px;
        border: solid 1px #333;
        color: #fff;
        text-decoration: none;
      }
    
      main nav a:first-of-type {
        
        background: #e67e22;
      }
    
      section {
        
        height: 200px;
        width: 100%;
        background: #f1c40f;
        position: absolute;
        font-size: 5em;
        display: none;
      }
    
      .hd-tab section:first-of-type {
        
        display: block;
      }
    
      section:nth-child(even) {
        
        background: #27ae60;
      }
    </style>
    
    <body>
      <main class="tab1">
        <nav>
          <a href="javascript:;">wgchen</a>
          <a href="javascript:;">blog</a>
        </nav>
        <section>1</section>
        <section>2</section>
      </main>
      <main class="tab2">
        <nav>
          <a href="javascript:;">willem</a>
          <a href="javascript:;">cms</a>
        </nav>
        <section>1</section>
        <section>2</section>
      </main>
    </body>
    
    <script>
      //继承工厂
      function extend(sub, sup) {
        
        sub.prototype = Object.create(sup.prototype);
        sub.prototype.constructor = sub;
      }
    
      //动作类
      function Animation() {
         }
      Animation.prototype.show = function () {
        
        this.style.display = "block";
      };
      //隐藏所有元素
      Animation.prototype.hide = function () {
        
        this.style.display = "none";
      };
      //必变元素集合背景
      Animation.prototype.background = function (color) {
        
        this.style.background = color;
      };
    
      //选项卡类
      function Tab(tab) {
        
        this.tab = tab;
        this.links = null;
        this.sections = null;
      }
    
      extend(Tab, Animation);
    
      Tab.prototype.run = function () {
        
        this.links = this.tab.querySelectorAll("a");
        this.sections = this.tab.querySelectorAll("section");
        this.bindEvent();
        this.action(0);
      };
    
      //绑定事件
      Tab.prototype.bindEvent = function () {
        
        this.links.forEach((el, i) => {
        
          el.addEventListener("click", () => {
        
            this.reset();
            this.action(i);
          });
        });
      };
    
      //点击后触发动作
      Tab.prototype.action = function (i) {
        
        this.background.call(this.links[i], "#e67e22");
        this.show.call(this.sections[i]);
      };
      
      //重置link与section
      Tab.prototype.reset = function () {
        
        this.links.forEach((el, i) => {
        
          this.background.call(el, "#95a5a6");
          this.hide.call(this.sections[i]);
        });
      };
    
      new Tab(document.querySelector(".tab1")).run();
      new Tab(document.querySelector(".tab2")).run();
    </script>
    </html>

[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_16_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/eee539f8b21b4c16b2e9efd5268bbb3a.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_16,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_17_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/8fab1b4449f440f78c13e9487deda910.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_17,color_FFFFFF,t_70,g_se,x_16
[700a4bbcf3fb4e0aab395b329f0410c0.png]: https://img-blog.csdnimg.cn/700a4bbcf3fb4e0aab395b329f0410c0.png
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/a68a6fb520794b53b0b3809c45e768d0.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 1]: https://img-blog.csdnimg.cn/a2543a57a44949be81beadb07f2eb565.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_20,color_FFFFFF,t_70,g_se,x_16
[6576e64c6e374603a1865964ef6abb55.png]: https://img-blog.csdnimg.cn/6576e64c6e374603a1865964ef6abb55.png
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 2]: https://img-blog.csdnimg.cn/fd5f7156714b497281e82a0ef4d9a14b.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_11_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/f362e3bb3faa4707bfeb4fd404648b2f.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_11,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 3]: https://img-blog.csdnimg.cn/9d1f082f4d0f4ac5b0bd75cf4519e9e1.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_11_color_FFFFFF_t_70_g_se_x_16 1]: https://img-blog.csdnimg.cn/2dfc009282d54b649aaa828b1c59ad53.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_11,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_17_color_FFFFFF_t_70_g_se_x_16 1]: https://img-blog.csdnimg.cn/f1e5148bb2824a68a18b60f646900739.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_17,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 4]: https://img-blog.csdnimg.cn/f6b710e39fa44201baff7b79c0b87f28.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_20,color_FFFFFF,t_70,g_se,x_16
[ed104b7963e2493481069e906fb61761.png]: https://img-blog.csdnimg.cn/ed104b7963e2493481069e906fb61761.png
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 5]: https://img-blog.csdnimg.cn/06f3a5e8e1534361915209092b993de9.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_17_color_FFFFFF_t_70_g_se_x_16 2]: https://img-blog.csdnimg.cn/71addadff3a84f66a8de6fa97563b919.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_17,color_FFFFFF,t_70,g_se,x_16
[217f04f87ee348819bdb1ae8318f25f1.png]: https://img-blog.csdnimg.cn/217f04f87ee348819bdb1ae8318f25f1.png
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_18_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/a033f3e0adec4c479bf777e9068f24d9.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_18,color_FFFFFF,t_70,g_se,x_16
[99375317d2724a4ebe3b43d0e4b7c017.png]: https://img-blog.csdnimg.cn/99375317d2724a4ebe3b43d0e4b7c017.png
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_17_color_FFFFFF_t_70_g_se_x_16 3]: https://img-blog.csdnimg.cn/1329173c50c4448d8b4c91f29bfeb084.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_17,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_17_color_FFFFFF_t_70_g_se_x_16 4]: https://img-blog.csdnimg.cn/fc9cd8f81f114dbda0b4b323d6e90cf7.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_17,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_19_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/731bac493cfd4bb584ea962afb1ea31b.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_19,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 6]: https://img-blog.csdnimg.cn/a596673002c74970bf4d6ca1d635ab0e.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 7]: https://img-blog.csdnimg.cn/9d0b63c450c545179c92ea319fdb520d.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_19_color_FFFFFF_t_70_g_se_x_16 1]: https://img-blog.csdnimg.cn/0c0f5ad756ec460f909a1d01da5b22a9.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_19,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_11_color_FFFFFF_t_70_g_se_x_16 2]: https://img-blog.csdnimg.cn/7c03ac8b68bb4ac7af0d11df1df013df.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_11,color_FFFFFF,t_70,g_se,x_16
[3b07b9645bee481fa56f728a204ed8ca.png]: https://img-blog.csdnimg.cn/3b07b9645bee481fa56f728a204ed8ca.png
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 8]: https://img-blog.csdnimg.cn/444713c30cee4cc5b95b8bfc0ef6e046.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_20,color_FFFFFF,t_70,g_se,x_16
[86d7357a52fc48789fc092a805f2367e.png]: https://img-blog.csdnimg.cn/86d7357a52fc48789fc092a805f2367e.png
[8628b4c015654082be5f97fc7d99e95c.png]: https://img-blog.csdnimg.cn/8628b4c015654082be5f97fc7d99e95c.png
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_16_color_FFFFFF_t_70_g_se_x_16 1]: https://img-blog.csdnimg.cn/af87c0349a45483ca63f29bd1322bdc9.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_16,color_FFFFFF,t_70,g_se,x_16
[88656d505dbb45d28da0c0b0370892b5.png]: https://img-blog.csdnimg.cn/88656d505dbb45d28da0c0b0370892b5.png
[93b7a230996046d68b84bf2e59ae4fb2.gif_pic_center]: https://img-blog.csdnimg.cn/93b7a230996046d68b84bf2e59ae4fb2.gif#pic_center