• 《Head First HTML5 javascript》第10章 自定义对象

    2022.11.23 第10章 自定义对象

    面向对象OOP(Object Oriented Programming)

    对象是一个包含相关数据和方法的集合（通常由一些变量和函数组成，我们称之为对象里面的属性和方法）对象是存储在单个分组中的相关功能的集合。在 JavaScript 中，大多数事物都是对象，从作为核心功能的字符串和数组，到建立在 JavaScript 之上的浏览器 API。

    继承与原型链

    对于使用过基于类的语言 (如 Java 或 C++) 的开发者们来说，JavaScript 实在是有些令人困惑 —— JavaScript 是动态的，本身不提供一个 class的实现。即便是在 ES2015/ES6 中引入了 class关键字，但那也只是语法糖，JavaScript 仍然是基于原型的。

    当谈到继承时，JavaScript 只有一种结构：对象。每个实例对象（object）都有一个私有属性（称之为 proto）指向它的构造函数的原型对象（prototype）。该原型对象也有一个自己的原型对象（proto），层层向上直到一个对象的原型对象为 null。根据定义，null 没有原型，并作为这个原型链中的最后一个环节。

    几乎所有 JavaScript 中的对象都是位于原型链顶端的 Object  的实例。

    尽管这种原型继承通常被认为是 JavaScript 的弱点之一，但是原型继承模型本身实际上比经典模型更强大。例如，在原型模型的基础上构建经典模型相当简单。

    在 JavaScript 中，函数（function）是允许拥有属性的。所有的函数会有一个特别的属性 —— prototype

     

    1. 创建类特性(class property)，使用prototype对象

      1. 存储一次，能被所有实例访问，不必定要初始化

        Blog.prototype.signature = "by Puzzler Ruby";

      2. 在实例内访问类特性用关键字this，跟访问实例特性一样

        1. Blog.prototype.toHTML = function(highlight) {
        2. 				...
        3. 					blogHTML +=  this.signature + "
          "          ;
        4. 			...
        5. 			};

    2. 类拥有的实例方法(class-owned instance method)，使用prototype对象

      1. 存储一次运行多次，方法只有一份，由所有实例共享
      2. 虽然属于类，但能够访问实例特性

    3. 类方法(class method)，不使用prototype对象

      1. 为类所有，不能访问实例特性或方法，但可以被实例调用（透过类名即可）

        1. Blog.blogSorter = function(blog1, blog2) {
        2. 				return blog2.date - blog1.date;
        3. 			};

      2. 只能访问类特性，需要下探至prototype特性内

        1. function showBlog(num)
        2. 			{
        3. 				blog.sort(Blog.blogSorter);		
        4. 				...
        5. 			}

    对象实例instance

    在 JavaScript 中，构造器其实就是一个普通的函数。当使用 new 操作符  来作用这个函数时，它就可以被称为构造方法（构造函数）。

    1. function Graph() {
    2.   this.vertices = [];
    3.   this.edges = [];
    4. }
    5.  
    6. Graph.prototype = {
    7.   addVertex: function(v){
    8.     this.vertices.push(v);
    9.   }
    10. };
    11.  
    12. var g = new Graph();
    13. // g 是生成的对象，他的自身属性有 'vertices' 和 'edges'。
    14. // 在 g 被实例化时，g.[[Prototype]] 指向了 Graph.prototype。

    其他知识点

    1. <table>元素表示表格数据——即通过二维数据表表示的信息

       元素 定义表中的一组列表  元素 通过二维数据表表示的信息
      内容分类流动内容
      允许的内容按照这个顺序：
      • 一个可选的 
        元素 表格的标题
      • 零个或多个的 
      • 一个可选的 
      • 下列任意一个：
      1.  ◦ 零个或多个 <tbody>  封装了一系列表格的(<tr>)
      2.  ◦ 零个或多个 <tr> 定义表格中的行

      • 一个可选的   元素 定义了一组表格中各列的汇总行 | | 标签省略 | 不允许，开始标签和结束标签都不能省略。 | | 允许的父元素 | 任何支持流内容 (en-US)的元素 | | 允许的 ARIA 角色 | Any | | DOM 接口 | HTMLTableElement |

      1. <table>
      2.   <caption>Color names and values</caption>
      3.   <tbody>
      4.     <tr>
      5.       <th scope="col">Name</th>
      6.       <th scope="col">HEX</th>
      7.       <th scope="col">HSLa</th>
      8.       <th scope="col">RGBa</th>
      9.     </tr>
      10.     <tr>
      11.       <th scope="row">Teal</th>
      12.       <td><code>#51F6F6</code></td>
      13.       <td><code>hsla(180, 90%, 64%, 1)</code></td>
      14.       <td><code>rgba(81, 246, 246, 1)</code></td>
      15.     </tr>
      16.     <tr>
      17.       <th scope="row">Goldenrod</th>
      18.       <td><code>#F6BC57</code></td>
      19.       <td><code>hsla(38, 90%, 65%, 1)</code></td>
      20.       <td><code>rgba(246, 188, 87, 1)</code></td>
      21.     </tr>
      22.   </tbody>
      23. </table>

    2. <td>定义了一个包含数据的表格单元格。It participates in the table model.

    3. vertical-align 指定行内元素（inline）或表格单元格（table-cell）元素的垂直对齐方式。

      1. /* Keyword values */
      2. vertical-align: baseline;
      3. vertical-align: sub;
      4. vertical-align: super;
      5. vertical-align: text-top;
      6. vertical-align: text-bottom;
      7. vertical-align: middle;
      8. vertical-align: top;
      9. vertical-align: bottom;
      10.  
      11. /* <length> values */
      12. vertical-align: 10em;
      13. vertical-align: 4px;
      14.  
      15. /* <percentage> values */
      16. vertical-align: 20%;
      17.  
      18. /* Global values */
      19. vertical-align: inherit;
      20. vertical-align: initial;
      21. vertical-align: unset;

    4. <style >元素包含文档的样式信息或者文档的部分内容。默认情况下，该标签的样式信息通常是CSS的格式。

    5. **JavaScript 控制台**是一个非常有用的工具，用于调试没有按预期运行的 JavaScript。它允许您针对浏览器当前加载的页面运行 JavaScript 行，并报告浏览器尝试执行代码时遇到的错误。要在任何浏览器中访问控制台，只需按控制台按钮。 （在 Internet Explorer 中，按 Ctrl + 2.）这将给你一个如下所示的窗口

    案例：使用自定义对象实现blog目录

    1. <html>
    2. 	<head>
    3. 		<title>YouCube - The Blog for Cube Puzzlers</title>
    4. 		<script>
    5.  
    6. 			function Blog(body, date, image){
    7. 				this.body = body;
    8. 				this.date = date;
    9. 				this.image = image;
    10. 			}
    11.  
    12. 			Blog.prototype.toString = function(){
    13. 					return "[" + this.date.shortFormat() + "]" + this.body;
    14. 				};
    15.  
    16. 			Blog.prototype.toHTML = function(highlight){
    17. 				var blogHTML = "";
    18. 				blogHTML += highlight ? "
      " : "
      ";
    19.  
    20. 				if (this.image){
    21. 					
    22. 					blogHTML += "" + this.date.shortFormat() + "
      " + " " + "
      "       + this.body + "

      " + this.signature + "
      " ;
    23.  
    24. 				}
    25. 				else
    26. 					blogHTML += "" + this.date.shortFormat() + "" + "
      "       + this.body + "
      "       + this.signature + "
      " ;
    27. 				return blogHTML;
    28. 			};
    29.  
    30. 			Blog.prototype.containsText = function(text){
    31. 				return(this.body.toLowerCase().indexOf(text.toLowerCase()) != -1);
    32. 			};
    33.  
    34. 			Blog.prototype.signature = "pizzler ruby";
    35.  
    36. 			Date.prototype.shortFormat = function(){
    37. 				return this.getFullYear()  + "/" + (this.getMonth() + 1) + "/" + this.getDate();
    38. 			};
    39.  
    40. 			Blog.blogSorter = function(blog1, blog2){
    41. 				return blog2.date-blog1.date;
    42. 			};
    43.  
    44. 			var blog = [new Blog("Got the new cube I ordered. It's a real pearl.", new Date("08/14/2008")),
    45. 						new Blog("second line.", new Date("08/19/2008")),
    46. 						new Blog("third line.", new Date("08/16/2008")),
    47. 						new Blog("the fourth line.", new Date("08/21/2008"), "cube77.png"),
    48. 						new Blog("Got the new cube I ordered. It's a real pearl.", new Date("08/14/2008")),
    49. 						new Blog("second line.", new Date("08/19/2008")),
    50. 						new Blog("third line.", new Date("08/16/2008")),
    51. 						new Blog("the fourth line.", new Date("08/21/2008"))];
    52.  
    53. 			function showBlog(numEn){
    54. 				//如果没有传入显示个数，则显示所有日志
    55. 				if (!numEn)
    56. 					numEn = blog.length;
    57.  
    58. 				//显示日志
    59. 				var blogText = "";
    60. 				for (var i=0; i<numEn; i++){
    61. 					blogText += blog[i].toHTML(0 == i%2);
    62. 				}
    63. 				document.getElementById("blog").innerHTML = blogText;
    64. 			}
    65.  
    66. 			//倒序排列
    67. 			blog.sort(Blog.blogSorter);
    68.  
    69. 			function searchBlog(){
    70. 				var searchText = document.getElementById("searchtext").value;
    71. 				for (var i = 0; i<blog.length; i++){
    72. 					if (blog[i].containsText(searchText)){
    73. 						alert(blog[i]);
    74. 						break;
    75. 					}
    76. 				}
    77. 				if (blog.length == i)
    78. 				alert("sorry,there are no blog entries containing the search text.");
    79. 			}
    80. 			
    81. 			function randomBlog(){
    82. 				var i = Math.floor(Math.random() * blog.length);
    83. 				alert(blog[i]);
    84. 			}
    85.  
    86. 		</script>
    87. 	
    88. 	</head>
    89.  
    90. 	<body onload = "showBlog(5);">
    91. 		<h3>YouCube - The Blog for Cube Puzzlers</h3>
    92. 		<img src="cube.png" alt="YouCube" />
    93. 		<input type="button" id="search" value="search the blog" onclick="searchBlog();" />
    94. 		<input type="text" id="searchtext"  value="" />
    95.  
    96. 		<div id="blog"></div>
    97. 		<input type="button" id="showall" value="show all blog" onclick="showBlog();" />
    98. 		<input type="button" id="random" value="random the blog" onclick="randomBlog();" />
    99. 		
    100. 	</body>
    101. </html>

  • 相关阅读:
    LeetCode 刷题系列 -- 90. 子集 II
    十四）Stable Diffusion使用教程：一个线稿渲3D例子
    EF Core中的拆分查询策略
    【问题定位】通过看Mybatis源码解决系统问题
    Druid数据库连接池
    MySQL8.0优化 - MVCC多版本并发控制
    【复习整理归纳】| C++面经（内存管理）
    快速掌握Reactor Core实现响应式编程
    免费在线markdown转pdf
    【Unity之UI编程】在Unity中如何打图集，来降低DrowCall
  • 原文地址：https://blog.csdn.net/hcud024/article/details/128099645