【JavaScript】ES5 / ES6(面向对象)

1. 创建类

    <script type="text/javascript">
        class Student {
            constructor (name, id){
                this.name = name;
                this.id = id;
            }
        }
        let ming = new Student("xiaoMing", 21);
        let An = new Student("xiaoBing", 20);
        console.log(ming.name + " \'id is " + ming.id);
        console.log(An.name + " \'id is " + An.id);
    </script>

2. 类的方法

    <script type="text/javascript">
        class Student {
            constructor (name, id){
                this.name = name;
                this.id = id;
            }
            sing() {
                console.log(this.name + " sing a song");
            }
        }
        let ming = new Student("xiaoMing", 21);
        ming.sing();
    </script>

3. 类的继承

    <script type="text/javascript">
        class Father {
            constructor(x, y) {
                this.x = x;
                this.y = y;
            }
            sum() {
                console.log (this.x + this.y);
            }
        }
        class Son extends Father {
            constructor(x, y) {
                super(x, y);
            }
        }
        const fatherTemp = new Father(10, 20)
        console.log(fatherTemp);
        fatherTemp.sum();

        const sonTemp = new Son(40, 50);
        console.log(sonTemp);
        sonTemp.sum();
    </script>

4. 实例成员和静态成员

实例成员	静态成员
在构造方法中通过this添加成员	在构造方法本身上添加成员
只有通过实例化对象	只能通过构造函数访问对象

      <script type="text/javascript">
        function Student(studentName, studentId) {
            this.studentName = studentName;
            this.studentId = studentId;
        }
        Student.address = "sdnu.edu";

        let student = new Student("张三", 19);
        console.log(student.studentName);// 不能写student.address
        console.log(Student.studentName);// undefined
    </script>

5. 迭代遍历数组—forEach

    <script type="text/javascript">
        arr = ["小冰", "小吴", "小龙", "小众", "大中"];
        arr.forEach(function(item, index, arr){
            console.log(item);
            console.log(index);
            console.log(arr);
        });
    </script>

6. 筛选数组—filter

    <script type="text/javascript">
        let arr = [12, 14, 17, 9, 30, 2, 40];
        let resultArr = arr.filter(function(item, index, arr){
            return item > 16;
        })
        console.log(resultArr);
    </script>

7.查找数组中是否有满足条件的元素 —some

8. 去除字符串左右两端的空白

9. 定义或者修改对象新属性

10. 函数的定义

11. 函数内部的this

12. call apply bind

作者：Beyong　　　　
出处：Beyong博客
github地址：https://github.com/beyong2019

本博客中未标明转载的文章归作者Beyong有，欢迎转载，但未经作者同意必须保留此段声明，且在文章明显位置给出原文连接，否则保留追究法律责任的权利。