ES6之class和继承的几种

最新推荐文章于 2022-08-01 00:02:37 发布
最新推荐文章于 2022-08-01 00:02:37 发布
阅读量424 收藏
点赞数
分类专栏： ES6 文章标签： javascript es6
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42681295/article/details/107471771
版权

ES6之class和继承的几种

class类

    // class 关键字表明 类的生命  注意：javascript没有 class 
    // class 的作用 ：面向对象编程的工具
    // 这个语法糖,语义化更好,编程的复杂度也有降低;

    // 1、构造函数
    // 2、原型对象
    function Factory() {
      this.a = "我是factory里面的一条数据"
    }
    Factory.prototype.init = function () {
      console.log("这是一个功能")
    }
    var fac = new Factory()
    fac.init()


    // class 包含了两个部分
    // 1、构造函数
    // 2、原型方法
    class Factory {
      // 构造函数变成了统一的名称 : constructor
      constructor() {
        this.a = "这是一条数据"
      }
      init() {
        console.log("这是一个功能")
      }
    }
    // 调用 class调用 和 构造函数+原型的调用 一样
    var fac = new Factory()
    fac.init()

拖拽案例

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    #box1,
    #box2 {
      width: 100px;
      height: 100px;
      background: skyblue;
      position: absolute;
      left: 0;
      top: 0;
    }

    #box2 {
      background: springgreen;
      left: 200px;
    }
  </style>
</head>

<body>
  <div id="box1"></div>
  <div id="box2"></div>
  <script>
    class Drag {
      constructor(selector) {
        // 选择拖拽的元素
        this.ele = document.querySelector(selector)
        // 调用事件
        this.bindEvent()
      }
      bindEvent() {
        let self = this
        // 鼠标按下事件
        self.ele.onmousedown = function (evt) {
          let e = evt || window.event
          // es6的解构赋值 
          let { offsetX: x, offsetY: y } = e
          document.onmousemove = function (evt) {
            let e = evt || window.event
            // 鼠标的移动时坐标
            // 为了让元素跟着鼠标点击的位置而不是跟着鼠标的 client 走
            self.eleMove(e.clientX - x, e.clientY - y)
          }
        }
        // 当鼠标抬起事件
        document.onmouseup = function () {
          // 清除鼠标移动事件
          document.onmousemove = null
        }
      }
      // 移动坐标
      eleMove(x, y) {
        this.ele.style.left = x + "px"
        this.ele.style.top = y + "px"
      }
    }
    var drag1 = new Drag("#box1")
    var drag2 = new Drag("#box2")

  </script>
</body>

</html>

继承

1、es5继承

    // 继承 : 
    // 1. 构造函数里的方法,属性拿过来;
    // 2. 原型对象里的方法拿过来;

    // 继承 构造数里面功能和调用;

    // 其实构造函数就是加工实例对象的工厂=> 给实例对象添加属性。 
    // javascript里面提供的构造函数继承方式灵感来自代工;

    function Father() {
      this.a = "hello world";
      this.b = "你好世界";
    }
    // new Father();
    // 1. 创建Father类的实例对象;
    // 2. 给Father类创建的 实例对象 上面添加属性 a 和 属性 b;
    function Son() {
      // 方便查看去个别名，实际上没有用;
      var son_ins = this;
      // 狸猫换太子 用call指向;      
      Father.call(son_ins);
    }
    var son = new Son();
    console.log(son)
    // 1. 创建 Son 的实例对象;
    // 2. 把Son的实例放在Father的构造函数里加工;


    // 【 带有参数的继承 】;
    function Father(a, b) {
      this.a = a;
      this.b = b;
    }
    function Son(son_a, son_b) {
      // 方便查看去个别名，实际上没有用;
      var son_ins = this;
      // 狸猫换太子;    
      // call形式的参数传递;
      // Father.call(son_ins , son_a , son_b );
      // apply形式的参数传递;  因为使用了 arguments 所以可以省略形参;
      // arguments => [ son_a , son_b ]
      Father.apply(son_ins, arguments)
    }
    var son = new Son("hello world", "你好世界");


    // 【 原型继承 】 
    //  1. for in 继承; ( 浅克隆继承 )
    //  2. 原型链继承;
    function Father() { };
    Father.prototype.init = function () {
      console.log("hello world")
    }
    function Son() { }
    // 克隆人家地址;
    for (var attr in Father.prototype) {
      // 给 Son 的原型写入 Father 的地址;
      Son.prototype[attr] = Father.prototype[attr];
    }
    var son = new Son();
    // console.log(son);
    son.init();

