new操作符

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

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

——这就是 JS 之父的爱

构造函数 X

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

做一个小程序宽度来回变换并输出正方形的周长面积

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 后面的函数，使用名词形式
如 new Person()、new Object()
其他函数，一般使用动词开头**
如 createSquare(5)、createElement('div')
其他规则以后再说**

一个重要的公式也是 JS 里唯一的一个公式

原型公式：

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

结论：

你是谁构造的你的原型就是谁的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构造的

因为所有函数都是 window.Function 构造的自己构造的自己？并不是这样，这是「上帝」的安排浏览器构造了 Function，然后指定它的构造者是自己

ES 6 引入了新语法

class 统治天下

新手建议这么多新语法怎么学

两种学法

花一大块时间把 MDN class 文档全部看完，并记下来
看到方方用什么，就学一点，课程学完，就都学会了
推荐第二种学法，因为新语法实在太多了
在实践中学，记得更牢

到底有多少新语法

我已经整理了 ES6 的所有新语法，点击查看
关于类和对象的新语法有页面1，页面2和页面3
所以前端学得越早，越轻松

用 class 重写 Circle

JS 对象分类