let varA =1;
console.log(varA);
function peparationOfWork(){
console.log('得知需求');
console.log('寫下項目並分析');
};
function DoingWork(){
console.log('準備好工具');
console.log('電腦既定的檔案與程式');
console.log('電錶量測');
}
function DoubleCheckYourWork() {
console.log('階段性檢點');
console.log('階段式物理性測試');
}
將peparationOfWork() 裡面安插函式DoingWork()
let varA =1;
console.log(varA);
function peparationOfWork(){
console.log('得知需求');
DoingWork();
console.log('寫下項目並分析');
};
function DoingWork(){
console.log('準備好工具');
console.log('電腦既定的檔案與程式');
console.log('電錶量測');
}
function DoubleCheckYourWork() {
console.log('階段性檢點');
console.log('階段式物理性測試');
}
console.log(peparationOfWork());
peparationOfWork() 確實在執行了DoingWork()!
換做把DoubleCheckYourWork() 換到最前面執行
let varA =1;
console.log(varA);
function peparationOfWork(){
console.log('得知需求');
DoingWork();
console.log('寫下項目並分析');
};
function DoingWork(){
console.log('準備好工具');
console.log('電腦既定的檔案與程式');
console.log('電錶量測');
}
function DoubleCheckYourWork() {
console.log('階段性檢點');
console.log('階段式物理性測試');
}
DoubleCheckYourWork();
console.log(peparationOfWork());
呼叫Function 順序以及參數有差?
有!
先來測試一下 呼叫函式(para1,para2) 的陳述式。
OrderBy()只給para1
function OrderBy(num1,num2) {
console.log(num1,num2);
}
OrderBy(2);
OrderBy(3);
OrderBy()給para1,para2
function OrderBy(num1,num2) {
console.log(num1);
console.log(num2);
}
OrderBy(1,2);
OrderBy(3,4);
The static method Object.defineProperty() defines a new property directly on an object, or modifies an existing property on an object, and returns the object.
// 物件
var b = {};
//宣告物件.屬性
Object.defineProperty(b,'a',{
value: 2,
writable:false
});
b.a =3; //賦予值 3
console.log(b.a);
var a=3;
a=b.a =1; //奇怪的地方喔!
console.log(a,b.a);
// Output2
1,2
console.log(myFunc);
console.log(myFunc(3, 6));
function myFunc(a, b) {
return a + b;
}
-----------------------------------
// 執行結果//function myFunc(a, b) {
return a + b;
}
//9
匿名表達式 (Function Expressions without Function Name)>>
先宣告一個變數，再定義一個函數內容放到該變數裡。
此方式定義的函數實際上是匿名函數 (a function without a name)，將函數定義的主體，存在你定義的變數裡。
變數名稱不等於函數名稱。
不具 Hoisting 提升效果。
console.log(myFunc);
// console.log(myFunc(3, 6)); // TypeError: myFunc is not a function
let myFunc = function (a, b) {
return a + b;
};
console.log(myFunc);
console.log(myFunc(3, 6));
-----------------------------------
//執行結果
//undefined
//ƒ (a, b) {
return a + b;
}
//9
具名表達式 (Function Expressions / Function Name)>>
和「匿名表達式」相似，差別在定義函數內容時，有給予一個函數名稱 (Function name)。
定義的函數印出來會有函數名稱(不等於變數名稱)。
但無法直接透過該函數名稱呼叫。
不具 Hoisting 提升效果。
console.log(myFunc);
// console.log(myFunc(3, 6)); // TypeError: myFunc is not a function
var myFunc = function aaa(a, b) {
return a + b;
};
console.log(myFunc);
console.log(myFunc(3, 6));
// console.log(aaa); // ReferenceError: aaa is not defined
-----------------------------------
//執行結果
//undefined
//ƒ aaa(a, b) {
return a + b;
}
//9
建構子式 (Function Constructor)>>
說到建構子我們不得不提 new 這個Keyword，因為提到new 我們就要有個概念: 我們正在建立物件!
console.log(myFunc);
// console.log(myFunc(3, 6)); // TypeError: myFunc is not a function
var myFunc = new Function("a", "b", "return a + b");
console.log(myFunc);
console.log(myFunc(3, 6));
-----------------------------------
//執行結果 // undefined
// ƒ anonymous(a,b) {
return a + b
}
//9
function User() {
this.name = 'Bob';
}
function AnotherUser() {
this.name = 'Hugo';
}
var user1 = new User();
var user2 = new AnotherUser();
console.log(user1.name);
console.log(user2.name);
//顯示結果Bob
Hugo
This :Arrow Function內 結構功能
//-----一般函式
function User() {
this.name = "Bob";
return this;
}
console.log(this.name);
//-----箭頭函式()=>{
this.name ="It is Arrow Functions";
}
console.log(this.name);
console.log(typeof this.name);
//顯示結果(空物件)
It is Arrow Functions
string
This 提取Arrow Function內部值
// Arrow function 1
()=>{
this.name ="It is Arrow Functions";
}
console.log(this.name);
console.log(typeof this.name);
//顯示結果
//It is Arrow Functions
//It is Arrow Functions
//string
箭頭函數(Arrow Functions) — this是定義時的對象, 不是在使用的物件。
傳統Function語法 — this是使用、呼叫(call)時的對象。
用setInterval 將一般函式this 物件p帶出
function Person() {
// Person() 建構式將 this 定義為它自己的一個實體
this.agegrowing = 0;
setInterval(function growingUp() {
// 在非嚴格模式stric mode下, growUp() 函式把 this 定義為全域物件
// (因為那是 growingUp()執行的所在)，
// 與 Person() 建構式所定義的 this 有所不同this.agegrowing++;
}, 3000);
}
// 在全域做另一個物件 p
var p = new Person();
console.log(p);
在 ECMAScript 3/5 裡面，this 可透過指派 this 值。
function Person() {
var me = this;
me.age = 0;
setInterval(function growUp() {
// 這個 callback 參考 `self` 變數，為預期中的物件。
mee.age++;
}, 1000);
}
透過 bind 函式來綁定 this 變數到指定函式（上面為例，就是 growingUp() 函式）。
A callback is a function passed as an argument to another function.
callback function 藉由當作函式參數帶入另一個功能陳述式.
中文翻譯字詞會用“回呼””、”回叫”、”回調”
我的話都習慣叫 “回扣” ( 疑?
回扣函式, 通常用於在目前的函式呼叫執行最後移交控制權，而不使用函式回傳值的方式。
直接風格的控制權移交是不明確的，它是用回傳值的方式，然後進行到下一行程式碼或呼叫接下來其他函式。
前幾篇提到的同步的話要函式甲 > 函式乙 > 函式丙 > 函式丁, 你要等前面做完很麻煩 !
Callback function 的用途就在於可以讓我們的程式在不論同步或是非同步執行的狀況下都還是可以依照你要的順序執行函式。
< 基本的參數帶入函式 >
我們這裡用直接風格帶入常數來解釋一下~
function fruitProcessor(apples, oranges) {
// 陳述式內的處裡方式 = 算式
const juice = `Juice with ${apples} apples and ${oranges} oranges.`;
return juice;
}
//代入參數
const appleJuice = fruitProcessor(5, 0);
console.log(appleJuice);
//代入參數
const appleOrangeJuice = fruitProcessor(2, 4);
console.log(appleOrangeJuice);
< 如何處理函式 >
我們範例的結構:
處理總函式
蘋果汁處理函式
柳橙汁處裡函式
let apples;
let oranges;
function fruitProcessor(callback)
{
callback(apples,oranges);
}
function fruitAppleJuice (apples,oranges){
apples= 5;
oranges =0;
const juice = `Juice with ${apples} apples and ${oranges} oranges.`;
console.log(juice);
}
function fruitOrangeJuice (apples,oranges){
apples= 2;
oranges =4;
const juice = `Juice with ${apples} apples and ${oranges} oranges.`;
console.log(juice);
}
fruitProcessor( fruitAppleJuice );
fruitProcessor( fruitOrangeJuice );
將你想要處裡的不同參數輸入不同的函式, 爾後只要呼叫過來做處理即可。
< Callback簡單函式參數帶入＋呼叫>
let juice;
function fruitProcessor(apples,oranges,callback)
{
const juice = `Juice with ${apples} apples and ${oranges} oranges.`;
callback( juice);
}
function fruitAppleJuice (callback)
{
console.log(juice);
}
fruitProcessor(5,1, fruitProcessor);
／／執行結果
Juice with 5 apples and 1 oranges.
* 可以自己comment : callback( juice ), 試著自己想想看其中差異!
< Callback用多函式呼叫＿控制執行順序 >
let apples;
let oranges;
function fruitProcessor(callback)
{
callback(apples,oranges);
}
function fruitAppleJuice (Fn){
apples= 5;
oranges =0;
const juice = `Juice with ${apples} apples and ${oranges} oranges.`;
console.log(juice);
Fn()
}
function fruitOrangeJuice (apples,oranges){
apples= 2;
oranges =4;
const juice = `Juice with ${apples} apples and ${oranges} oranges.`;
console.log(juice);
}
fruitProcessor(fruitAppleJuice(fruitOrangeJuice));
let apples;
let oranges;
function fruitProcessor(callback)
{
setTimeout(function(){
console.log("這個是最先還是最後?");
},0)
callback(apples,oranges);
}
function fruitAppleJuice (Fn){
apples= 5;
oranges =0;
const juice = `Juice with ${apples} apples and ${oranges} oranges.`;
console.log(juice);
Fn()
}
function fruitOrangeJuice (apples,oranges){
apples= 2;
oranges =4;
const juice = `Juice with ${apples} apples and ${oranges} oranges.`;
console.log(juice);
}
fruitProcessor(fruitAppleJuice (fruitOrangeJuice));
／／執行結果
Juice with５apples and ０ oranges.
Juice with２apples and ４ oranges.
這個是最先還是最後?
