JS对象分类以及构造函数

我们先引入一个概念，JavaScript中用new关键字来调用的函数是构造函数，它可以构造对象。

new操作符

new X ()自动做了四件事

• 自动创建空对象
• 自动为空对象关联原型，原型地址为X.prototype
• 自动将空对象作为this关键字运行构造函数
• 自动return this
  构造函数X
• X函数本身负责给对象本身添加属性
• X.prototype对象负责保存对象的共有属性

一些规范

• 所有构造函数（用于创建对象的函数）首字母大写
• 所有被构造出来的对象，首字母小写
  New后面的函数使用名词开头，比如new Person()、new Object()
  其他函数一般使用动词开头，比如createSquare(5)、createElement('div')
  举一个生动的例子：假设我们需要求12个正方形的周长和面积，每个正方形的边长为5和6相间，思路：
  每个正方形自己固有的属性是边长，通过数组实现。然而他们的周长和面积计算方法是一样的，这属于他们的共有属性，所以则运用到函数和原型的结合。

        let widthList = [5, 6, 5, 6, 5, 6, 5, 6, 5, 6, 5, 6]
        let squareList = []
        function Square(width) {
            this.width = width
        }
        Square.prototype.getArea = function (width) {
            return this.width * this.width
        }
        Square.prototype.getLength = function (width) {
            return this.width * 4
        }
        for (i = 0; i < 12; i++) {
            squareList[i] = new Square(widthList[i])
            console.log(squareList[i].constructor)
        }

如果条件变化一下，将正方形改成长方形，我们给定一个宽和高要求它的周长的面积，我们该怎么办呢。长方形不同于正方形的是它有两个参数，分别是 宽和高，只要在声明函数时，写两个参数即可。

        function Rect(width, height) {
            this.width = width
            this.height = height
        }
        Rect.prototype.getArea = function (width, height) {
            return this.width * this.height
        }
        Rect.prototype.getLength = function (width, height) {
            return this.width * this.height
        }
        let rect = new Rect(4, 5)

原型公式
对象.__proto__=其构造函数.prototype

类型和类

类型

JS中类型值得是七种数据类型：Number、String、Boolean、undefined、object、Null以及 Symbol。

类

类是针对于对象的分类，常见的有数组、函数、日期、正则等无数种。
这里介绍数组对象和函数对象。
数组对象

• 定义一个数组：
  let arr = [1,2,3]
let arr = new Array(1,2,3) // 元素为 1,2,3
let arr = new Array(3) // 长度为 3
• 数组对象的自身属性
  '0' / '1' / '2' / 'length'这些都是字符串
• 数组对象的共有属性
  'push' / 'pop' / 'shift' / 'unshift' / 'join'
  函数对象
• 定义一个函数
  function fn(x,y){return x+y}
let fn2 = function fn(x,y){return x+y}
let fn = (x,y) => x+y
let fn = new Function('x','y', 'return x+y')
• 函数对象自身的属性
  'name' / 'length'
• 函数对象的共有属性
  'call' / 'apply' / 'bind'

重要的问题：

• window是谁构造的
  答：Window，可以通过constructor属性看到构造者
• window.Object是谁构造的
  答：window.Function
  因为所有函数都是window.Function构造的
• Window.Function是谁构造的
  答：window.Function
  因为所有函数都是window.Function构造的，浏览器构造了Function，然后指定他的构造者是他自己

Class语法

我们直接通过上文写过的长方形原型写法与class对比一下。
class写法:

class Rect{
  constructor(width, height){ 
    this.width = width
    this.height = height
  }
  getArea(){ 
    return this.width * this.height  
  }
  getLength(){
    return (this.width + this.height) * 2
  }
}
let react = new Rect(4,5)

原型写法：

        function Rect(width, height) {
            this.width = width
            this.height = height
        }
        Rect.prototype.getArea = function (width, height) {
            return this.width * this.height
        }
        Rect.prototype.getLength = function (width, height) {
            return this.width * this.height
        }
        let rect = new Rect(4, 5)

有图可知，对象本身的属性在class的语法中被写到了constructor(){ }中，共有属性直接写在外面。class写法可能从理解层面比原型写法更容易一些，但是他们都是来给对象分类的，所以我们都有必要学习。