Object ใน JavaScript บทนำ

 Object เป็นข้อมูลพื้นฐานชนิดหนึ่งของ JavaScript ค่าอะไรก็ตามที่ไม่ใช่ String, number, Symbol, true, false, null, undefined มันก็จะเป็น object 

ถึงแม้ว่า string, number, booleans (ค่า true/false) จะไม่ใช่ Object แต่ก็มีลักษณะบางอย่างเหมือน immutable object (object ที่เปลี่ยนรูปไม่ได้)

การกำหนดค่าตัวแปรให้ object จะเป็นแบบ reference  

Object จะประกอบไปด้วย property และ method

Property จะประกอบไปด้วยชื่อและค่า ชื่อสามารถเป็น String หรือ Symbol  หรือเป็น String ที่มีค่าว่างก็ได้

ใน object เดียวกันชื่อของ property จะไม่ยอมให้ซ้ำกัน ส่วนค่าสามารถเป็นข้อมูลอะไรก็ได้ที่ JavaScript รองรับ หรือจะเป็น function getter/setter ก็ได้

Property จะมีสองแบบคือแบบที่ได้รับสืบทอดมาจาก prototype และแบบที่กำหนดขึ้นมาโดยตรงกับตัว object นั้นๆซึ่งมีชื่อเรียกเฉพาะว่า own property 

Property ยังมี attributes อีกสามตัว

  1. writable สามารถถูกเขียนได้หรือไม่
  2. enumerable สามารถถูกใช้ใน for/in loop ได้หรือไม่
  3. configurable สามารถโดยลบ และเปลี่ยนแปลงค่า attributes ได้หรือไม่
Object ที่มากับ JavaScript หลายตัวจะมี property ที่ไม่สามารถเขียนได้ วนลูปใน for/in ไม่ได้ หรือลบไม่ได้ แต่ object ที่สร้างขึ้นมาโดยคนเขียนโปรแกรม โดยปกติจะทำได้ทั้งหมด



Comments

Post a Comment

Popular posts from this blog

15.8.4 การวาดลงบน cavas

Image
สี่เหลี่ยม มีทั้งหมดสี่ method แต่ละ method รับ arg เป็น x, y ของจุดเริ่มต้น ความกว้าง และความสูง fillRect() clearRect()   strokeRect() rect() method นี้จะสร้าง subpath ขึ้น method อื่นๆจะไม่มีผลต่อ path เส้นโค้ง arc(x, y, radius, startAngle, endAngle, counterclockwise) หากมีจุดก่อนหน้าใน path arc() จะลากเส้นตรงจากจุดนั้นมาถึงจุดเริ่มต้นของ arc ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, counterclockwise) arcTo(x1, y1, x2, y2, radius) รับ arg เป็นค่า X,Y ของจุด P1, P2 และค่ารัศมี method นี้จะลากเส้นจากจุดปัจจุบันจากนั้นจึงต่อด้วยโค้งเลี้ยวไปหาจุด P2 แต่จะไม่ต่อเส้นไปถึง P2 bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y) รับค่า arg เป็นจุดควบคุมสองจุด และจุดจบเส้น จุดเริ่มจะเป็นจุดสุดท้ายใน path ปัจจุบัน quadraticCurveTo(cpx, cpy, x, y) คล้าย bezierCurveTo แต่จะมีจุดควบคุมแค่จุดเดียว 
Read more

15.8.3 Graphics Attributes

Image
 จะถูกกำหนดด้วย properties ของ context object รูปแบบของเส้น lineWidth กำหนดความหนาของเส้น lineCap กำหนดรูปแบบการจบเส้น lineJoine กำหนดรูปแบบจุดต่อของเส้น miterLimit เป็นค่าของ miter length / line width หากเกินจุดต่อจะกลายเป็น bevel แทน ค่า default คือ 10 setLineDash([18, 3, 3, 3]); // 18px dash, 3px space, 3px dot, 3px space กำหนกค่ารูปแบบเส้นประ getLineDash()  คืนค่าเป็นค่าของรูปแบบเส้นประ lineDashOffset  กำหนดจุดเริ่มต้นของรูปแบบเส้นประ เส้นประจะเริ่มและวนมาจบที่จุดนี้ strokeStyle,fillStyle กำหนดสี การไล่สี และรูป ให้ค่าเป็น css color หรือ object ที่ได้มาจาก createLinearGradient() และ createRadialGradient() ซึ่งต้องเรียกใช้ addColorStop() บน object นี้อย่างน้อยสองครั้ง สามารถใช้รูปผ่าน CanvasPattern object ที่ได้มาจาก createPattern()   รูปแบบข้อความ ใช้ font property กำหนดตามรูปแบบ font ของ CSS textAlign กำหนดการจัดข้อความเมื่อเทียบกับค่า X ค่าที่ใช้ได้คือ start (default) left center right end textBaseline กำหนดการจัดข้อความในแนวแกน Y alpha...
Read more

15.8.1 path กับ polygon

Image
15.8.1 path กับ polygon  API จะใช้กับ CanvasRenderingContext2D Object นี้ได้มาจาก canvas.getContext("2d") < p >   This is a red square: < canvas id = "square" width = "10" height = "10" ></ canvas >. </ p > < p >   This is a blue circle: < canvas id = "circle" width = "10" height = "10" ></ canvas >.   < script >     let canvas = document. querySelector ( "#square" ); // Get first canvas element     let context = canvas. getContext ( "2d" ); // Get 2D drawing context     context. fillStyle = "#f00" ; // Set fill color to red     context. fillRect ( 0 , 0 , 10 , 10 ); // Fill a square. Start point is the top left corner. fillRect (startX , startY , width , height )     canvas = document. querySelector ( "#circle" ); // Second canvas element     context = canvas. getContext ( "2d" ); // Get its context     cont...
Read more