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() 函式）。
let LightHeader ="NO1";
let AirConditionor ="NO2";
let Compressor ="NO3";
let Alternator ="NO4";
let Starter ="NO5";
let Fuelpump ="NO6";
let Car ={
LightHeader,
AirConditionor,
Compressor,
Alternator,
Starter,
Fuelpump,
};
console.log(Car);
console.log(Car.AirConditionor);
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.
這個是最先還是最後?
function tost(){
console.log('烤土司');
}
function makecoffee(){
console.log('煮咖啡');
}
function callSomeone(someone){
console.log('打給'+someone);
setTimeout(function(){
console.log("刷牙完成");
},30)
}
function doWork(){
var auntie ='漂亮阿姨'
tost();
callSomeone(auntie);
makecoffee();
}
doWork();
SetTimeout() 用法
在講解執行順序之前, 我們會先說明事件佇列
在你執行到SetTimeout()所在的Function, 內部的陳述式會儲存到事件佇列。
先記起來!
SetTimeout()方法1
function functionname(someone){
console.log('A');
setTimeout(function(){
console.log("B");
},delaytime)
}
SetTimeout() 的delaytime單位(ms)
SetTimeout() 要整個程式順序跑完以後才會執行
SetTimeout() 只執行一次就會結束!
SetTimeout( 非字串,delaytime ) 用這種方式, 主控台的執行效率會比較好
SetTimeout()方法2
function functionname(someone){
console.log('A');
setTimeout(function(){
'console.log("B")';
},delaytime)
}
不同在於
SetTimeout( 字串,delaytime) 裡面陳述, 我們用純字串
這種方式在主控台的執行效率較不好。
執行順序
執行結果
SetInterval 用法
setInterval()固定延遲了某段時間之後，才去執行對應的程式碼，然後「不斷循環」。
SetInterval 結構
var intervalID = scope.setInterval(func, delay[, 參數1, 參數2, ...]);
var intervalID = scope.setInterval(code, delay);
var timeInterval_process = window.setInterval(( () => console.log("Hello!") ), 1000);
