ES6快速入门(三)

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

推荐阅读更多精彩内容