JS 对象分类

new 操作符

创建一个用户定义的对象类型的实例或具有构造函数的内置对象的实例

new X() 自动做的事情

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

构造函数 X

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

代码规范

大小写

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

词性

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

原型公式

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

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

Object.prototype 的原型是什么?  // null

代码示例

function Cat (name){
    this.name = name 
    this.color = 'black'
    this.kind = '英短'
}
Cat.prototype.run = function(){ console.log( 'running' ) }
Cat.prototype.calls = function(){ console.log( 'miaomiao' ) }
let cat1 = new Cat ('lose')
cat1
// Cat {name: "lose", color: "black", kind: "英短"}
   color: "black"
   kind: "英短"
   name: "lose"
   __proto__:
   calls: ƒ ()
   run: ƒ ()
   constructor: ƒ Cat(name)
   __proto__: Object
cat1.calls()
// miaomiao
   

正方形

function Square(width){ 
  this.width = width
}
Square.prototype.getArea = function(){ 
  return this.width * this.width 
}
Square.prototype.getLength = function(){
  return this.width * 4
}
let square = new Square(5)

square.width
// 5
square.getArea()
// 25
square.getLength()
// 20

 圆形

function Circle(radius){ 
  this.radius = radius
}
Circle.prototype.getArea = function(){ 
  return Math.pow(this.radius,2) * Math.PI  
}
Circle.prototype.getLength = function(){
  return this.radius * 2 * Math.PI
}
let circle = new Circle(5)
circle.radius
// 5
circle.getArea()
// 78.5
circle.getLength()
// 31.4

 长方形

function Rect(width, height){ 
  this.width = width
  this.height = height
}
Rect.prototype.getArea = function(){ 
  return this.width * this.height  
}
Rect.prototype.getLength = function(){
  return (this.width + this.height) * 2
}
let rect = new Rect(4,5)
rect.width
// 4
rect.height
// 5
rect.getArea()
// 20
rect.getLength()
// 18

对象为什么需要分类？

理由1

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

理由2

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

类型和类的区别

• 类型是 JS 数据的分类，有8种
• number string symbol boolean bigint undefined null object
• 类是针对于对象的分类，有无数种
• 常见的有 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

函数对象

定义一个函数

• 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，然后指定它的构造者是自己

ES6 引入新语法 class

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
  }
}

用 class 写正方形

class Square{
  constructor(width){ 
    this.width = width
  }
  getArea(){ 
    return this.width * this.width
  }
  getLength(){
    return this.width * 4
  }
}
let square = new Square(5)
square.width
// 5
square.getArea()
// 25
square.getLength()
// 20

用 class 写圆形

class Circle{
  constructor(radius){
    this.radius = radius
  } 
  getArea(){ 
    return Math.pow(this.radius,2) * Math.PI  
  }
  getLength(){
    return this.radius * 2 * Math.PI
  }
}
let circle = new Circle(5)
circle.radius
// 5
circle.getArea()
// 78.5
circle.getLength()
// 31.4

用 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 rect = new Rect(4,5)
rect.width
// 4
rect.height
// 5
rect.getArea()
// 20
rect.getLength()
// 18

*本文为鲲游北冥的原创文章，著作权归本人和饥人谷所有，转载务必注明来源