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);
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);
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);
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);
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
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
// 使用 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
Javascript
By Eddie Li
Javascript
- 2,254