在这里插入图片描述

原型继承 1、原型链继承

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    // 上头有人;
    function Father() {
    }
    Father.prototype.init = function () {
      console.log("这是father里面的功能")
    }
    Father.prototype.show = function () {
      console.log("这是father里面的功能")
    }
    function Son() { }

    // 因为 father 的实例对象有指针指向 Father.prototype 那么此时可以把
    //  son原型里面的原型指针替换成 指向fahter原型对象的原型指针;

    // 我们可以直接把Son 的原型对象替换成 Father 的实例对象;
    Son.prototype = new Father();
    Son.prototype.show = function () {
      console.log("这是son里面的功能")
    }

    // 原型继承的方法，不要在构造函数里面写东西;
    var son = new Son();
    console.log(son) 
    
    son.init();
    // 在子类原型对象上 new 父类的构造函数即可完成原型继承;
    son.show();
    // 因为Son的原型对象方法show距离更近，所以我们会优先访问到 Son 原型上的show方法;
    // 就近原则

  </script>
</body>

</html>

在这里插入图片描述

原型继承 2、for in 继承，浅克隆继承 （拖拽案例）

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    #box,
    #box2 {
      width: 100px;
      height: 100px;
      background: skyblue;
      position: absolute;
      left: 0;
      top: 0;
    }

    #box2 {
      background: springgreen;
      left: 200px;
    }
  </style>
</head>

<body>
  <div id="box"></div>
  <div id="box2"></div>

  <script>
 function Drag(selector) {
      // 拖拽的元素;
      this.ele = document.querySelector(selector);
      this.bindEvent();
    }
    // tip : 方法分割是没有逗号的;
    Drag.prototype.bindEvent = function () {
      var self = this;
      self.ele.onmousedown = function (evt) {
        // 拖拽开启;
        // console.log("拖拽开启");
        let e = evt || event;
        // 获取 offsetX 和 offsetY;
        let { offsetX: x, offsetY: y } = e;
        document.onmousemove = function (evt) {
          let e = evt || event;
          // 拖拽进行中;
          // console.log("拖拽进行中");
          // 为了让元素跟着鼠标点击的位置走而不是跟着鼠标的client 走;
          self.eleMove(e.clientX - x, e.clientY - y);
        }
      }
      this.ele.onmouseup = function () {
        // console.log("拖拽结束");
        document.onmousemove = null;
      }
    }

    Drag.prototype.eleMove = function (x, y) {
      this.ele.style.left = x + "px";
      this.ele.style.top = y + "px";
    }

    function BoundaryDrag(selector) {
      var son_ins = this;
      Drag.call(son_ins, selector);
    }

    for (var attr in Drag.prototype) {
      BoundaryDrag.prototype[attr] = Drag.prototype[attr];
    }
    // 使用的时候注意下 : 如果在构造函数里面有方法的调用，那么请把调用放在继承之后。
    BoundaryDrag.prototype.eleMove = function (x, y) {
      x = x < 0 ? 0 : x;
      this.ele.style.left = x + "px";
      this.ele.style.top = y + "px";
    }
    var drag = new BoundaryDrag("#box");
   </script>
</body>

</html>

2、es6继承（拖拽案例）

ES6 继承方式 : extends 关键字; 表示类的整体继承

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    #box1,
    #box2 {
      width: 100px;
      height: 100px;
      background: skyblue;
      position: absolute;
      left: 0;
      top: 0;
    }

    #box2 {
      background: springgreen;
      left: 200px;
    }
  </style>
</head>

