银财中国网
《Head First HTML5 javascript》第10章 自定义对象
创始人
2024-02-28 10:20:57
0次

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，跟访问实例特性一样

      Blog.prototype.toHTML = function(highlight) {...blogHTML +=  this.signature + "
      ";...};

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

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

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

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

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

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

      function showBlog(num){blog.sort(Blog.blogSorter);		...}

对象实例instance

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

function Graph() {this.vertices = [];this.edges = [];
}Graph.prototype = {addVertex: function(v){this.vertices.push(v);}
};var g = new Graph();
// g 是生成的对象，他的自身属性有 'vertices' 和 'edges'。
// 在 g 被实例化时，g.[[Prototype]] 指向了 Graph.prototype。

其他知识点

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

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

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

    Color names and values
    NameHEXHSLaRGBa
    Teal#51F6F6hsla(180, 90%, 64%, 1)rgba(81, 246, 246, 1)
    Goldenrod#F6BC57hsla(38, 90%, 65%, 1)rgba(246, 188, 87, 1)

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

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

    /* Keyword values */
vertical-align: baseline;
vertical-align: sub;
vertical-align: super;
vertical-align: text-top;
vertical-align: text-bottom;
vertical-align: middle;
vertical-align: top;
vertical-align: bottom;/*  values */
vertical-align: 10em;
vertical-align: 4px;/*  values */
vertical-align: 20%;/* Global values */
vertical-align: inherit;
vertical-align: initial;
vertical-align: unset;