ES6快速入門（三）

struggle_LZ發表於2018-05-20

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複製程式碼


相關文章