JS对象分类

new

案例1：写一个正方形程序

let square = {
	width: 5,
	getArea(){
	return this.width * this.width
	},
	getLength(){
	return this.width * 4
	}
}
//正方形的三个属性，边长（width）、面积（Area）、周长（Length）
复制代码

案例2：写十二个正方形程序（写十二遍程序）

let square = {
	width: 5,
	getArea(){
	return this.width * this.width
	},
	getLength(){
	return this.width * 4
	}
}
let square2 = {
	width: 6,
	getArea(){
	return this.width * this.width
	},
	getLength(){
	return this.width * 4
	}
}
let square3 = { ...
//这种写法很浪费时间，强烈不推荐
复制代码

案例3：使用for循环

let squareList = []	//表示空的一个数组
for(let i = 0; i<12; i++){
	squareList[i] = {
		width: 5,
		getArea(){
			return this.width * this.width
		},
		getLength(){
			return this.width * 4
		}
	}
}
//
复制代码

案例4：边长不全是5

let squareList = []
let widthList = [5,6,5,6,5,6,5,6,5,6,5,6]
for(let i = 0; i<12; i++){
	squareList[i] = {
		width: widthList[i],
		getArea(){
			return this.width * this.width
		},
		getLength(){
			return this.width * 4
		}
	}
}//比较浪费内存，getArea 和 getLength 两组函数重复存了24次，也就是多存了22次。
复制代码

案例5：把对象放进原型里

let squareList = []
let widthList = [5,6,5,6,5,6,5,6,5,6,5,6]
let squarePrototype = {
	getArea(){
		return this.width * this.width
	},
	getLength(){
		return this.width * 4
	}
}//把getArea和getLength两个函数放进了squarePrototype（square原型）里
for(let i = 0; i<12; i++){
	squareList[i] = Object.create(squarePrototype)	//创建的对象的原型是squarePrototype
	squareList[i].width = widthList[i]	//在对象上添加一个宽度
}
//创建 square 的代码过于分散
复制代码

案例6：抽离到函数

let squareList = []
let widthList = [5,6,5,6,5,6,5,6,5,6,5,6]
function createSquare(width){ //此函数叫做构造函数
	let obj = Object.create(squarePrototype)	// 以 squarePrototype 为原型创建空对象
	obj.width = width
	return obj
}
let squarePrototype = {
	getArea(){
		return this.width * this.width
	},
	getLength(){
		return this.width * 4
	}
}
for(let i = 0; i<12; i++){
	squareList[i] = createSquare(widthList[i])
}
复制代码

构造函数：可以构造出对象的函数

案例7: 原型和构造函数组合

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)
}
复制代码

案例8:使用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)
}
复制代码

prototype

• 每个函数都有 prototype 属性
• 每个 prototype 都有 constructor 属性
• 所有 constructor 属性一出生就保存了对应的函数的地址
• 如果一个函数不是构造函数，它依然拥有 prototype 属性，只不过这个属性暂时没什么用
• 如果一个对象不是函数，那么这个对象一般来说没有 prototype 属性，但这个对象一般一定会有 proto 属性

总结：

1. new自动做的事情

• 自动创建空对象
• 自动为空对象关联原型，原型地址为 X.prototype。比如：let obj = new Object()的原型就是Object.portotype。
• 自动将空对象作为this关键字运行构造函数
• 自动return this

2. 构造函数 X

• X 函数本身负责给对象本身添加属性
• X.prototype 对象负责保护对象的共有属性

3. 代码规范

• 所有构造函数（专门创建对象的函数）首字母大写。
• 所有被构造出来的对象，首字母小写。
• new后面的函数，使用名词形式。如new Person()、new Object()。
• 其他函数，一般使用动词开头。如createSquare(5)、createElement('div')。

4. 原型公式

• 对象.__porto__ === 其构造函数.prototype
• 「x 的原型」等价于「x.proto 所指的对象」等价于「X.prototype 所指的对象」

类

对象需要分类

• 很多对象拥有一样的属性和行为，需要把他们分为同一类，这样创建类似对象的时候就很方便，如square1/square2；
• 还有很多对象拥有其他的属性和行为，比如Square/Circle/Rect等等，而Object创建出来的对象是最没有特点的对象

数组对象

定义一个数组

let arr = [1,2,3]  //简写方式
let arr = new Array(1,2,3)	//元素为1，2，3
let arr = new Array(3)	//长度为3
复制代码

函数对象

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')
复制代码

代码练习

构造函数

function Person(name, age){
    this.name = name
    this.age = age
}
Person.prototype.sayHi = function(){
  console.log(`你好，我是${this.name}`)
  或者
  console.log('你好，我是'+this.name)
}
let person = new Person('jack', 19)
person.name === 'jack' 
// true
person.age === 19 
// true
person.sayHi() 
// 打印出「你好，我叫 jack」
复制代码

class

class Person{
  constructor(name, age){
      this.name = name
      this.age = age
  }
  sayHi(){
       console.log(`你好，我是${this.name}`)
      或者
      console.log('你好，我是'+this.name)
  }
}
let person = new Person('jack', 19)
person.name === 'jack' 
// true
person.age === 19 
// true
person.sayHi() 
// 打印出「你好，我叫 jack」
复制代码