学习笔记 2020-11-21

JavaScript 高级程序设计(第4版) 阅读记录

动画与 Canvas 图形

2D 绘图上下文

绘制矩形

• fillRect()
• strokeRect()
• clearRect()

以上方法接收 4 个参数，矩形 x 坐标， y 坐标，矩形宽度和矩形高度。

• lineWidth
• lineCap

绘制路径

• beginPath()
• arc(x, y, radius, startAngle, endAngle, counterclockwise)
• arcTo(x1, y1, x2, y2, radius)
• bezierCurveTo(c1x, c1y, c2x, c2y, x, y)
• lineTo(x, y)
• moveTo(x, y)
• quadraticCurveTo(cx, cy, x, y)
• rect(x, y, width, height)
• isPointInPath(x, y)

绘制文本

• fillText()
• strokeText()

parameter: string, x, y, pxWidth

• font
• textAlign
• textBaseLine
• measureText()

变换

• rotate(angle)
• scale(scaleX, scaleY)
• translate(x, y)
• transform(m1_1, m1_2, m2_1, m2_2, dx, dy)
• setTransform(m1_1, m1_2, m2_1, m2_2, dx, dy)
• save()
• restore()

绘制图像

• drawImage()

阴影

• shadowColor
• shadowOffsetX
• shadowOffsetY
• shadowBlur

渐变

• createLinearGradient(x1, y1, x2, y2)
• addColorStop(position, color)

现代 JavaScript 教程

函数绑定

任务

1. 作为方法的绑定函数

   输出将会是什么？

   function f() {
     alert( this ); // ?
   }
   
   let user = {
     g: f.bind(null)
   };
   
   user.g();

   null。

2. 二次 bind

   我们可以通过额外的绑定改变 this 吗？

   输出将会是什么？

   function f() {
     alert(this.name);
   }
   
   f = f.bind( {name: "John"} ).bind( {name: "Ann" } );
   
   f();

   John。一个函数不能被重绑定。

3. bind 后的函数属性

   函数的属性中有一个值。bind 之后它会改变吗？为什么，阐述一下？

   function sayHi() {
     alert( this.name );
   }
   sayHi.test = 5;
   
   let bound = sayHi.bind({
     name: "John"
   });
   
   alert( bound.test ); // 输出将会是什么？为什么？

   undefined 。

4. 修复丢失了 “this” 的函数

   下面代码中对 askPassword() 的调用将会检查 password，然后基于结果调用 user.loginOk/loginFail。

   但是它导致了一个错误。为什么？

   修改高亮的行，以使所有内容都能正常工作（其它行不用修改）。

   function askPassword(ok, fail) {
     let password = prompt("Password?", '');
     if (password == "rockstar") ok();
     else fail();
   }
   
   let user = {
     name: 'John',
   
     loginOk() {
       alert(`${this.name} logged in`);
     },
   
     loginFail() {
       alert(`${this.name} failed to log in`);
     },
   
   };
   
   askPassword(user.loginOk, user.loginFail); // 此行高亮

   askPassword(user.loginOk.bind(user), user.loginFail.bind(user));

5. 偏函数在登陆中的应用

   这个任务是比 修复丢失了 “this” 的函数 略微复杂的变体。

   user 对象被修改了。现在不是两个函数 loginOk/loginFail，现在只有一个函数 user.login(true/false)。

   在下面的代码中，我们应该向 askPassword 传入什么参数，以使得 user.login(true) 结果是 ok，user.login(fasle) 结果是 fail？

   function askPassword(ok, fail) {
     let password = prompt("Password?", '');
     if (password == "rockstar") ok();
     else fail();
   }
   
   let user = {
     name: 'John',
   
     login(result) {
       alert( this.name + (result ? ' logged in' : ' failed to log in') );
     }
   };
   
   askPassword(?, ?); // ?

   你只能修改高亮部分的代码。

   askPassword(user.login.bind(user, true), user.login.bind(user, false));