【ES6入门11】：类和对象

vboy1010 发布于2019-08-23 12:33 / 1101人阅读

摘要：基本定义和生成实例构造函数和实例继承继承继承传递参数方法，用来解决继承怎么传递参数怎么覆盖父类的参数的参数列表就是父类构造函数的参数列表，如果参数为空，就采用父类的参数默认值必须放在构造函数第一行继承传递参数是一个属性，不是方法是一个属性

1.基本定义和生成实例

{
    class Parent {
        constructor(name = "haha") {
            this.name = name;
        }
    }
    let parent = new Parent("v");
    console.log("构造函数和实例", parent); // Parent {name: "v"}
}

2.继承

{
    class Parent {
        constructor(name = "haha") {
            this.name = name;
        }
    }
    class Child extends Parent {

    }
    console.log("继承", new Child()); // Child {name: "haha"}
}

3.继承传递参数

{
    class Parent {
        constructor(name = "haha") {
            this.name = name;
        }
    }
    class Child extends Parent {
        constructor(name = "child") {
            // super()方法，用来解决 继承怎么传递参数（怎么覆盖父类的参数）
            // super的参数列表就是父类构造函数的参数列表，如果参数为空，就采用父类的参数默认值
            super(name); // super必须放在构造函数第一行
            this.type = "child";
        }
    }
    console.log("继承传递参数", new Child("hello")); // Child {name: "hello", type: "child"}
}

4.getter setter

{
    class Parent {
        constructor(name = "haha") {
            this.name = name;
        }
        // longName 是一个属性，不是方法
        get longName() {
            return "lu-" + this.name;
        }
        // longName 是一个属性，不是方法
        set longName(value) {
            this.name = value;
        }
    }
    let person = new Parent();
    console.log("getter", person.longName); // lu-haha
    person.longName = "hello";
    console.log("setter", person.longName); // lu-hello
}

5.静态方法

{
    class Parent {
        constructor(name = "haha") {
            this.name = name;
        }
        // static 关键字用来定义静态方法
        static tell() {
            console.log("do tell");
        }
    }
    // 静态方法，直接通过类去调用，不是通过实例
    Parent.tell(); // do tell
}

6.静态属性

{
    class Parent {
        constructor(name = "haha") {
            this.name = name;
        }
    }
    // 直接在类上定义静态属性
    Parent.type = "test";
    // 读取静态属性时，也是直接拿类读取
    console.log(Parent.type); // test
}

GPU云服务器云服务器类和对象 python类和对象 javascript类和对象 ES6入门

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/98713.html

JavaScript => TypeScript 类入门

摘要：静态属性静态方法目前支持静态方法表示，类属性及静态属性目前作为提案还未正式成为标准。在中，抽象类不能用来实例化对象，主要做为其它派生类的基类使用。不同于接口，抽象类可以包含成员的实现细节。中也是这样规定的抽象类不允许直接被实例化。尝试重写在此之前，通过《JavaScript => TypeScript 入门》已经掌握了类型声明的写法。原以为凭着那一条无往不利的规则，就可以开开心心的...

geekidentity 2019-08-21 17:44 评论0 收藏0
es6类和继承的实现原理

摘要：类的实现转换前转换后可见的底层依然是构造函数调用方法判断当前函数调用前是否有关键字。若构造函数前面没有则构造函数的不会不出现在的原型链上，返回。典型的寄生继承用父类构造函数的创建一个空对象，并将这个对象指向子类构造函数的。代表父类构造函数。在阅读文章之前，您至少需要对JavaScript原型继承有一定了解，如果觉得有所欠缺，可以先了解下我这篇文章：https://segmentfau...

haitiancoder 2019-08-23 14:35 评论0 收藏0
前端学习资源

摘要：提供了完整的环境，并且支持自定义域名指向，动态计算资源调整，可以完成各种应用的开发编译与部署。 react 新特性 react16 Context 算法相关图解排序算法(二)之希尔排序微信小程序微信小程序组件化的解决方案移动端尺寸基本知识浏览器前端必读：浏览器内部工作原理浏览器缓存原理解读浏览器加载css和js及dom解析之间的关系浏览器缓存 CSS学习移动web开发布局入...

zhisheng 2019-08-20 13:33 评论0 收藏0
简单了解一下ES6的修饰器

摘要：额，经历过上面的知识了解，应该能大概够理解这段代码了吧小结修饰器允许你在类和方法定义的时候去注释或者修改它。闲言一切都要从公司里的一位老哥给我看的一段代码说起。。。 @controller(/user) @auth @post(/login) async userLogin = (name, pass) => { @required // ... } 以下为对话：...

LancerComet 2019-08-22 16:25 评论0 收藏0
TypeScript基本知识点整理（看完绝对入门---真的！！）

摘要：因为中，如果函数没有返回值，则会默认返回。抽象类在运行时是可见的，可以通过判断。接口只能描述类的公共部分，不会检查私有成员，而抽象类没有这样的限制。本片文章主要讲述了TypeScript的基础知识点，这些是我个人的理解，如有不正确的地方请评论斧正！文章以下面的顺序讲解：变量类型函数类接口泛型命名空间在开始之前我们先装环境： npm i typescript -g //全局...

Yi_Zhi_Yu 2019-05-21 19:23 评论0 收藏0