(Day 19) 原型与建构式

函式建构式建立原型

前面几篇有提到,可以使用函示建构式、或是 ES 6 来建立原型,今天就来介绍使用 函示建构式 来建立原型。

首先便是建立一个函示建构式

//函示建构式
function TShirt(color,material,size){
	this.color = color
	this.material = material
	this.size = size
}

虽然是函式但我们不会使用直些使用 Tshirt() 来呼叫这个函式,而是会搭配 new 来制作实体资料 ,使用 new 这个运算子制作出来的都一定会是物件。

当使用 new 制作新物件时,函式建构式中的 this 则会指向这个新物件本身,因此上方范例中的 colormaterialsize 接下来都会变成物件中的属性,并且在根据参数设定,让物件中属性有不同的值,这边就够过 new 搭配参数,来让新增一个 BlackTShit 物件:


const BlackTShit = new TShirt('black','棉','L')

这样便是使用 TShirt 这个函示建构式来制作 BlackTShit 物件,将 BlackTShit[[Prototype]] 点开後会发现一般建立变数时都没有的 constructor 属性,如图

这是因为 BlackTShit 是使用函示建构式制作,当这笔物件使用建构函示制作时,他的原型就会是 constructor ,并且也可以看到 constructor 指向的是 TShirt 这个函示。

建立原型的方法

这样变完成一个简单的原型链,不过想在原型中新增方法,是无法直接写在函示建构式上,这边会需要使用 prototype 来制作的原型方法,继续以 TShirt 为例就会是:

TShirt.prototype.clothe = function() {
  console.log(`穿上 ${this.color} T Shit`);
}
BlackTShit.clothe() // 穿上 black T Shit

这时在使用 TShirt 制作一个新的实体资料,来确认 clothe() 这个原型方法其他实体是否能使用。

const darkBlueTShit= new TShirt('darkBlue','聚酯纤维','XL')
darkBlueTShit.clothe() // 穿上 darkBlue T Shit

另外这边要补充一点:当我们使用对建构函示的名称使用 .prototype 他会回传 constructor ,而这个 constructor 其实指向自己这个建构函示,以本次范例来说就是使用 TShirt.prototype 回传的 constructor 就是指向 TShirt 建构函式自己,这点虽然根本次文章无关,但是在後续制作多层原型时会有使用到此观念,於是这边先补充了。

最後要提的一点 [[prototype]]prototype 差别 :

  • [[prototype]] 物件上使用 ( chrome浏览器更新现在看到的是 [[prototype]] ,以前的是 __proto__ 两者差异先前的文章有提到:
  • prototype 函式上使用

[[prototype]] 在 JS 中,几乎所有资料都有 [[prototype]],是用来连接原型的,不过他并不是真正的一个属性,因此又被称做 『隐式原型』 implicit prototype link 。

[[prototype]] 正是因为所有资料都有这个属性,因此直接使用 __proto__ 去做修改会导致程序码管理上困难。

prototype  则只有函示上会显示,因此若要实际为原型添加方法,会选择使用 prototype 去新增。

参考文献

  • JavaScript 核心篇 (六角学院)

<<:  模板中的 Directive 指令 (上)

>>:  【DAY 5】主管签名好难追怎麽办? Power Automate - 核准

Day4 JS-Object、Prototype与Class(ES6)

今天要稍微跳脱一下下NodeJS,纪录一下基本的JavaScript物件概念,包含Obeject、P...

部署 Google App Script 专案(1)

今天要接着完成部署 GAS 专案并且让 Line Bot 可以简单的回应验证码给使用者。 将先前的 ...

[DAY 10] _软件实现I2C协议

因为我是用控制high、low,我接下来就贴上部分程序来个别说明,首先要先写上基本时序的规范,协议的...

9. STM32-PWM 呼吸灯(下)

设定.ioc档 这边选择TIM2来做,首先进到.ioc当中先确认系统时钟频率为多少,这边我的是16M...

NIST SDLC和RMF

安全控制是风险处理的一部分,风险评估之後进行。安全控制的范围是根据风险评估的结果确定的。根据NIST...