今天要稍微跳脱一下下NodeJS,纪录一下基本的JavaScript物件概念,包含Obeject、Prototype与ES6标准下的Class。
Object(物件)简要而言就是一系列的名称/值(name/vaule)组合,亦即多个名称及其对应的值可以组成一个物件,这边指的值可以是原始资料、物件或函式,原始资料与物件称为物件的属性、函式则作为物件的方法。
JavaScript中的物件纪录的方式以大括号 { }进行分层。
let person{
firstName: "chw",
lastName: "k",
greet: function(){
// 使用物件内的属性要以this指向目前物件
console.log("Hello, " + this.firstName + this.lastName);
}
};
物件可以透过函式建构式(function constructor)建置,函式会自动产生新的物件,并透过this
关键字变数会指向该物件定义属性,而建置完成的物件属性和方法可以用.
或[name]
存取。
实作看看
- 撰写一个一般函式作为Person物件建构函式,Person物件具有属性
firstName
、lastName
与方法greet
,greet
的内容包含印出firstName
和lastName
。// 物件建构函式 function Person(firstName, lastName){ this.firstName = firstName; this.lastName = lastName; this.greet = function(){ console.log("Hello, " + this.firstName + this.lastName); }; }
- 建立一个名为chwk的Person物件,并呼叫该物件的
greet
方法。// 建立新物件 let chwk = new Person("chw", "k"); // 呼叫greet() chwk.greet();
- 执行除错,印出指定句子。
每个物件都具备prototype(原型)的属性,用於指向另一个物件,透过prototype可以存取另一个物件内部的属性,又称为原型继承(prototypal inheritance)。而物件原型所指向的物件也具有prototype属性指向其他物件,这样一连串的关联产生了prototype chain(原型链),在原型链中,具有原型继承的物件可以取得其继承的prototype指向物件及prototype所继承的其他prototype指向物件的属性,使用物件建构函式建置的所有物件都会具有相同的原型继承。
实做看看
- 撰写一个一般函式作为Person物件建构函式,Person物件具有属性
firstName
、lastName
。// 物件建构函式 function Person(firstName, lastName){ this.firstName = firstName; this.lastName = lastName; }
- 在Person物件下的prototype中定义一个
greet
方法。// 物件原型中的函式 Person.prototype.greet = function(){ console.log("Hello, " + this.firstName + this.lastName); }
- 建立两个新的的Person物件,并同时呼叫
greet
。// 建立新物件 let chw = new Person("chw", "k"); let miguel = new Person("miguel", "h"); // 呼叫greet() chw.greet(); miguel.greet();
- 执行除错,印出指定句子,可以发现两个物件都继承了prototype,因此可以呼叫到其中的
greet
。
Class(类别)是ES6标准中提出建立物件的新方法,提供建立物件新的JavaScript语法,但就程序执行的本质而言并没有差异,因此只能说是syntatic sugar(语法糖),意即达到简化语法使开发人员更容易使用,在程序语言的功能上并没有影响的程序语法,这里直接用实作来看看Class的使用。
实作看看
- 在VSCode中要使用ES6语法时,先在工作目录下建立一个
jconfig.json
,并在里面纪录编译选项为ES6,可避免VSCode执行编译时产生多余的提示讯息。// jconfig.json { "compilerOptions":{ "target":"ES6" } }
- 开启一个空白档案,建立一个Person的Class。
"use strict"; // 使JavaScript引擎执行程序码时,严格审视语法规则 class Person{ // class中的建构函式constructor,透过建构参数firstName、lastName建构Person类别 constructor(firstName, lastName){ this.firstName = firstName; this.lastName = lastName; } // class中的方法撰写方式 greet(){ console.log("Hello, " + this.firstNmae + this.lastName); } }
- class建构完成後,同样以
new
建立新的Person,并呼叫greet
方法。// 建立新class let chwk = new Person("chw", "k"); // 呼叫greet() chwk.greet();
- 执行除错,印出指定句子,成果和透过物件语法执行的成果是相同的。
不知不觉变成一篇长文,虽然ES6所提出的class只是让开发人员感觉良好的syntatic sugar,身为一个c#爱用者还是免不了觉得愉快,只是要提醒一下,JavaScript中的class只是物件,和c#中的class是完全不一样的概念,要小心。
https://zh.wikipedia.org/wiki/语法糖
Learn and Understand NodeJS [课程]
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/proto
<<: 爬虫怎麽爬 从零开始的爬虫自学 DAY5 python基本资料类型介绍
>>: [Day 11] SRE - 事後检讨,拜托拜托让我吸个经验值
小恐龙现在就像吃了无敌星星一样,完全无视仙人掌,所以我们来让小恐龙死翘翘吧! 撞上仙人掌 我们来加上...
前言 刚好读到layout的部分,来做之前都没试过的APP色系转换。 正文 这次利用spinner来...
Text会讲三天,因为发现东西有点多,怕放在一篇会爆炸。 ♠♣今天的文章大纲♥♦ 复原与重复 搜寻 ...
请先看 课堂笔记 - 深度学习 Deep Learning (17) Gradient and Di...
在 React 中使用的语法 JSX有一些使用规则: 当我们将网页切割成数个Component时,定...