fundamentals\javascript\Angular讀書筆記

概述

概覽

整體架構

模塊

常見模塊分類

組件（部分完成）

未完待續……

補充資料

一切皆是對象

比如在 javaScript 中 var name = “mario” 是一個原始數據類型，它沒有屬性和方法。但是當我們調用 name.length 時 javascript 能自動的將原始類型包裝成對象。

對象創建

var userOne = {
    email: '[email protected]',
    name: 'Ryu'，
    login() {
   	 console.log(this.email, 'has logged in');
    },
    logout() {
   	 console.log(this.email, 'has logged out');
    }
}

構造方法與對象

使用 {} 可以創建對象，但是我們想要讓對象的屬性和方法被封裝在對象內部，並且不暴露給外部
使用 ES6 新語法 class，自動創建 user_constructor 的 this 對象，用來封裝對象屬性，自動掛載方法到原型鏈

class User {
    constructor(email, name) {
   	 this.email = email;
   	 this.name = name;
   	 this.score = 0;
    }
    login() {
   	 console.log(this.email, 'has logged in');
   	 // return this 實現方法鏈
   	 return this;
    }
    logout() {
   	 console.log(this.email, 'has logged out');
   	 return this;
    }
    updateScore() {
   	 this.score++;
   	 console.log(this.email, 'score is now', this.score);
   	 return this;
    }
}
var userOne = new User('[email protected]', 'Ryu');

繼承

創建一個 管理員 用戶

class Admin extends User {
   constructor(x, y) {
   	super(x, y);
   	this.users = [];
   }
   deleteUser(user) {
   	this.users = this.users.filter(u => {
   		return u.email != user.email;
   	});
   }
}

原型

function User(email, name) {
    this.email = email;
    this.name = name;
    this.online = false;
    //this.login = function() {
   	 //console.log(this.email, 'has logged in');
    //}
}

每個對象都有 Prototype，定義類型的 object 有，類型創建的對象的 prototype 掛載到 類型 object 的 prototype 上

function User(email, name) {
    this.email = email;
    this.name = name;
    this.online = false;
}
User.prototype.login = function() {
    this.online = true;
    console.log(this.email, 'has logged in');
}
 User.prototype.logout = function() {
    this.online = false;
    console.log(this.email, 'has logged out');
}

function Admin(...args) {
    User.apply(this, args);
    this.role = 'super admin';
    this.users = [];
}
Admin.prototype = Object.create(User.prototype);
Admin.prototype.deleteUser = function (user) {
    this.users = this.users.filter( u => {
   	 return u.email != user.email;
    });
}