美文网首页以JavaScript之名
JavaScript基础⑤ES6中的面向对象

JavaScript基础⑤ES6中的面向对象

作者: 逝我 | 来源:发表于2016-11-30 11:48 被阅读134次

    接续上篇JavaScript基础④基于原型的面向对象编程

    前言

    面向对象语言的基本特征:封装,继承,多态 。 这是我们在学Java的时候,首先映入眼帘的一句话 。封装 - 顾名思义就是将一些东西(属性,方法)藏起来 , 不让外部调用的人知道 , 防止出现使用不当 。 继承 - 万事万物皆为天地所化 , 同出一门而变化万千 , 既有相同之处又有差异之所 。继承就是将共有的特征特质向下传递 , 父传子,子传孙 , 孙又传孙 , 子子孙孙无穷尽也 。多态 - 万物终有始焉 , 而好事者归为类 , 譬如:鸟类 , 人类 , 然,多态始于继承 , 子继承有父之功 , 而可完成父之功也 。

    在上篇文章中 , 我们大致了解了JavaScript基于引用的面向对象特征 , 但终归写起来比较麻烦 , 在ES6标准中 , 已经可以使用class作为类的关键字了 , 有了常规的面向的的写法了 , 但内部实现原理差不多 , 只是添加了class及一些面向对象的語法糖 。使用的时候 , 需要考虑兼容性。

    ES6面向对象

    ECMAScript是一种由Ecma国际通过ECMA-262标准化的脚本程序设计语言。这种语言在万维网上应用广泛,它往往被称为JavaScript或JScript,但实际上后两者是ECMA-262标准的实现和扩展。 -- 百度百科

    基于原型的面向对象

    // 基于原型 , 创建一个Person类
    function Person() {
        // 类的属性
        Person.prototype.name = "zeno";
        Person.prototype.age = 20;
        Person.prototype.job = "Software Engineer";
        // 类的方法
        Person.prototype.sayHello = function(){
                    alert("Hello "+this.name);
                };
    }
    
    // 创建Person对象
    var person = new Person();
    alert(person.name); // out : zeno
    person.sayHello(); // out : Hello zeno
    

    基于原型的面向对象 , 写法上比较繁琐 , 需要使用原型对象属性 。

    ES6 对象写法

    class Person {
        constructor() {
            var name ;
        }
        doSomthing() {
            console.log('es6面向对象');
        }
    }
    
    var p = new Person();
    p.doSomthing(); // out : es6面向对象
    

    ES6标准的面向对象语法 ,比较像java的写法 , 但又有些不同 , JavaScript中不能定义类属性 。

    尝试类属性

    class Person {
        var name ;
    }  // out : es6.html:29 Uncaught SyntaxError: Unexpected identifier
    

    在JavaScript中不支持这种写法。

    继承 - extends

    可以看出和Java的语法有点相像了 , 不过这种写法好像很多语言都实现了 , 例如PHP

    // 父类
    class Person {
        constructor() {
            this.name = 'zeno';
        }
        doSomthing() {
            console.log('es6面向对象');
        }
    }
    
    // 子类
    class Human extends Person {
        constructor() {
            super();
            this.job = 'software enginner' ;
        }
    }
    
    
    var h = new Human();
    console.log(h.name); // zeno
    console.log(h.job); // software enginner
    console.log(h.doSomthing()); // 会调用两次 ,第一次es6面向对象 , 第二次undefined
    

    调用console.log(h.doSomthing());会调用两次 , 初步估计是两个类,各实例化了一次 , 每个对象调用一次doSomthing() , 父类输出 , 子类因没有这个方法 , 而产生了undefined 。但我在子类实现了doSomthing()方法 , 结果还是执行了两次 , 这让我不明就里 , 暂且搁置 , 希望知道的有心人士解惑之 。

    多态

    JavaScript天生支持多态 , 因为JavaScript是动态语言,没有类型的向上向下转性 , 方便了很多 。

    封装

    JavaScript在ES6中貌似支持封装 , 但实验了一下 , 并不可以 ,没有语法上的支持 , 就目前来看 , 这是JavaScript最弱的一部分了 。

    不可行的封装

    class Dog {
        constructor() {
            this._name = 'lily';
    
             this.age = 10 ;
        }
    
        getDogName() {
            return this._name;
        }
    
        get Age() {
            return this.age ;
        }
    
    }
    
    var d = new Dog();
    console.log(d._name); // out : lily 可以访问到
    

    JavaScript ES6中 , 默认以下划线开头的属性为私有属性或方法 , 然而并没有什么卵用 , 一样可以访问 。

    结语

    JavaScript在不断的发展 , 尤其这几年 , 发展尤其迅速 , 各种库 , 如雨后春笋般迸发 , 并应用于各个行业和领域 ,并一度向全栈发展 。

    相关文章

      网友评论

        本文标题:JavaScript基础⑤ES6中的面向对象

        本文链接:https://www.haomeiwen.com/subject/yxozpttx.html