<body>
  <div id="box1"></div>
  <div id="box2"></div>

  <script>
    class Drag {
      constructor(selector) {
        // 拖拽的元素;
        this.ele = document.querySelector(selector);
        this.bindEvent();
      }
      // tip : 方法分割是没有逗号的;
      bindEvent() {
        let self = this;
        self.ele.onmousedown = function (evt) {
          // 拖拽开启;
          // console.log("拖拽开启");
          let e = evt || event;
          // 获取 offsetX 和 offsetY;
          let { offsetX: x, offsetY: y } = e;
          document.onmousemove = function (evt) {
            let e = evt || event;
            // 拖拽进行中;
            // console.log("拖拽进行中");
            // 为了让元素跟着鼠标点击的位置走而不是跟着鼠标的client 走;
            self.eleMove(e.clientX - x, e.clientY - y);
          }
        }
        document.onmouseup = function () {
          // console.log("拖拽结束");
          document.onmousemove = null;
        }
      }
      eleMove(x, y) {
        this.ele.style.left = x + "px";
        this.ele.style.top = y + "px";
      }
    }

    // ES6 继承方式 :  extends 关键字; 表示类的整体继承;
    // 有边界的拖拽; 
    class BoundaryDrag extends Drag {
      // 继承之后更改分成两种 : 
      // 1. 构造函数里面的更改;
      // 2. 原型对象上方法的更改;
      constructor(selector) {
        // 拖拽的元素;
        // super相当于父级类的构造函数;
        super(selector);
        // 编写自己的代码;
        console.log("带有边界检测的拖拽");
      }

      // 构造函数继承 : 
      // 1. 调用super; tip : 如果原本父类有参数，那必须传入参数;
      // 2. 加入自己更新的代码;

      // 1、在原型对象上方法的更改，更多的是使用覆盖的模式进行更改;
      eleMove(x, y) {
        x = x < 0 ? 0 : x;
        this.ele.style.left = x + "px";
        this.ele.style.top = y + "px";
      }

      // 2、注意以下 内部更新代码; 并不是适用于所有的开发场景;
      eleMove(x, y) {
        // 添加边界检测功能;
        x = x < 0 ? 0 : x;
        // 表示调用父类的eleMove 原型方法;
        super.eleMove(x, y);
      }
    }
    let drg1 = new BoundaryDrag("#box1");
    let drg2 = new BoundaryDrag("#box2");

  </script>
</body>

