JavaScript | Object Oriented Programming

Object Oriented Programming

OOP是很多编程语言广泛存在的一个概念，居然是看JS给看完的我也没想到。

FCC的设计理念不错，一直是通过解决某个疑问来提出使用什么观念/写法来解决这个问题。

所以我觉得照搬FCC的加上一些自己的理解可能勉强算得上一篇合格的OOP学习记录。

Create & Access

创建对象，获取里面的内容是第一步：

对象是包括在花括号{}的变量，就像只要穿了泳衣，就知道你肯定是和水相关的活动。

let obj1 = {
    prop1:value1,
    prop2:value2
};

关于prop和value , 是properties和属性的值，具体可以采用的样式点击javascript object查看。

Access方法也能点上面👆这个链接回顾。

this keywords

this always points to the owner of the current object.

this MDN ：this keyword 非常好用，很point，但是这个keyword仅仅可以在function内写出来。

在函数/对象继承调用太多层级的时候，引用不熟悉的框架的时候，为了节约debug成本，通常对于current object 会做let that = this ，的设定，来规避不少苦难。具体查看:

看了感觉还是var self = this好一些，因为“我自己的xx某某东西”比“我的那个某某东西”，要更强调所属的感觉。

create method

对象内写函数，就是给它造了个方法，因为，这个函数必然是做到某个功能，而通常口语上，我们只会说通过某个方法做到了什么效果，build-in method听起来确实顺耳，主要是JavaScript作为一门编程语言在整个计算机世界是个工具角色，用的人比创造它的人多得多的多。

Method_definitions: 这个页面内容很多，但是FCC相关的其实就是第一个

Constructor Function

object lateral 和 object constructor function 是需要对比讨论的两种对象创建方式。

// using object lateral
let person = {
    name: 'Sam'
}

console.log(person.name); // Sam

// create 2 objects 
let student = person;
let teacher = person;

// changes the property of an object
student.name = 'John';
// the origins object property was changed, too
console.log(person.name); // John
// midify other object too
console.log(teacher.name);// john
// try to find a undefined key's value
console.log(person.age); // undefined
// add new property
person.age = 18;
// all objects are changed 
console.log(person.age);// 18
console.log(student.age);//18
console.log(teacher.age);//18
// changed one object 
student.age = 16;
// all objects are changed 
console.log(student.age);//16
console.log(person.age);// 16

// delete property
delete person.age;
console.log(person.age);// undefined
console.log(student.age);//undefined
console.log(teacher.age);//undefined
// delete property again
delete student.name
console.log(person.name);// undefined
console.log(student.name);//undefined
console.log(teacher.name);//undefined

从上面的代码可以看出，采用lateral形成的不用new 的对象之间，都不好意思说是三个对象，明明就是一个，这就好像你拿iphone传了新照片，你的mac/ipad 都能看到这张照片。你要是拿ipad对这张照片加了个滤镜，所有设备看到的这张图片都改了。要是一个不小心把这张照片用mac删除了，所有设备上都会消失。

//*****************************************
// using constructor function
function human () {
    this.name = 'gigi'
}

let human1 = new human();
let human2 = new human();

// adding new property to human1
human1.age = 20;
human.age = 30;
console.log(human1.name);//gigi
console.log(human1.age);//20
console.log(human2.name);//gigi
console.log(human2.age);// undefined
console.log(human.age);// 30
// delte 
delete human.name;
console.log(human.name);//
console.log(human);//ƒ human () {this.name = 'gigi'}
console.log(human1.name);//gigi
console.log(human1.name);//gigi
// add new prop
human.hair = "yellow";
console.log(human.hair); //yellow
console.log(human1.hair);// undefined

采用constructor function 来 create object，可以说是真正的现代人家庭关系，虽然你从你爹妈那里复制了dna的版本，得到了一些东西，有些东西一开始必须靠爹妈给，比如名字和脸。但是你自己想开了，想改就改，你是独立的！

如果爹妈突然有个爱好：下象棋，你是没有的。爹妈死了，爹妈爱好变了/，没了，爹妈咋了都不影响你！你还是有名有姓，有你自己的人生！同理，你的兄弟姐妹同辈人啥样与你无瓜！

JavaScript Constructor Function：这篇写蛮好的sample

综上，很明显，constructor function to create world 是一件非常合理的事情，因此主要考虑更多的了解一下constructor function的内容。

create with arguments

要知道，一直靠dot(.)去修改赋值是非常累的，孩子的名字早在出生（new）之前就有了是常有的事情，因此在new的同时，采用parameter 传参，就是一步到位。

// constructor function
function Person (person_name, person_age, person_gender) {

   // assigning  parameter values to the calling object
    this.name = person_name,
    this.age = person_age,
    this.gender = person_gender,

    this.greet = function () {
        return ('Hi' + ' ' + this.name);
    }
}


// creating objects so easy!
const person1 = new Person('John', 23, 'male');
const person2 = new Person('Sam', 25, 'female');

// accessing properties 
console.log(person1.name); // "John"
console.log(person2.name); // "Sam"

instanceof to verify

孩子是有了，但是是不是自己生的，妈妈还是不一定知道的，特别刚出生的，长得都一个皱巴巴的红皮猴样儿，认错了咋办。

就需要用到instanceof 这个关键词了，这个就相当于DNA验证，从孩子身上取下来头发跟大人的比对，是就回true ，不是就回false。

childObjName instanceof ParentObjName

那么就引出一个新的问题了，你把孩子拿去“克隆”一个，“克隆人”的妈到底是谁？

function mother (name,age,gender) {
    this.name = name;
    this.age = age;
    this.gender = gender;
}

let son = new mother("tom",15,"man");
let baby = son;

baby.name = "neko";
console.log(son.name); // neko
console.log(baby.name); // neko

console.log(baby instanceof mother); // true
console.log(baby instanceof son); // Uncaught TypeError: Right-hand side of 'instanceof' is not callable

可以得出一个结论，在代码的时间里，克隆人就是本尊的别称，约等于微博大小号背后人的关系。所以你还是你，你妈自然还是你妈。你不能成为你妈。

那么又有一个新的问题了，显然上面的克隆办法是一个deep copy，就跟上文的object lateral 区别不大！

有没有shallow copy？有。

function mother (name,age,gender) {
    this.name = name;
    this.age = age;
    this.gender = gender;
}

let son = new mother("tom",15,"man");
let baby = {
  ...son
};

baby.name = "neko";
console.log(son.name); // tom
console.log(baby.name); // neko

console.log(baby instanceof mother); // false
console.log(baby instanceof son); // Uncaught TypeError: Right-hand side of 'instanceof' is not callable

这个方法叫spread，可以看到baby确实数据独立了，但是就像捡回来的，没妈。

只更改上面代码片段中的下面这句：

let baby = Object.assign({},son);

结果是完全一样的，更多关于copy object 的内容：

3 Ways to Copy Objects in JavaScript

先暂停，我要想一下咋写，感觉不够清晰，所以写的文字自己都开始觉得是在裹脚布了。