Class

 目录

定义一个类

getter 函数 和 setter 函数

静态方法

类的继承

拖拽 demo

 

定义一个 Person 类

class Person{
    constructor(name,age){
        this.name = name;
        this.age = age;
    }
    showName(){
        return `名字为: ${this.name}`;
    }
    showAge(){
        return `年龄: ${this.age}`;
    }
}
let p1 = new Person('Strive', 18);
console.log(p1.showName());　　// 名字为: Strive

// Person 类也是一个函数
typeof(Person)  === "function"  // true

 constructor 是类默认的方法，这个方法在 new 操作创建实例时自动执行，默认返回一个 this 对象。而 showName 和 showAge 函数是自定义的函数

类也可以写成一个表达式  

const Preson = class{
    constructor(arg){
       // ...
    }
}

 

取值函数 getter 和 存值函数 setter

class MyClass {
  constructor() {
    // ...
  }
  get prop() {
    return 'getter';
  } // 取值
  set prop(value) {
    console.log('setter: '+value);
  } // 存值
}

let inst = new MyClass();

inst.prop = 123;　　
// setter: 123

inst.prop
// 'getter'

在属性前面有 get 和 set 关键字后，调用该属性时，自动调用隐藏函数 getter/setter，

 

 静态方法

如果在一个方面前面加上 static 关键字，那就表示这个方法是类的 静态方法，静态方法不会被实例继承，而是通过类进行调用

class Person{
    constructor(){  }
    fun1(){
        return '这是fun1方法';
    }
    static fun2(){
        return '这是静态方法';
    }
}

let p1 = new Person();

console.log(Person.fun2());　// "这是静态方法"

静态方法 和 非静态方法可以重名

静态方法可以继承给子类直接调用，也可以从 super 对象上调用

 

类的继承

使用关键字 extends。下面的定义了Person1 和 Person 2 两个类，其中 Person2 使用了关键字 extends 继承了 Person1 中的所有属性和方法

class Person1{
    constructor(name, age){ 
        this.name = name;
        this.age = age;
    }
    fun1(){
        return 1;
    }
}

class Person2 extends Person1 {
    constructor(name, age, hobby){
        super(naem, age);   // 必须执行super 函数
        this.hobby = hobby;
    }
    fun2(){
        return 2;
    }
};

let p2 = new Person2();
// 调用父类中继承来的方法
console.log(p2.fun1()); // 1

在子类的 constructor 中必须执行 super 函数，代表执行父类的构造函数。如果子类不写 constructor 函数，那么在 new 操作时自动执行 constructor 函数，并在里面执行 super 函数

super 函数只能用在子类的构造函数之中，用在其它地方就会报错

如果子类存在和父类一样的方法，实例调用的该方法时候会直接调用子类的方法，这种情况下想调用父类的方法可以使用 super 对象

// 这是子类中的 fun1 函数
fun1(){
    let number = super.fun1(); // 执行 super 对象中的 fun1 函数
    return number + 1;  
}

 

最后使用 Class 实现一个鼠标拖动的 demo

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>拖拽</title>
    <style>
        .div {
            position: absolute;
            top: 100px;
            left: 100px;
            width: 80px;
            height: 80px;
            border-radius: 50%;
            background: green;
            text-align: center;
            line-height: 80px;
            color: #fff;
        }
    </style>
</head>

<body>

    <div class="div">拖拽</div>

    <script>
        class Drag {
            constructor(id) {
                this.oDiv = document.getElementsByClassName(id)[0];
                this.disX = 0;
                this.disY = 0;
                this.init();
            }
            init() {
                this.oDiv.onmousedown = function (ev) {
                    this.disX = ev.clientX - this.oDiv.offsetLeft;
                    this.disY = ev.clientY - this.oDiv.offsetTop;

                    this.oDiv.style.border = '2px solid red';

                    document.onmousemove = this.fnMove.bind(this);
                    document.onmouseup = this.fnUp.bind(this);

                    return false;
                }.bind(this);
            }
            fnMove(ev) {
                this.oDiv.style.left = ev.clientX - this.disX + 'px';
                this.oDiv.style.top = ev.clientY - this.disY + 'px';
            }
            fnUp() {
                document.onmousemove = null;
                document.onmouseup = null;
                this.oDiv.style.border = '';
            }
        }

        //调用
        new Drag('div');
    </script>
</body>

</html>

 

posted on 2019-06-08 20:18  盗将行  阅读(358)  评论(0)  编辑  收藏  举报

导航