JavaScript学习8：类、构造函数和原型、ES5新增方法

2022-11-12 15:47:44

文章目录

一、类

三个特性：封装性、继承性、多态性

ES6中的类和对象

基本使用：

    <script>
        //创建类 函数不用写function 不用加，分隔
        class Star {
            constructor(uname, age) { //构造函数 new的时候自动调用，返回实例对象
                this.uname = uname;
                this.age = age;
            }
            sing(song) {
                console.log(this.uname + song);
            }
        }

        //创建对象
        var lhm = new Star('vivian', 18);
        console.log(lhm.uname, lhm.age);
        lhm.sing("believe");
    </script>

类的继承

    <script>
        class Father {
            constructor(x, y) {
                this.x = x;
                this.y = y;
            }
            sum() {
                console.log(this.x + this.y);
            }
            say() {
                return '我是爸爸';
            }

        }
        class Son extends Father { //继承
            constructor(x, y) {
                super(x, y); //调用了父类中的构造函数 必须先写
                this.x = x;
                this.y = y;
            }
            say() {
                console.log(super.say() + '的儿子'); //调用父类中的函数
            }
            subtract() {
                console.log(this.x - this.y);
            }
        }
        var son = new Son(1, 2);
        son.sum(); //3
        son.say(); //就近原则 '我是爸爸的儿子'
        son.subtract(); //-1
    </script>

二、构造函数和原型（ES6之前）

实例成员和静态成员：

构造函数的问题

原型链

1.构造函数中的this指向对象实例
2.原型对象函数中的this指向调用者

原型对象的应用：

继承

    <script>

        function fun(x, y) {
            console.log(x + y);
            console.log(this);
        }
        var o = {
            name: 'vivian'
        };
        //1. call()可以调用函数
        //fun.call();//指向windows对象
        //2. call()可以改变这个函数的this指向
        fun.call(o, 1, 2);//指向o对象
    </script>

借用构造函数继承父类型属性

借用构造函数继承父类型方法
不能直接赋值：Son.prototype = Father.prototype

应该：Son.prototype = new Father();
同时注意 Son.prototype.constructor = Son;

三、ES5新增的方法

数组方法
1.forEach 迭代（遍历）数组
2.filter 筛选数组返回一个数组（所有符合条件）
3.some 查找数组中是否有满足条件的元素返回一个布尔值

    <script>
        //注意以下方法都有(value, index, array)三个参数，可以省略不用的
        //forEach 迭代（遍历）数组
        var arr = [1, 2, 3];
        var sum = 0;
        arr.forEach(function (value, index, array) {
            console.log('每个数组元素' + value);
            console.log('下标' + index);
            console.log('整个数组' + array);
            sum += value; //6
        })
        
        //filter 筛选数组 返回一个数组 （所有符合条件）
        var arr1 = [12, 66, 78, 1];
        var newArr = arr1.filter(function (value, index, array) {
            return value >= 20;
        })
        console.log(newArr); //[66, 78]
        
        //some 查找数组中是否有满足条件的元素 返回一个布尔值
        //找到第一个元素就停止查找
        var arr2 = [10, 30, 4];
        var flag = arr2.some(function (value) {
            return value >= 20;
        })
        console.log(flag); //true
    </script>

字符串方法
1.trim 方法去除字符串两侧空格

        //trim 方法去除字符串两侧空格
        var str = '   vi vi an   ';
        var str1 = str.trim();
        console.log(str1); //vi vi an

对象方法
1.Object.keys(obj) 用于获取对象自身所有的属性
类似于for in

        //Object.keys(obj) 用于获取对象自身所有的属性
        //返回一个由属性名组成的数组
        var obj = {
            id: 1,
            uname: 'vivian',
            age: 18
        }
        var arr = Object.keys(obj);
        console.log(arr); //["id", "uname", "age"]

2.Object.defineProperty() 定义对象中新属性或修改原有的属性

        //Object.defineProperty() 定义对象中新属性或修改原有的属性
        Object.defineProperty(obj, 'num',{
            value: 1000
            //这里的writable 、configurable和 enumerable 都为false
        })
        Object.defineProperty(obj, 'id',{
            writable: false //不允许修改 默认false
        })
        Object.defineProperty(obj, 'address',{
            value: 'china',
            enumerable: false, //不允许被枚举 默认false
            configurable: false //不允许被删除和修改 默认为false
        })

码农公寓

文章目录

一、类

二、构造函数和原型（ES6之前）

三、ES5新增的方法

相关文章