#noobjsbeginner

關於 canvas animation： 1. 在起頭要清除目前的畫布內容 ctx.clearRect() 2. 在變形之前要先記錄一次當前畫布狀態 ctx.save() 3. 變形動畫的結尾要恢復到「變形之前的畫布狀態」ctx.restore() 4. 最後才是使用 requestAnimationFrame()

function draw() { var ctx = document.getElementById('basic').getContext('2d'); // clear canvas ctx.clearRect(0, 0, 300, 300); // 圖形樣式 ctx.fillStyle = 'rgba(0, 0, 0, 0.4)'; // 記錄變形之前的畫布 ctx.save(); // 移動變形的中心點 ctx.translate(150, 150); // 用 Date() 得到一組數字 var time = new Date(), rotate = ((2 * Math.PI) / 60) * time.getSeconds() + ((2 * Math.PI) / 60000) * time.getMilliseconds() ctx.rotate(rotate); ctx.translate(10, 0); ctx.fillRect(0, -12, 50, 24); // 恢復到變形之前的畫布 ctx.restore(); window.requestAnimationFrame(draw); }

使用建構式時，把其他物件或函式當作其屬性帶入，以便之後更方便的使用。 在 todolist 的實作練習步驟分為：

1. todoList 整體架構的建構式 2. todoChild 子項目的建構式 在實作 remove 功能的時候，做了兩個小動作： 1. 將每個建構出來的 todoChild push 到 todoList.array 2. 建立 todoChild 的時候，添加 todoChild.father = todoList 如此一來，控制 todoChild 的按鈕添加 remove 功能的步驟就變成： 1. 找到 this.father.array 也就是 todoList.array 2. 獲取 this.id 因此 this.father.array[this.id] 就能夠找到要動作的 todoChild，再作 remove() 就行。

理解 this 在哪裡：

1. prototype:  nameEvents 的 this.name2 不存在於 otherNameEvents this.name =“Name1” 存在於 nameEvents 和 otherNameEvents this.name2 和 this.name3 存在於 WhatIsThis 中

   function WhatIsThis() {      this.name = 'Name1'    }    WhatIsThis.prototype.nameEvents = function() {      this.name2 = 'Name2'    }    WhatIsThis.prototype.otherNameEvents = function() {      this.name3 = 'Name3'    }

2. bind: bind 使 this 傳遞。 狀況一點擊時，console 結果是 <button> 這個元素 狀況二點擊時，console 結果是 WhatIsThis() 這個函式本身

function WhatIsThis() {  this.$elem = document.createElement('button')  this.bindEvents() } WhatIsThis.prototype.bindEvents = function() {   狀況一： this.$elem.addEventListener('click', this.otherEvents) 狀況二：  this.$elem.addEventListener('click', this.otherEvents.bind(this)) } WhatIsThis.prototype.otherEvents = function() {  console.log(this) }

補充應用： bind 替換掉 this 後，就能夠在 otherEvents 裡面抓到 this.name2

Prototype 原型繼承應用： 1. 為建構式添加屬性

function Person(name, gender) {  this.name = name;  this.gender = gender; } Person.prototype.jump = function() {  console.log(this.name + ' is jumping.') } var p = new Person('Peter','boy') p.jump() >Peter is jumping.

2. 繼承建構式

function Child(name, gender, age, IQ) {  Person.call(this, name, gender)  this.age = age;  this.IQ = IQ; } var c = new Child('Charile', 'boy', 5, 120) c > Child {name: "Charile", gender: "boy", age: 5, IQ: 120} Child.prototype.bite = function() {  console.log(this.name + ' bite me!') } c.bite() > Charile bite me!

快速建立大量物件的好朋友：建構式

讀到深入淺出的第 11 章，這章的主題圍繞在匿名函式、作用域、閉包上。

從 jQuery 學回 JS 其實就很好理解匿名函式的意義，如果想要讓程式好好的被維護，盡量少用吧（除非這隻程式小到不行）。

函式內的變數作用域僅限於該函式內，若該函式又被當成引數放到其他函式內的話，則就是進入封包的概念了。

function setTimer(doneMessage, n) { setTimeout(function() { alert(doneMessage); }, n}; doneMessage = “OUCH!” } setTimer(”Cookies are done!”, 1000) -> “OUCH!”

從上面的實作可以看出 doneMessage 在 1000 毫秒之前就被改成 OUCH 了。