Day4 JS-Object、Prototype与Class(ES6)

今天要稍微跳脱一下下NodeJS,纪录一下基本的JavaScript物件概念,包含Obeject、Prototype与ES6标准下的Class。

Object

Object(物件)简要而言就是一系列的名称/值(name/vaule)组合,亦即多个名称及其对应的值可以组成一个物件,这边指的值可以是原始资料、物件或函式,原始资料与物件称为物件的属性、函式则作为物件的方法。

https://ithelp.ithome.com.tw/upload/images/20210919/201399804X3DjpQuRe.jpg

JavaScript中的物件纪录的方式以大括号 { }进行分层。

let person{
  firstName: "chw",
  lastName: "k",
  greet: function(){
    // 使用物件内的属性要以this指向目前物件
    console.log("Hello, " + this.firstName + this.lastName);
  }
};

物件可以透过函式建构式(function constructor)建置,函式会自动产生新的物件,并透过this关键字变数会指向该物件定义属性,而建置完成的物件属性和方法可以用.[name]存取。

实作看看

  1. 撰写一个一般函式作为Person物件建构函式,Person物件具有属性firstNamelastName与方法greetgreet的内容包含印出firstNamelastName
// 物件建构函式
function Person(firstName, lastName){
  this.firstName = firstName;
  this.lastName = lastName;
  this.greet = function(){
    console.log("Hello, " + this.firstName + this.lastName);
  };
}
  1. 建立一个名为chwk的Person物件,并呼叫该物件的greet方法。
// 建立新物件
let chwk = new Person("chw", "k");
// 呼叫greet()
chwk.greet();
  1. 执行除错,印出指定句子。

https://ithelp.ithome.com.tw/upload/images/20210919/20139980xTbzJuNXFr.png

Prototype

每个物件都具备prototype(原型)的属性,用於指向另一个物件,透过prototype可以存取另一个物件内部的属性,又称为原型继承(prototypal inheritance)。而物件原型所指向的物件也具有prototype属性指向其他物件,这样一连串的关联产生了prototype chain(原型链),在原型链中,具有原型继承的物件可以取得其继承的prototype指向物件及prototype所继承的其他prototype指向物件的属性,使用物件建构函式建置的所有物件都会具有相同的原型继承。

https://ithelp.ithome.com.tw/upload/images/20210919/20139980V4k6pbkwEN.jpg

实做看看

  1. 撰写一个一般函式作为Person物件建构函式,Person物件具有属性firstNamelastName
// 物件建构函式
function Person(firstName, lastName){
  this.firstName = firstName;
  this.lastName = lastName;
}
  1. 在Person物件下的prototype中定义一个greet方法。
// 物件原型中的函式
Person.prototype.greet = function(){
  console.log("Hello, " + this.firstName + this.lastName);
}
  1. 建立两个新的的Person物件,并同时呼叫greet
// 建立新物件
let chw = new Person("chw", "k");
let miguel = new Person("miguel", "h");
// 呼叫greet()
chw.greet();
miguel.greet();
  1. 执行除错,印出指定句子,可以发现两个物件都继承了prototype,因此可以呼叫到其中的greet

https://ithelp.ithome.com.tw/upload/images/20210919/20139980XTnWU7SJkz.png

Class (ES6)

Class(类别)是ES6标准中提出建立物件的新方法,提供建立物件新的JavaScript语法,但就程序执行的本质而言并没有差异,因此只能说是syntatic sugar(语法糖),意即达到简化语法使开发人员更容易使用,在程序语言的功能上并没有影响的程序语法,这里直接用实作来看看Class的使用。

实作看看

  1. 在VSCode中要使用ES6语法时,先在工作目录下建立一个jconfig.json,并在里面纪录编译选项为ES6,可避免VSCode执行编译时产生多余的提示讯息。
// jconfig.json
{
  "compilerOptions":{
    "target":"ES6"
  }
}
  1. 开启一个空白档案,建立一个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);
  }
}
  1. class建构完成後,同样以new建立新的Person,并呼叫greet方法。
// 建立新class
let chwk = new Person("chw", "k");
// 呼叫greet()
chwk.greet();
  1. 执行除错,印出指定句子,成果和透过物件语法执行的成果是相同的。

https://ithelp.ithome.com.tw/upload/images/20210919/20139980K0QtGbjJu8.png

小结

不知不觉变成一篇长文,虽然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 - 事後检讨,拜托拜托让我吸个经验值

D25 - 「不断线的侏罗纪」:然後他就死掉了

小恐龙现在就像吃了无敌星星一样,完全无视仙人掌,所以我们来让小恐龙死翘翘吧! 撞上仙人掌 我们来加上...

[Android Studio] -- Day 2 主题变换Theme01

前言 刚好读到layout的部分,来做之前都没试过的APP色系转换。 正文 这次利用spinner来...

Day25 用python写UI-聊聊Text(二)

Text会讲三天,因为发现东西有点多,怕放在一篇会爆炸。 ♠♣今天的文章大纲♥♦ 复原与重复 搜寻 ...

课堂小考 - 深度学习 Deep Learning Q&A(2)

请先看 课堂笔记 - 深度学习 Deep Learning (17) Gradient and Di...

Day05 补充笔记1

在 React 中使用的语法 JSX有一些使用规则: 当我们将网页切割成数个Component时,定...