JS 中的构造函数和类

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

当我们调用这个函数创建一个对象时
我们一般说f时Person对象
也就是f是由Person构造函数构造出来的对象

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

接下来给构造函数增加隐藏属性

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

注意这里我们Person虽然是函数 但函数就是特殊形式的对象 所以可以直接在Person函数加上key（共有属性） 这里

const obj = Object.create(Person.共有属性);

其实就相当于obj = {prototype： Person.共有属性}

构造函数的标准写法

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} 在跑步`)
  }
}

相应的变化：

• 1.直接免去了创建obj的过程，直接使用this
• 2.在调用函数的时候加new
• 3.不需要再创建共有属性，以及不需要关联隐藏属性与共有属性的关系
• 4.浏览器在创建构造函数的时候就写好了 xx.共有属性

用new的好处

• 1.1. new会帮你创建好一个新对象
• 2.2. new会帮你准备Person.共有属性
• 3.3. new会帮你关联隐藏属性与共有属性（即直接调用Person.prototype即可）
• 4.new会帮你return新对象

箭头函数不能当作构造函数（不支持this，不支持prototype）(箭头函数把this作为普通变量 不支持this的特殊逻辑)

以及最终最终最终还是会比较经常使用class写法 ????

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

constructor里面就是自有属性
后面函数都是共有属性 可以在prototype中找得到

---

class与js构造函数写法的小点

• 1.class写法不能在共有属性中有非函数类型 而js写法就可以在共有属性中加入非函数类型
• 2.class写法不推荐直接给Person函数增加一个属性

不要将构造函数写法和 class 写法进行对比分别掌握即可