丸子学JS（学习1小时 - 面向对象基础）

前言

一晃终于学到了面向对象，这一块花了好长一段时间去理解，内容不多但是需要时间去消化

对象是什么

1）对象是单个事物的抽象
2）对象是一个容器，封装了属性（property）和方法（method）

什么是面向对象

面向对象不是新的东西，它只是过程式代码的一种高度封装，目的在于提高代码的开发效率和可维护性。

创建对象

• 简单方式
  1、new Object() 创建

var person = new Object()
    person.name = 'som'
    person.age = 18
    person.sayName = function() {
        console.log(this.name)
    }

2、对象字面量创建

var person = {
    name: 'som',
    age: 18,
    sayName: function(){
        console.log(this.name)
    }
}

• 工厂函数方式

function createPerson (name, age) {
  return {
    name: name,
    age: age,
    sayName: function () {
      console.log(this.name)
    }
  }
}

优雅的工厂函数 - 构造函数

function Person (name, age) {
  this.name = name
  this.age = age
  this.sayName = function () {
    console.log(this.name)
  }
}

var p1 = new Person('Jack', 18)
p1.sayName() // => Jack

var p2 = new Person('Mike', 23)
p2.sayName() // => Mike

使用new 操作符构造函数将经历下面4个步骤

1. 创建一个新对象
2. 将构造函数的作用域赋给新对象（因此 this 就指向了这个新对象）
3. 执行构造函数中的代码
4. 返回新对象

构造函数和实例对象的关系

使用构造函数的好处不仅仅在于代码的简洁性，更重要的是我们可以识别对象的具体类型了。在每一个实例对象中的proto中同时有一个 constructor 属性，该属性指向创建该实例的构造函数

console.log(p1.constructor === Person) // => true
console.log(p2.constructor === Person) // => true
console.log(p1.constructor === p2.constructor) // => true

使用 instanceof 检测实例是否属于某个构造函数构建的

console.log(p1 instanceof Person) // => true
console.log(p2 instanceof Person) // => true

原型 prototype

每一个构造函数都有一个prototype属性，指向另一个对象， 这个对象的所有属性和方法都会被构造函数的实例继承

function Person (name, age) {
  this.name = name
  this.age = age
}
Person.prototype.type = 'human'

Person.prototype.sayName = function () {
  console.log(this.name)
}

var p1 = new Person(...)
var p2 = new Person(...)

console.log(p1.sayName === p2.sayName) // => true

构造函数、实例、原型之间的关系

更简单的原型写法

function Person (name, age) {
  this.name = name
  this.age = age
}

Person.prototype = {
  constructor: Person, // => 手动将 constructor 指向正确的构造函数
  type: 'human',
  sayHello: function () {
    console.log('我叫' + this.name + '，我今年' + this.age + '岁了')
  }
}