JS对象的分类
代码
//创建正方形对象
let fan = {
width: 5,
zhou() {
return this.width * 4
},
mian() {
return this.width * this.width
}
}
//升级1
let fan = []
for (let i = 1; i < 12; i++) {
fan[i] = {
width: 5,
zhou() {
return this.width * 4
},
mian() {
return this.width * this.width
}
}
}
//决绝每个宽度不同的问题
let fan = []
let widths = [5, 6, 7, 8, 9, 10, 1, 2, 3, 5, 5, 6]
for (let i = 0; i < 12; i++) {
fan[i] = {
width: widths[i],
zhou() {
return this.width * 4
},
mian() {
return this.width * this.width
}
}
}
//上面的太浪费，在升级接着煮原型
let fan = []
let widths = [5, 6, 7, 8, 9, 10, 1, 2, 3, 5, 5, 6]
let fanprototype = {
zhou() {
return this.width * 4
},
mian() {
return this.widht * this.width
}
}
for (let i = 0; i < 12; i++) {
fan[i] = Object.create(fanprototype)
fan[i].width = widths[i]
}
//再次审计
let fan = []
let widths = [5, 6, 7, 8, 9, 10, 1, 2, 3, 5, 5, 6]
function createFan(width) {
let fan = Object.create(fanprototype)
fan.width = width
return fan
}
let fanprototype = {
zhou() {
return this.width * 4
},
mian() {
return this.widht * this.width
}
}
for (let i = 0; i < 12; i++) {
fan[i] = createFan(widths[i])
}
//函数和原型结合（上边的不够紧密）
let fan = []
let widths = [5, 6, 7, 8, 9, 10, 1, 2, 3, 5, 5, 6]
function createFan(width) {
let obj = Object.create(createFan.fanprototype)//把原型挂在在函数上，先试用定义
obj.width = width
return obj
}
createFan.fanprototype = {
zhou() {
return this.width * 4
},
mian() {
return this.widht * this.width
},
constructor: createFan//对象是谁构造的
}
for (let i = 0; i < 12; i++) {
fan[i] = createFan(widths[i])
console.log(fan[i].constructor)
// console.log(i)
//constructor可以知道是谁构造了这个对象
}
//函数和原型结合（重写）
let fan = []
let widths = [5, 6, 7, 8, 9, 10, 1, 2, 3, 5, 5, 6]
function createFan(width) {
this.width = width
}
createFan.prototype.zhou = function () {
return this.width * 4
}
createFan.prototype.mian = function () {
return this.width * this.width
}
for (let i = 0; i < 12; i++) {
fan[i] = new createFan(widths[i])
// console.log(i)
//constructor可以知道是谁构造了这个对象
}
总结
new X() 自动做了四件事情
自动创建空对象
自动为空对象关联原型，原型地址指定为 X.prototype
自动将空对象作为 this 关键字运行构造函数
自动 return this
构造函数 X
X 函数本身负责给对象本身添加属性
X.prototype 对象负责保存对象的共用属性
代码规范
大小写
所有构造函数（专门用于创建对象的函数）首字母大写
所有被构造出来的对象，首字母小写
词性
new 后面的函数，使用名词形式
如 new Person()、new Object()
其他函数，一般使用动词开头
如 createSquare(5)、createElement('div')
其他规则以后再说
如何确定一个对象的原型
为什么
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 操作故意这么做的，做了什么？
原型公式
对象是谁构造的，原型就是谁的prototype属性对应的对象
对象.__proto__ === 其构造函数.prototype
对象需要分类吗
需要分类
理由一
有很多对象拥有一样的属性和行为
需要把它们分为同一类
如 square1 和 square2
这样创建类似对象的时候就很方便
理由二
但是还有很多对象拥有其他的属性和行为
所以就需要不同的分类
比如 Square / Circle / Rect 就是不同的分类
Array / Function 也是不同的分类
而 Object 创建出来的对象，是最没有特点的对象
类型 V.S. 类
类型
类型是 JS 数据的分类，有 7 种
四基两空一对象
类
类是针对于对象的分类，有无数种
常见的有 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'
其实就是英语小课堂啦，用法都在 MDN
后面会有单独课程教这些 API
函数对象
定义一个函数
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'
后面会有单独课程介绍函数
JS 终极一问
window 是谁构造的
Window
可以通过 constructor 属性看出构造者
window.Object 是谁构造的
window.Function
因为所有函数都是 window.Function 构造的
window.Function 是谁构造的
window.Function
因为所有函数都是 window.Function 构造的
自己构造的自己？并不是这样，这是「上帝」的安排
浏览器构造了 Function，然后指定它的构造者是自己
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
}
ES6引入新语法
//使用class类
//创建一个正方形，有宽，周长，面积
class Fan {
constructor(width) {
this.width = width
}
zhuo() {
return this.width * 4
}
mian() {
return this.width * this.width
}
}
新人建议
\
