稚嫩o檸檬

2019年10月23日星期三

JS學習 proto type 、reflection、extend

3:52
5:21
7:28 僅是示範
10:34

scope chain : 尋找使用的變數
prototype chaim : 尋找取用的物件屬性或方法

1:25 5-56 reflection
for in 陳述句
3:09 還會往prototype chain 找

extend

JS學習 function programming

4-51 3:25

寫出簡潔的程式碼

1.原始code

--->result

2. 整理過後把arr當作基準 fn 做數學運算

--->在newArr.push 裡加入函式
--->而函式做的事: return item * 2

得出與上面相同result

目的: 可以重複利用 arrMap，做不同的任務，只要在下面每個var 傳入函數即可

3. 也可讓其出現boolean

---> [ 1 , 2 , 3] 每個數是否大於2

另一種寫法

---> [ 1 , 2 , 3] 每個數是否大於2(limiter)

13:02 難先不要理他

2019年10月21日星期一

JS學習 call( )、 applt( ) 、 bind( )

1. bind創造任何你呼叫函數的拷貝(3:10)
.bind(想要this指向的物件)

--->讓this知道要指向person物件
--->result
"austin lin "

2. call (9:12)(10:12)
不像bind創造函數的拷貝，而是真正執行他
call( 想要this指向的物件 , 參數 , 參數)

--->result

也可用此表示

3. apply(10:32) 跟call差不多，但僅接受陣列作為參數傳入

4. function borrowing

5. function currying(15:02)運用bind 拷貝的特性

16:14 輸入參數，設定參數的永久值
bind( 要輸入的物件 , 參數 , 參數 )

--->

(1)coutSet2(4)---> 4 為第2個參數 --> 2*4=8
(2)第2個 var countSet3 bind()裡值已固定2,3，之後再輸入4也不會改變結果--->2*3=6
(3)若bind()都沒輸入，則取用回傳函數裡的值---> 4*4=16

2019年10月20日星期日

JS 學習 closure (封包)

4-46 5:06 6:45

1.目的: 就算執行環境消失，仍確保函式可以取到要用的變數(7:50)

--->result
仍可以跑出結果

--->執行完return時，greet()執行環境就離開執行堆，但language "hello" 記憶體仍留著

js 學習立即呼叫的函式(IIFE)

1. 立即呼叫的函式: 在函式後面加 ( ) ，即會立即呼叫

--->result

4-44 09:35

2. 當JS看到function在開頭時，就會預設其為陳述句(需要有名稱不能是匿名的)

---> 會讀不到

--->解決辦法
讓第一個字母不是function，用( )把function包起來--->創造一個函式物件
確保其他函式用到相同程式碼，不會產生衝突

--->result

--->此非常常見於大型框架中

2019年10月19日星期六

js學習 arguments(參數)

1.參數不輸入值，會預設為undifined

--->result

2.可部分輸入值

3.可用預設值設定參數

--->result
--->未輸入值的部分即是 undifined
--->預設若a 有輸入值即是"apple"，否則就顯示 "fruit"

4. console.log (arguments)會顯示參數物件的內容和序位

--->result

5. 用arguments.length檢查參數物件長度

---result

6.具有部分array 的特性

---result

js學習

課程解析: https://github.com/chyeh727/tut-snippet/blob/master/examples.js

課程網址:https://www.youtube.com/watch?v=gLX-KVq-6Kc&list=PLhW1K7xGelxefHXPDTfmXtJdyjhwGiXzK&index=9

1. 字串相加

(1) "hello"+"world"--->"helloworld"

(2) 若想在中間保留 "---->"hello\"world"--->"hello"world"

2. 字串與數字相加

(1) "abc"+123--->"abc123" JS會自動將數字變成字串

--->結果

3. 變數
(1)指定變數 =
var b="hello"; --->console.log(b)-->"hello"
(2)var a=1;
a=a+1 ---> 將a這個數加1，再回傳給a -->console.log(a)--> 2
(3)a++ ---> a=a+1回傳給舊a值 (見line55)
++a ---> a=a+1回傳給新a值

4. 布林值boolean
(1)var t = true, t1=true;
var f = false, f1=false;
(2)! 相反的意思
!t --->f
!f --->t

