ES6快速入门(三)

作者: 108N8 | 来源:发表于2017-02-27 11:46 被阅读2539次

    1. 面向对象

    a) 单例模式(单体模式)
         let name = 'Datura';
         let age = 18;
         let person = {
            name,
            age,
            sex:'Man',
            showName:function(){return this.name},
            showAge:function(){return this.age} 
        };
        alert(person.showAge());    //18
        alert(person.sex);    //Man
    
    b) 工厂模式
    es5的面向对象工厂模式:

    首先让我们一起来回一下es5面向对象的写法:
    i) 首先定义一个构造函数(此处是 Person);
    ii) 定义Person的“属性”,用this.xxx = xxx;
    iii) 把方法挂在原型上,Person.prototype.xxx = function(){ xxx };
    iiii) 调用

       function Person(name,age){
            this.name = name;
            this.age = age;
        }
        Person.prototype.showName = function(){
            return this.name;   
        };
        Person.prototype.showAge = function(){
            return this.age;    
        };
        var p1 = new Person('alice',18);
        alert(p1.showAge());   //18
    
    es5继承:
    //定义一个Person构造函数
       function Person(name,age){
            this.name = name;
            this.age = age;
        }
        Person.prototype.showName = function(){
            return this.name;   
        };
        Person.prototype.showAge = function(){
            return this.age;    
        };
    
        //Worker构造函数
        //继承属性 
        function Worker(name,age,job){
                  //改变this指向,继承Person的属性
            Person.apply(this,arguments);
                 //定义worker新的属性
            this.job = job; 
        }
        //继承方法
        Worker.prototype = new Person();
        //给worker指定“亲爹”
        Worker.prototype.construcotr = Worker;
        //定义worker新的方法
        Worker.prototype.showJob = function(){
            return this.job;    
        };
        //调用
        var p2 = new Worker('Datura',20,'boss');
        alert(p2.showName());   //Datura
        alert(p2.showJob());      //boss
    
    es6的面向对象工厂模式:

    i) 首先定义一个构造函数(此处是 Person),注意用class关键字而不是function;
    ii) 定义Person的“属性”,写在constructor(){this.xxx = xxx };
    iii) 定义方法,xxx () { xxx };
    iiii) 调用
    iiiii) 注意constructor和方法之间没有“;”,可以给属性初始值或默认值

        class Person{
            constructor(name,age=25){  //可以给属性初始值或默认值,正常es的function函数也可以给默认值
                this.name = name;
                this.age = age;
            }
            showName(){
                return this.name;   
            }
            showAge(){
                return this.age;
            }   
        }
        
        var p1 = new Person('alice',18);
        alert(p1.showAge());   // 18
    
    es6继承:
      //父类构造函数Person
       class Person{
            constructor(name,age){
                this.name = name;
                this.age = age;
            }
            showName(){
                return this.name;   
            }
            
            showAge(){
                return this.age;
            }   
        }
    //子类继承父类
        class Worker extends Person{
                constructor(name,age,job='搬砖的'){   //继承父类属性,并新加属性给默认值
                super(name,age);    
    //这里必须传参,也就是需要把原来构造函数的参数传入。
    //子类必须在constructor方法中调用super方法,否则新建实例时会报错。
    //这是因为子类没有自己的this对象,而是继承父类的this对象,然后对其进行加工。如果不调用super方法,子类就得不到this对象。
                this.job = job;
            }
          //给子类定义新方法showJob
                showJob(){
                return this.job;
            }   
    
        }
        //调用
        var w1 = new Worker('rose',17);
        alert(w1.showJob());
        alert(w1.showName());
    

    2. 模块化

    注意:目前还没有浏览器支持模块化(需要引入traceur.js和bootstrap.js)

    第三方:seajs require.js 模块化工具
    那么我们来学习下,es6自带的模块化

    a).导出,将变量a“暴露”出去
    const a =12;
    export default a;
    b).导入1.js文件“暴露”的东西,并用modA 接收
    import modA from './1.js'; (./代表同级目录下)
    c).同一个模块导出多个值 export default {a:12,b:5};
    d).不同模块间的引入
    import modA from './mod1.js';
    import modB from './mod2.js';
    let sum = modA+modB;
    export default sum;

    实例写个小例子:
    //mod1.js文件的内容
    const a = 12;
    export default a;
    
    //mod2.js文件的内容
    const b = 5;
    export default c;
    
    //主入口(模块)的内容
    <script src="traceur.js"></script>
    <script src="bootstrap.js"></script>
    <script type="module">
        import modA from './mod1.js';
        import modB from './mod2.js';
        alert(modA+modB);   //17
    </script>
    
    一个子模块“暴露”一个json数据
    //mod3.js文件的内容
    export default {a:12,b:5};
    
    //主入口(模块)的内容
    import modA from './mod3.js';
    console.log(modA.a+modA.b);   //  17
    

    相关文章

      网友评论

      • d0d7df88747a:文章很不错,很受益,不过指出一处小错误,es5继承的构造器拼写错误了,虽然是内部属性,对输出结果没有影响但是在不知道实例来源进行克隆时会有问题;
        Worker.prototype.construcotr = Worker;
        应该是Worker.prototype.constructor = Worker;
      • 7cf3e2c732f9:这两天在看vue,看到vue的脚手架安装问题,无意中看到你的ES6入门,因为一直ES6没去看,所以点进来学习下。教程写的真不错,学到了蛮多东西的。此篇讲到javascript的面向对象的继承问题,自己一直对这个面向对象的继承感觉模糊不清,看了你的有种继承不过如此的感觉。但是,感觉其中有几点疑惑:
        1. //给worker指定“亲爹”
        Worker.prototype.construcotr = Worker;
        此处constructor指定到Worker是否有误?不应该是Person吗?
        2. Person.prototype.showJob = function(){
        return this.job;
        }
        这个地方的Person应该也是手写错误吧,不然你把showJob挂载到Person上去不就修改了Person这个父类构造器了吗?如是是为了修改父类感觉这种做法欠妥,将来会影响其他的代码执行。我感觉你的应该是挂载到Workder上去的。
        谢谢您的技术心得分享,在您的笔记中能学到此些技术是一种恩赐!:+1:
        108N8:@々江諵⺌媳妇々 你好,回答您的问题。
        1.。Worker.prototype.construcotr = Worker; 作用是改变Worker的construcotr 。不然Worker的construcotr还是指向原来的Person的。Worker.prototype = new Person();是通过new方式来继承Person的“方法(函数)”。
        2。 Person.prototype.showJob = function(){return this.job; },这个确实是Worker,因为是给Worker增加新的方法,已修改更新。
        7cf3e2c732f9:谢谢您的技术心得分享,在您的笔记中能学到此些技术是您对生命的一种恩赐!:+1:
      • Paranoidyang:看完了,嘻嘻
        108N8:@陈剑波 谢谢支持,继续努力加油!
        平凡但不平庸的人生:终于看完博主写的所有的课程,受益匪浅,感谢!
        108N8: @Paranoidyang 不错,不错,好样的

      本文标题:ES6快速入门(三)

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