JS中的构造函数与类

自制一个构造函数

function Person(name, age) {
  name = name || '匿名'
  age = age || 0
  const obj = {
    name: name,
    age: age
  }
  return obj
}

这个构造函数等价于

function Person(name = '匿名', age = 0) {
  return { name, age }
}

const f = Person('fang', 18)
console.log(f)

现在Person构造出来的对象都能sayHi

function Person(name = '匿名', age = 0) {
  const sayHi = function () {
    console.log(`你好，我是${name}`)
  }
  return { name, age, sayHi }
}

等价于

function Person(name = '匿名', age = 0) {
  return {
    name,
    age,
    sayHi() {
      console.log(`你好，我是${name}`)
    }
  }
}

const f1 = Person( 'fang', 18)
f1.sayHi()
const f2 = Person( 'yuan', 20)
f2.sayHi()

现在想把f1的sayHi和f2的sayHi合二为一

const sayHi = function() {
  console.log(`你好，我是${this.name}`)
}
function Person(name = '匿名',age = 0 ) {
  return{name, age, sayHi}
}

除了sayHi,Person构造出来的对象还有run

const sayHi = function() {
  console.log(`你好，我是${this.name}`)
}
const run = function() {
  console.log(`${this.name}在跑步`)
}
function Person(name = '匿名',age = 0 ) {
  return{name, age, sayHi, run}
}

现在让我们来减少变量名

const Person共有属性 = {
  sayHi: function () {
    console.log(`你好，我是${this.name}`)
  },
  run: function () {
    console.log(`${this.name}在跑步`)
  }
}
function Person(name = '匿名', age = 0) {
  return { name, age, sayHi, run }
}

精简为一个变量名

Person.共有属性 = {
  sayHi: function () {
    console.log(`你好，我是${this.name}`)
  },
  run: function () {
    console.log(`${this.name}在跑步`)
  }
}
function Person(name = '匿名', age = 0) {
  return {
    name,
    age,
    sayHi: Person.共有属性.sayHi,
    run: Person.共有属性.run
  }
}

利用隐藏属性，把共有属性放进隐藏属性

function Person(name = '匿名', age = 0) {
  const obj = Object.create(Person.共有属性)
  //obj的隐藏属性为Person.共有属性
  obj.name = name
  obj.age = age
  return obj
}
Person.共有属性 = {
  sayHi: function () {
    console.log(`你好，我是${this.name}`)
  },
  run: function () {
    console.log(`${this.name}在跑步`)
  }
}

运行一下

const f1 = Person('fang', 18)
f1.sayHi()
f1.run()
const f2 = Person('yuan', 20)
f2.sayHi()
f2.run()

打印一下console.log(f1.constructor) -> Object

Person.共有属性 = {
  constructor: Person,
  sayHi: function () {
    console.log(`你好，我是${this.name}`)
  },
  run: function () {
    console.log(`${this.name}在跑步`)
  }
}

最终构造函数Person是这个样子

function Person(name = '匿名', age = 0) {
  const obj = Object.create(Person.共有属性)
  //obj的隐藏属性为Person.共有属性
  obj.name = name
  obj.age = age
  return obj
}

Person.共有属性 = {
  constructor: Person,
  sayHi: function () {
    console.log(`你好，我是${this.name}`)
  },
  run: function () {
    console.log(`${this.name}在跑步`)
  }
}

现在加上new

function Person(name = '匿名', age = 0) {
  this.name = name
  this.age = age
}

Person.prototype = {
  constructor: Person,
  sayHi() {
    console.log(`你好，我是${this.name}`)
  },
  run() {
    console.log(`${this.name}在跑步`)
  }
}

const f1 = new Person('fang', 18)
f1.sayHi()
f1.run()
const f2 =  new Person('yuan', 20)
f2.sayHi()
f2.run()

new的好处

• new帮你创建一个新对象
• new帮忙准备Person.共有属性
• new帮忙关联隐藏属性与共有属性
• new返回一个新对象

class写法

class Person {
  constructor(name = '匿名', age = 0) {
    this.name = name
    this.age = age
  }
  sayHi() {
    console.log(`你好，我是${this.name}`)
  }
  run() {
    console.log(`${this.name}在跑步`)
  }
}