new 操作符

例子：创建12个正方形

let squareList = []
let widthList = [5,6,5,6,5,6,5,6,5,6,5,6]
function createSquare(width){
  let obj = Object.create(createSquare.squarePrototype) 
  obj.width = width
  return obj
}
createSquare.squarePrototype = { // 把原型放到函数上
  getArea(){ 
    return this.width * this.width 
  },
  getLength(){
    return this.width * 4
  },
  constructor: createSquare //方便通过原型找到构造函数
}
for(let i = 0; i<12; i++){
  squareList[i] = createSquare(widthList[i])
  console.log(squareList[i].constructor) 
  // constructor 可以知道谁构造了这个对象
}

用 new 改写

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

new X() 自动做了四件事情

自动创建空对象
自动为空对象关联原型，原型地址指定为 X.prototype
自动将空对象作为 this 关键字运行构造函数
自动 return this ——这就是 JS 之父的爱

构造函数 X

X 函数本身负责给对象本身添加属性
X.prototype 对象负责保存对象的共用属性

代码规范

大小写

所有构造函数（专门用于创建对象的函数）首字母大写
所有被构造出来的对象，首字母小写

词性

new 后面的函数，使用名词形式，如 new Person()、new Object()
其他函数，一般使用动词开头，如 createSquare(5)、createElement('div')

JS 一个重要的公式

为什么

let obj = new Object() 的原型是 Object.prototype
let arr = new Array() 的原型是 Array.prototype
let square = new Square() 的原型是 Square.prototype
let fn = new Function() 的原型是 Function.prototype

因为 new 操作故意这么做的

自动创建空对象
自动为空对象关联原型，原型地址指定为 X.prototype
自动将空对象作为 this 关键字运行构造函数
自动 return this

因此，得出结论

你是谁构造的，你的原型就是谁的 prototype 属性对应的对象

原型公式

对象.__proto__ === 其构造函数.prototype

对象需要分类吗

需要分类

理由一

有很多对象拥有一样的属性和行为，需要把它们分为同一类。如 square1 和 square2，这样创建类似对象的时候就很方便

理由二

但是还有很多对象拥有其他的属性和行为，所以就需要不同的分类，比如 Square / Circle / Rect 就是不同的分类，Array / Function 也是不同的分类，而 Object 创建出来的对象，是最没有特点的对象

类型 V.S. 类

类型

类型是 JS 数据的分类，有 8 种：五基两空一对象

类

类是针对于对象的分类，有无数种。常见的有 Array、Function、Date、RegExp 等

数组对象

定义一个数组

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'

Array - JavaScript | MDN

函数对象

定义一个函数

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'

Function MDN

class

class Square{
  static x = 1
  width = 0
  constructor(width){
    this.width = width
  } 
  getArea(){ 
    return this.width * this.width 
  }
  getLength(){
    return this.width * 4
  }
  get area2(){ // 只读属性
    return this.width * this.width
  }
}

原型好，还是类好？都是用来给对象分类的

JS 对象分类