JS基础入门篇（三十六）—面向对象（ 三 ）

头像
梁志芳
    阅读 5 分钟
    3

    1.class

    class es6 中 为 关键字用来声明 一个 类

    1.只能通过new调用
2.不存在变量提升
3.多个方法之间直接书写,不需要,隔开
4.类的方法是直接定义在类的原型上的
5.定义在类中的方法不可枚举
6.Object.keys() 和 Object.values()

    下面是详细解释

    1.只能通过new调用

    <script>

//--------------- class ------------------
  class Fn{}
//Fn();  //直接调用会报错
  var f=new Fn();//必须通过new调用
  console.log(f);//Fn {}


//--------------- function ------------------
  function go() {}
  go();//函数可以直接调用
</script>

    2.不存在变量提升

    <script>
//---------------function解析时，会放到前面。所以不会报错-------------
go(); // 函数声明 可以 先调用 再声明
function go() {}// 函数声明

//---------------class解析时，不会放到前面。所以会报错-------------
var f=new Fn();//报错  Fn is not defined
class Fn{}
</script>

    3.多个方法之间直接书写 不需要,隔开

    <script>
 class Fn{
        constructor(name,age){
            this.name=name;
            this.age=age;
        }
        say(){
            console.log("我会说话");
        }
    }

    var f=new Fn("kite","18");
    console.log(f.name);//kite
    console.log(f.age);//18
</script>

    解析：其中constructor方法和say方法之间并没有用逗给开。因为不是对象，所以不需要用逗号隔开。

    4.类的方法是直接定义在类的原型上的

    <script>
  class Fn{
        constructor(name,age){
            this.name=name;
            this.age=age;
        }
        say(){
            console.log("我是"+this.name);
        }
    }

    var f1=new Fn("kite","18");
    var f2=new Fn("Mary","28");
    f1.say();//我是kite
    f2.say();//我是Mary
    console.log(f1.say===f2.say);// true
    console.log(f1.hasOwnProperty("say"));//false 表示不是自身 身上的方法
</script>

    5.定义在类中的方法不可枚举

    class P {
        constructor(name,age){
            this.name = name;
            this.age = age;
        }
        say(){ // 这个say 是 挂在 P 类 的原型上的方法
            console.log("我会说话.我的名字叫:"+this.name);
        }
    };
    
    var p1 = new P("kite",29);
    for( var attr in p1 ){
        console.log( attr );
        //运行结果为
        //name
        //age
    }

    6.Object.keys()和Object.values()
    除了通过for in来遍历对象中的属性，可以通过Object.keys()得到对象的属性名，可以通过Object.keys()得到对象的属性值

    <script>
class P {
        constructor(name,age){
            this.name = name;
            this.age = age;
        }
        say(){ // 这个say 是 挂在 P 类 的原型上的方法
            console.log("我会说话.我的名字叫:"+this.name);
        }
    };
    
    var p1 = new P("kite",29);

    console.log( Object.keys( p1 ) ); //["name", "age"]
    console.log( Object.values( p1 ) ); //["kite", 29]
</script>

    2.继承-extends

    继承
    extends
注意:
    构造函数中调用super

    举例说明

    <script>
    //父类
    class Fn{
        constructor(name,age){
            this.name=name;
            this.age=age;
        }
        say(){
            console.log("我的名字是"+this.name);
        }

    }

    //子类
    class F extends Fn{
        constructor(name,age,job){
            super(name,age);
            this.job=job;
        }
        say(){
            console.log("我的名字是"+this.name,"我的工作是"+this.job);
        }
        eat(){
            console.log("我喜欢吃西瓜");
        }
    }

    //子类实例化
    var f=new F("zm",18,"worker");
    f.say();//我的名字是zm 我的工作是worker
    f.eat();//我喜欢吃西瓜

</script>

    3.自定义属性

    自定义事件
创建:new CustomEvent(事件名,事件对象设置参数);
事件对象设置参数 {bubbles:true}//是否设置冒泡
绑定:元素.addEventListener
触发:元素.dispatchEvent(自定义事件实例,事件名)

    举例说明：

    <body>
<div id="box">box</div>
<script>
    var box = document.getElementById("box");
    //创建自定义属性
    var c = new CustomEvent("abc", {bubbles: true});
    //自定义属性绑定
    box.addEventListener("abc", function () {
        console.log(1);
    });
    box.addEventListener("abc", function () {
        console.log(2);
    });
    //自定义属性触发
    box.dispatchEvent(c, "abc");
</script>
</body>

    通过函数模拟自定义函数：

        <script>
        var obj={};

        //addFn函数作用：
        // 用空对象存储 事件名 和 函数
//         以以下这种方式存储
//        {
//            abc:[fn1,fn2];
//            cfd:[fb1,fb2];
//        }
        function addFn( EventName,fn ) {
            if(!obj[ EventName]){
                obj[ EventName]=[];
            }
            obj[ EventName].push(fn);
        }

        //trigger函数作用：
        //通过for循环触发函数
        function trigger(EventName) {
            for(var i=0;i<obj[ EventName].length;i++){
                obj[ EventName][i]();
            }
        }

        addFn("abc",function () {console.log(1);});
        addFn("abc",function () {console.log(2);});
        addFn("abc",function () {console.log(3);});

        trigger("abc");
</script>

    以面向对象的方式 写 自定义事件：

    <script>
        class CustomEv{
            constructor(){
                this.obj = {};
            }
            addFn( EventName,fn ) {
                if(!this.obj[ EventName]){
                    this.obj[ EventName]=[];
                }
                this.obj[ EventName].push(fn);
            }
            trigger(EventName) {
                for (var i = 0; i < this.obj[EventName].length; i++) {
                    this.obj[EventName][i]();
                }
            }
        }

        var c=new CustomEv();
        c.addFn("abc",function () {console.log(1);});
        c.addFn("abc",function () {console.log(2);});
        c.addFn("abc",function () {console.log(3);});

        c.trigger("abc");
</script>
    javascriptcsshtml
    梁志芳
    159 声望58 粉丝

    正在学习CSS+HTML+JS

    « 上一篇
    JS基础入门篇（三十五）—面向对象（二）
    下一篇 »
    JS基础入门篇（四十三）— ES6（一）

    引用和评论

    推荐阅读
    头像
    git 基本命令

    梁志芳赞 3阅读 1.7k

    头像
    腾讯新闻中心首页改版啦

    小蚊酱赞 11阅读 9.3k评论 7

    头像
    网页设计的垂直居中

    寒青赞 39阅读 4.6k评论 3

    头像
    CSS团队协作规范

    寒青赞 36阅读 3.9k

    头像
    前端如何入门 Go 语言

    robin赞 26阅读 7.7k评论 8

    头像
    100个React最佳实践小技巧

    夕水赞 17阅读 2.6k评论 4

    头像
    前端开发工具

    寒青赞 15阅读 4.7k

    0 条评论
    得票最新