5. and 與 or
(1)and: && --->當所有條件成立時才成立
t&&t1 ---> true
t&&f --->false

(2)or: | | -->只要有一個條件成立就成立
t | | t1 --->true
t | | f --->true

6. = = 與 = = =差別 (見line87~97)
(1)= = 會做資料型態的轉換
(2)= = =不會做資料型態的轉換
var m=20;
m= =20 --->true
m!= =20 --->false

m= ="20" --->true
m!= ="20" --->false

//較嚴格的比較

m = = = 20 --->true
m != =20 --->false

m = = ="20" --->false (因為var m=一個數字，又= = =不會做資料型態轉換，此行數字不
等於字串，故得false)
m != ="20" --->true

7. if 、 else 、 else if 的使用
(1)if( 條件成立的話 ){ 執行某動作 } 如果
(2)else if( ){ } --->連續使用if時用不然如果
(3)else{ } 不然

--->"QQ"

8. 循環while、for
(1)while( 條件成立 ){ 執行動作 }

(2)for( a.定義變數 ; b.條件 ; c.動作 ){ d.執行動作 }
---->執行順序(a-->b-->d-->c) 呈現結果會與while相同，只是邏輯不同

(3)中間可使用
1.break 斷點
2.continue 跳過後續的指令，回頭檢驗while條件是否成立，成立就繼續後續指令

--->第7圈會跳過，跑到第10圈就不跑了，停在9

--->阿賢跑到20圈，break、continue同理

9. 陣列array

var data1= [ 0, 1 ,2 ];

var data2= [ 3, 4, 5, 6 ];

var data3= [ 7 ,8 ,9 ];

(1)取得特定位置的值，運用索引(index)

console.log ( data2[ 0 ] )--> 3 ---> data2這個陣列的第0個數是3

(2)長度(length)

console.log ( data3.length )--> 3 --->data3這個陣列的長度是3

(3)從頭新增項目(unshift)

data2.unshift(20) --->data2陣列變成 [ 20 , 3 , 4 , 5 , 6 ]

(4)從頭抽取項目(shift)

data2.shift() ---> data2陣列變成陣列變成 [ 4 , 5 ,6 ]

(5)從尾巴新增項目(push)

data2.push(10) ---> data2陣列變成陣列變成 [ 3 , 4 , 5 , 6 ,10 ]

(6)從尾巴抽取項目(pop)

data2.pop() ---> data2陣列變成陣列變成 [ 3 , 4 , 5 ]

(7)接合(splice)

陣列.splice( 從第幾個數開始工作 , 抽掉幾個數 , 加入的數 , 加入的數 )

data2.splice( 0 , 3 , 1 , 2 , 3 ) ---> data2陣列變成陣列變成 [ 1, 2 , 3 , 6 ]

(8)求特定值的位置(indexOf)

console.log( data2.indexOf( 3 ) ) --> 0 ---> 3是在data2陣列中的 0 的位置

若JS找不到值會給 -1

(9)逐個讀出(for)

--->中間多加一個 len=data2.length 可增加軟體效能

(10)讀出函式，array可以輸入數值、boolean、物件、函式

--->" hello austin "

10. 物件
(1)如何定義

var data = {
age: 18 ,
style: "moden" ,
color: "red" ,
};
(2)如何取得某物件內，某屬性的值

console.log(data.age) ----> 18

(3)改屬性值

data.age = 20 ;
data.color = "blue" ;

---> console.log(data) ---> { age: 20 , style: "moden" , color: "blue"};

(4)新增屬性

data.year = 2019;

---> console.log(data)---> { age: 20 , style: "moden" , color: "blue" , year: 2019};

JS學習 javascript 的 bug (this)

4-37 13:00

1. 正常情況創造一個物件，this 會指向物件

--->result

--->運用this改變了a.name的值

2.但在函式裡輸入另一組函式，this 卻指向了全域物件

--->result

--->照理說第2個name: Carlos
13:55

---> changeName創造的新名字跑到了全域物件，
代表執行changeName時，this指向了全域物件
--->解決辦法

(1)增加一個變數 var self = this
(2)並將函式裡的this 都替代成self