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

我们先引入一个概念，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写法可能从理解层面比原型写法更容易一些，但是他们都是来给对象分类的，所以我们都有必要学习。