</html>
牛先森家的牛奶
关注
专栏目录
ES6--class类（详解/看完必会）
蜗牛~~
02-22 1万+
ES6中class类的学习，看完必会
JS继承和原型链，ES6新继承（class，extends，super)
qq_44638443的博客
12-12 792
JS继承和原型链，ES6新继承（class，extends，super)
ES5、ES6的四种继承方法
L863683305的博客
01-27 1180
ES5、ES6的四种继承 众所周知，在ES6之前，前端是不存在类的语法糖，所以不能像其他语言一样，使用extends关键字就搞定继承关系，需要一些额外的方法来实现继承。 一. 原型链继承 function Parent(){ this.name = 'mortal' } Parent.prototype.getName = function(){ console.log(this....
ES6中Class的用法和继承
Mybells
06-16 260
1. 类的实例 生成类的实例的写法，与 ES5 完全一样，也是使用new命令。前面说过，如果忘记加上new，像函数那样调用Class，将会报错。 class Point { // ... } // 报错 var point = Point(2, 3); // 正确 var point = new Point(2, 3); 与 ES5 一样，实例的属性除非显式定义在其本身（即定义在this...
JS高级 之 ES6 实现继承
玄鱼殇
07-21 1555
JS高级 之 ES6 实现继承
ES6——class类实现继承
热门推荐
qq_49002903的博客
08-01 3万+
上面示例代码中子类中有两句重复的逻辑语句，在父类中我们已经声明过了，在子类中再写一次就冗余了，让我们接下来看看有没有什么好的解决办法。这就是上面的代码冗余的问题解决办法可以将name和age写到super参数中就可以直接继承父类的逻辑，减少冗余代码。注意在子类（派生类）的构造函数中使用this或者返回默认对象之前，必须先通过super调用父类的构造函数！子类继承父类之后，子类中也可以直接调用父类的方法（最上方示例代码中有涉及这里就不再做展示了）。中，以创建一个类，该类是另一个类的子类。...
ES6之类（class）和继承
VVVZCS的博客
09-14 1115
原来我们写面向对象编程，都是在通过构造函数，然后在原型上写的，比如： &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt; &l
JS继承的7种方式，ES5，ES6继承的区别
程序员良仔
05-29 1148
前言 目录前言一、原型链继承二、借用构造函数继承三、组合继承四、原型式继承五、寄生式继承六、寄生组合式继承七、 ES6通过class的extends实现继承八、ES5，ES6继承的区别九、总结 一、原型链继承 二、借用构造函数继承 三、组合继承 四、原型式继承 五、寄生式继承 六、寄生组合式继承 七、 ES6通过class的extends实现继承 八、ES5，ES6继承的区别 九、总结 代码下载(p-react-router分支)：https://gitee
ES6 更易于继承的类语法的使用
10-17
需要注意的是，虽然ES6中的class提供了一种更加面向对象的方式来组织代码，但它并没有完全改变JavaScript基于原型的继承模型。在JavaScript引擎内部，class关键字背后的实现仍然是基于原型链的。使用class关键字定义...
ES6 （二十一）Class 的基本语法、constructor 方法、static关键字（静态方法）、私有方法和私有属性#
qq_43456781的博客
08-08 429
ES6 （二十一）Class 的基本语法、constructor 方法、static关键字（静态方法）、私有方法和私有属性# 文章目录ES6 （二十一）Class 的基本语法、constructor 方法、static关键字（静态方法）、私有方法和私有属性#1. 简介类的由来constructor 方法类的实例取值函数（getter）和存值函数（setter）属性表达式Class 表达式注意点**（1）严格模式****（2）不存在提升****（3）name 属性****（4）Generator 方法****
es6中class类的全方面理解（一）
张培跃的个人博客
05-07 1199
传统的javascript中只有对象，没有类的概念。它是基于原型的面向对象语言。原型对象特点就是将自身的属性共享给新对象。这样的写法相对于其它传统面向对象语言来讲，很有一种独树一帜的感脚！非常容易让人困惑！ 如果要生成一个对象实例，需要先定义一个构造函数，然后通过new操作符来完成。构造函数示例： //函数名和实例化构造名相同且大写（非强制，但这么写有助于区分构造函数和普通函数） func...
ES6类和继承
涂涂
10-31 6030
首先看代码 class Person { constructor(name){ console.log(`构造函数执行了,${name}`) } } let p1= new Person('jona') 此处，调用new的时候就自动执行了构造函数，所以接收参数也是在构造函数出接收 class Person { constructor(name){ ...
ES6 class 类 extends 继承 super
weixin_41796631的博客
04-07 1618
class person{ constructor(age,sex){ this.age=age this.sex=sex this.hobby="running" this.name="ling" } say(word){ alert(word) } } let ling=new person() li...
Class多种继承方式
runzhi的博客
09-01 1015
// class 的多种继承方式 // 继承1 -- 原型链继承：子类的prototype为父类的实例 function Person() { this.name = "person" this.arr = [1, 2]//引用类型 } Person.prototype.printName = function () { console.log(this.name) } function Student() { this.name="student" } Student.p
es6中class继承的坑
kellywong的博客
11-23 1509
1. es6继承的过程 ES6 的继承机制和ES5完全不同，实质是先将父类实例对象的属性和方法，加到this上面（所以必须先调用super方法），然后再用子类的构造函数修改this。在子类的构造函数中，只有调用super之后，才可以使用this关键字，否则会报错。这是因为子类实例的构建，基于父类实例，只有super方法才能调用父类实例。 2. super关键字 super作为函数调用时，代表父类...
ES6中class类的extends继承
weixin_34361881的博客
11-28 196
为什么80%的码农都做不了架构师？>>> ...
ES6 class的继承使用细节
小红帽的博客
04-28 8833
ES6 class的继承与java的继承大同小异，如果学过java的话应该很容易理解，都是通过extends关键字继承。 class Animal{ constructor(color){ this.color = color; }; } class Bear extends Animal{ constructor(){ super(); } } 其余的就不多说了，这里着重讲一
ES6的8种基本属性
manongshy的博客
11-03 1万+
目录 1.ES6介绍 2.变量 3.类和对象的改进 4.函数相关 5.数组相关 6.字符串相关 7.新的数据类型 8.proxy 代理 9.Generator 10.promise 11.async 12.Iterator和for-of循环 课程内容 1.ES6介绍 q.什么是ES6 ES6是ECMA Script 6.0的简称, 就是语言最新的标准, 发布与15年左右 ...
前端进阶攻略之ES6中的class类继承extends与super
zm17671443092的博客
08-31 1178
ES6中的class类继承extends与super 一.extends与super的基本语法 1、类的继承 extends 类可以继承另外一个类。这是一个非常棒的语法，在技术上是它基于原型继承实现的。为了继承另外一个类，我们需要在括号 {…} 前指定 “extends” 和父类，语法如下： class Animal{ constructor (type,name,sex,age){ this.type=type;
es6 class
最新发布
10-13
ES6引入了class关键字来创建类，这是JavaScript面向对象编程的一种新的语法糖。它让代码看起来更像传统面向对象语言，简化了类的定义。一个基本的ES6类由以下几个部分组成： 1. **Class声明**：`class ClassName { ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值