Chapter2 - 用物件看真实世界(II)仍然对物件感到疑惑吗?用你最爱点的豚骨拉面做比喻

本文是第二篇,有些变数的名词会沿用第一篇,建议看过再继续阅读唷!

谈论更深入一层前,先让我们复习一下

上回提到,我们用物件的形式储存了落叶的变数和函式,认识了物件的结构和定义方法,接着还利用建构式将产生落叶的流程给固定下来,并在每次滑鼠点击时,都产生一个新的落叶物件:

let leaf;
canvas.addEventListener('click', SetMouse);
function SetMouse(e){
    leaf = new leafMaker();
}

这个动作称之为实例化,在谈论这点之前,也要一并解释一开始被我们称之为「落叶产生器」的leafMaker,这个说法只是为了让大家好懂,而实际的概念就让我做个比喻吧!

美味的豚骨拉面

想像你今天走进了一家拉面店,然後点了一份豚骨拉面,接着厨师按照食谱烹饪了这个美味的豚骨拉面,端到了你面前,於是你大快朵颐了一番,好不快乐!

首先,我们把豚骨拉面当作一个物件,它本身也有一些属性,像是汤底由猪骨和蔬菜熬煮而成、拉面为手工制作等等,由於这个豚骨拉面你吃在嘴里、感动在心里,闻的到摸的到,它就是一个实体的存在;而与之对立的便是厨师手上的「食谱」,食谱本身不能吃(你能想像厨师把食谱放到你面前让你嚐嚐看吗),甚至它是一个抽象的概念,料理的步骤被厨师烂熟於心,因此,单从这个食谱来看,你无法知道它好不好吃,食谱本身也没有汤底和拉面。

终归一句话,我们就想吃到美味的豚骨拉面而已呀!因此便有了厨师(JS)存在的意义,它帮我们烹饪(new)了豚骨拉面,将其实例化(才能吃)。到这边就可以讲白了,所谓按照食谱烹饪的这个指令就是new leafMaker(),JS则帮我们做出豚骨拉面,与之对应的就是leaf,一开始我们设计的leafMaker,充其量就只是一个食谱、步骤而已,或者说是抽象的本质,因此自然落下这个概念不存在其中(leafMaker.fall),而是在於落叶的实体(leaf.fall)

抽象化的能力

人类与生俱来就具有将事物抽象化的能力,也因此自立於万物之灵,物件模型就帮我们模拟了这个观点,如果你去询问一个务农的人「你觉得什麽是豚骨拉面」,他可能会回答你:是食物、是赖以为生的重要养分;如果去问一个上班族,他可能会回答:是我的精神食粮,能治癒我的心灵;如果去问一个哲学家,他可能会回答:是慾望,是将美好作为诱饵投放的毒药

每个人或许有不同的观点,但关键是在他们的理解中,都能解释什麽是豚骨拉面,并且有他们自己的论证,在JS中也一样,为了能够解释什麽是豚骨拉面,物件模型很好的联系了豚骨拉面的抽象本质和实体存在,端看你如何定义,我们便可以使用一段代码来描述上面这个例子:console.log(leaf instanceof leafMaker),我们会得到结果true,因为leaf确实是用leafMaker建构式实例化的物件,反过来也就是说,你问JS「什麽是leaf」,它能够回答你:是以leafMaker为蓝图建构出来的实体

豚骨拉面的本质可以改变?

你可能会感到困惑,豚骨拉面都已经煮好了,回去探究是哪份食谱做出来的有什麽意义吗?这个联系实际上相当重要,我个人会解读成一个物件的过去、现在、未来,虽然当下的我们都处於现在,也就是你正在吃豚骨拉面,但我们讨论的范畴只是你在一家店吃豚骨拉面,如果你在另一家店,不也是吃豚骨拉面吗?但是另一家店的食谱,会不太一样对吧?所以时间还得倒退回到你踏进店门前,你决定要吃A店,不吃B店,这影响了你最终嚐到的豚骨拉面味道不同,而物件模型神秘的地方,就在於,它能够改写你的过去,前一刻你还还在跟朋友说A店的豚骨拉面好好吃,下一刻朋友就跟你说,这碗拉面是B店的不是吗?

这个例子说明了物件对抽象化的能力,不仅限於概念而已,还包含更深的层面,因为每一个物件都有它的起源,从过去影响现在、乃至於未来,这个概念是JS独有的原型prototype,这是一个相对更加深入的话题,未来会有个章节专门讲述:「使命必达先生的故事」


<<:  第 3 集:CSS 魔力

>>:  【Day02】JSX(JavaScript 语法扩充)

[ Day 15 ] - 取得节点内资料的方法

前面已经学习如何更改指定节点的内容 今天来介绍如何取出指定节点的资料值 innerHTML 使用 i...

TypeScript 能手养成之旅 Day 11 明文型别(Literal Types)

前言 明文型别(Literal Types),一开始看到这个名词,真的不是很好懂,不过实际去了解後,...

【PHP Telegram Bot】Day25 - 入群欢迎机器人(1):发送欢迎讯息

看了五天的 API 文件,想必是有点腻了,今天开始来做点实用的东西 修改 processMessa...

自动化 End-End 测试 Nightwatch.js 之踩雷笔记:点击物件 III

点击物件是蛮基本的操作,不过还是有很多地方需要注意。 回顾 第一天提到了如果该物件是 div,例如这...

Day 12 Classify images with the Custom Vision service

Some potential uses - Product identification, disa...