Javascript

Basic




             author Eddie Li
             github afunction
                blog  adz.visionbundles.com




  • Variables scope
  • Data Types
  • Prototype

variables scope

    觀念

        1. 宣告或取用變數時，會從現在的 function scope 一層一層往上找。
        2. 終點是 [[window object]]，等於全域變數。
        3. 往上尋找的過程有損 performance。
      

       策略

        1. 避免變數落入 [[window object]] 內，造成變數命名衝突等問題。
        2. 減少 variables 往上尋找層數、機會

Example: variables scope 

var articleId = 10;var $ = jQuery;var initFunc = function($, articleId) {     var pagination = $('#pagination');     var currentPage = pagination.data('currentPage');     function _getPage(articleId, pageId) {          var data = {articleId:articleId, pageId: pageId};          $.post('/api/get-page', data, function() {} );     }     _getPage(articleId, currentPage);};
initFunc($, articleId);

Example: variables scope 

var articleId = 10;var $ = jQuery;var initFunc = function($, articleId) {     var pagination = $('#pagination');     var currentPage = pagination.data('currentPage');     function _getPage(articleId, pageId) {          var data = {articleId:articleId, pageId: pageId};          $.post('/api/get-page', data, function() {} );     }     _getPage(articleId, currentPage);};
initFunc($, articleId);

Example: variables scope 

var articleId = 10;var $ = jQuery;var initFunc = function($, articleId) {     var pagination = $('#pagination');     var currentPage = pagination.data('currentPage');     function _getPage(articleId, pageId) {          var data = {articleId:articleId, pageId: pageId};          $.post('/api/get-page', data, function() {} );     }     _getPage(articleId, currentPage);};
initFunc($, articleId);

Example variables scope 

var articleId = 10;var $ = jQuery;var initFunc = function($, articleId) {     var pagination = $('#pagination');     var currentPage = pagination.data('currentPage');     function _getPage(articleId, pageId) {          var data = {articleId:articleId, pageId: pageId};          $.post('/api/get-page', data, function() {} );     }     _getPage(articleId, currentPage);};
initFunc($, articleId);

Javascript Data Type

       資料型別     Function, Object, Number, String, Boolean 

       特性

        1. Function  被 new  完後會變成 Object
        2.   把 new function 當成物件寫法 ，Function 內的內容意義上等於 PHP 中 __constractor
        3. Function 擁有 prototype ，Object 則無
        4. Prototype 也是 Object

       提示

        1. 使用 typeof 得知變數資料型別
        2. 利用以上特性實作類物件導向

Javascript Object Example

 // empty object var empty_object = {};
 // JSON object var jsonObject = { name: 'Eddie Li',                     company: 'VisionBundles Int\'l Ltd.',                     website: 'http://www.visionbundles.com' };
 // collection of functions and variables var app = {              id: null,              init: function(id) { this.id = id; },              getPage: function() { // 略... } };

物件是屬性、方法的集合

Example: 直接定義 object

 var app = {            pageId: null,            init: function(pageId) {                 this.pageId = pageId;                 this.getPage();            },            getPage: function() {                 // 略 ...            } }; app.init(1);

     1. 直接定義整包 Object ，就像直接定義已經被 new 出來的 instance

     2. 無法達成 private property

Example: 使用 function 產生 Object

 AppClass = function(pageId) {         var pageCache = [];   // private property         var self = this;      // private property         this.pageId = pageId; // public property         this.getPage = function() {              var data = {pageId: self.pageId};              $.getJSON('/api/get-page', data, function(result){                  pageCache[this.pageId] = result;              });         };         this.getPage(pageId); }; var pageApp1 = new AppClass(1); var pageApp2 = new AppClass(2);
         1. AppClass 像是模型 (model)
         2. AppClass 內 var 宣告的只有在 AppClass 內才能存取，類似 private property 用途
         3. AppClass  function 內像是 php __construct

Function Prototype

        1.  Prototype  是一包 Object
        2.  當 function 被 new 出來後能用 this 存取 prototype 內的屬性、方法 
        3.  利用以上特性實作繼承

Prototype Example 1  (JSBin)

 // super class (object) var Car_Abstract = {     carName: null,     getName: function() {          console.log('Car is ' + this.carName);     } }; // class (function) var Super_Car = function(name) {      this.carName = name; }; // Function Inherit object Super_Car.prototype = Car_Abstract; // New function & call parent method var myCar = new Super_Car('Ferrari'); myCar.getName(); // Car is Ferrari

Prototype Example 2 (JS Bin)

 var Super_Car = function(name) {      this.carName = name; };
 // 各別指定 prototype 內的屬性、方法 Super_Car.prototype.carName = null; Super_Car.prototype.getName = function() {      console.log('Car is ' + this.carName); };  var myCar = new Super_Car('Toyota'); myCar.getName(); // Car is Toyota

Prototype Example 3 (JS Bin)

 // 使用 function 定義父類別藍圖
 var Car = function() {           this.carName = null;           this.getName = function() {                console.log('Car is ' + this.carName);           }; }; var Super_Car = function(name) {      this.carName = name; }; // Car 是 function type, 當被 new 出來後變成 Object
 Super_Car.prototype = new Car(); 
 var myCar = new Super_Car('Mazda'); myCar.getName(); // Car is Mazda

Home work

 var myCar = new Car('Toyota'); var myBike = new Bike('Fixed Gear'); var myScooter = new Scooter('Yamaha');
 myCar.start(); // Toyata Car staring; myBike.start(); // Fixed Gear Bike staring; myScooter.start(); // Yamaha Scooter staring;
 
 myCar.goToFreeWay(); // Toyota Going to free way  myBike.getGas(); // throw exception myScooter.getGas('95'); // Bike getting gas (95) myCar.getGas('98'); // Toyota getting gas (98)
  • 實作出 Car, Bike, Scooter Class
  • 程式碼讀起來合理
  • 混合練習 prototype, new function, object 
Made with Slides.com