追求JS小姊姊系列 Day18 -- 方函式的能力展现：第三型态 Constructor function 登场

前情提要

不论如何，似乎都有人能帮忙方函式收东西

方函式：好像还没提到我的第三型态 -- 建构式
我：.... 还有啊，不愧是头等工具人吗？

（话还没说完，他就从口袋拿出手机）
方函式：这样解释能力可能最直接了，建构式模式！（手发光）

function MakePhone(size,battery){
    this.size = size;
    this.battery = battery;
}
let copiedPhone1 = new MakePhone(20,20000);
let copiedPhone2 = new MakePhone(20,20000);
let copiedPhone3 = new MakePhone(20,20000);

（方函式手上出现好几台一样的手机）

方函式：只要知道东西的资讯（如型号），透过这个模式，我能大量复制相同的东西。

console.log(copiedPhone1);
console.log(copiedPhone2);
console.log(copiedPhone3);

究竟是怎麽做到的？

建构式的功能

在物件导向程序设计里，用来创造物件的工具通常被称为 constructor，透过建构式可以大量复制相似内容的物件（被称为instance）。

function Person(name, age) {
  this.name = name;
  this.age = age;
}
let person1 = new Person("Wendy", 18);
let person2 = new Person("Andy",18);
console.log(x);

但有几件事要注意：

1. 建构式建立的物件不使用语汇范畴

它所建立的函式并不使用语汇环境(lexical scoping)，而是作为**顶层函式(top-level-function)**存在，什麽意思？

let scope = "global";
function Constructor(){
    let scope = "local";
    return new Function a("return scope");
}
console.log(Constructor()()); // => global

这个建立的函式会被建立在全域，所以它读取不到建构式内的变数scope，而是会读到全域的scope。

2. 那少了new会怎样呢？

let person3 = Person("Belinda",18);
console.log(x);//get undefined

刚刚可以的，现在怎都不行了？
原因这样是无法判断你的动作，是要执行这个程序，或是要根据建构式function去建立新的object。
那重点根本都在new麻，所以new做了什麽？

new 到底做了什麽？

使用new这个关键字执行Person()时，会按顺序发生以下的事情：

1. 先有一个空物件被建立。
2. 执行建构函式Person。
3. Person里的 this 指向new出的空物件。
4. 因为已经指向好，所以参数传入的属性和方法，就会被放进这个空物件。

透过console.log()再重看一次上面的程序码：

function Person(name, age) {
  this.name = name;
  console.log(this);//取得name这个properties
  this.age = age;
  console.log(this);//取得age这个properties
}
let x = new Person("rex", "18");
console.log(x);

小结：

1. 建构式建议以大写命名（方便与一般函式做区隔）
2. 一般建构式内会避免return，原因如下：

function Person(name, age) {
  this.name = name;
  this.age = age;
  return 1;
}
let x = new Person("rex", "18");
console.log(x);

回传基本型别，不会影响this的内容，但若是物件型别的话...

function Person(name, age) {
  this.name = name;
  this.age = age;
  return [];
}

就会得到回传的物件型别内容

let x = new Person("rex", "18");
console.log(x);//get []

-- to be continued --

那今天就到这边搂！今天分享喜欢的歌是：
无妄合作社 No-nonsense Collective〈青春之歌 The Grand Tour〉Official Music Video
https://www.youtube.com/watch?v=qRCnF7SMufo

每天的休息，是为了後面的追求，明天见。

reference:

008
JavaScript大全
D13 - 做出鸡蛋糕 new ＋ Constructor
[笔记] 谈谈 JavaScript 中内建的 function constructors 及应注意的地方
建构物件范本：Constructor Function