《javaScript高级程序设计》阅读：15-详细的谈一谈原型

原型模式

要了解原型，首先要了解原型对象。

每个函数都有一个prototype属性，这个属性是一个指针，指向原型对象。他的优点是可以让实例共享他（原型对象）的所有属性和方法。

那么怎么理解原型对象呢？

1. 创建新函数，该函数会创建一个prototype的属性，属性指向原型对象
2. 原型对象自动获得constructor属性，该属性指向prototype所在函数。
3. 创建构造函数后，原型对象只有一个constructor属性，其余属性和方法挂载到Object上面。
4. 当通过该函数创建实例的时候，实例内部包含一个属性proto,指向原型对象。

function Person () {}

    Person.prototype.name = "simoon"
    Person.prototype.age = "18"
    Person.prototype.job = "web"
    Person.prototype.sayName = function () {
      console.log(this.name)
    }
    var person1 = new Person()
    var person2 = new Person()
    person1.sayName()
    person2.sayName()

输出如下：

simoon
simoon

如何确定实例和原型对象的关系？

1. isPrototypeOf

console.log(Person.prototype.isPrototypeOf(person1))
console.log(Person.prototype.isPrototypeOf(person2))

2、H5新增：Object.getPrototypeOf(),可以用来方便的获取一个对象的原型。

console.log(Object.getPrototypeOf(person1) === Person.prototype)  //true
console.log(Object.getPrototypeOf(person1).name)//simoon

原型链：

每当代码读取某个属性的时候，都会执行一次搜索，目标是具有给定名字的具体属性。如果实例中有的话，就停止查找。如果实例中没有的话，就会查找proto指向的原型对象去查找。

检测一个属性是存在与原型还是实例中？

hasOwnProperty（）

console.log(person1.hasOwnProperty("name"))    //false
person2.name = "banner"
console.log(person2.hasOwnProperty("name"))   //true
// 当重新给person的name属性赋值了，就会返回true

原型与in

单独使用in的时候，它不管属性是原型还是实例的，只要有该属性，都会返回true。

console.log("name" in person1)  //true
console.log("name" in person2)  //true

通过上面就能知道确定属性是不是原型属性了。
如果in返回true，而hasOwnProperty返回false，那么这个属性就是原型属性。

在es5中，constructor和property的属性是不可枚举的。

如何获得对象的可枚举属性？
Object.keys(Person.prototype)
如何获得对象的所有属性么？
Object.getOwnPropertyNames(Person.prototype)

var keys = Object.keys(Person.prototype)
console.log(keys)
//(4) ["name", "age", "job", "sayName"]
var allKeys = Object.getOwnPropertyNames(Person.prototype)
console.log(allKeys)
//(5) ["constructor", "name", "age", "job", "sayName"]

更简单的原型语法—> 用字面量的方法

person.prototype = {
      name: 'simoon',
      age: 20,
      job: 'web',
      sayName () {
        alert(this.name)
      }
    }

这样会很方便，但是会有一个问题

问题:这时候的constructor就不再指向Person了,指向Object.
原因:完全重写对象,相当于new了一个Object.
解决办法:

person.prototype = {
      constructor: Person,
      name: 'simoon',
      age: 20,
      job: 'web',
      sayName () {
        alert(this.name)
      }
    }

但是这时候,这个constyuctor又是可枚举的,而原生的是不可枚举的.
Es新增的方法解决:

person.prototype = {
      name: 'simoon',
      age: 20,
      job: 'web',
      sayName () {
        alert(this.name)
      }
    }
    Obeject.defineProperty(Person.prototype, 'constructor', {
      enumerable: false,
      value: Person
    })

原型的动态性

1. 如果先创建实例，后修改原型，依然能访问到这个原型的属性。
2. 但是如果重写整个原型对象，就不可以了，因为重写之后，就切断了实例和新原型对象的关系。

原型对象有什么问题？

1. 它省略了构造函数初始化的参数，所有实例默认情况下参数一致
2. 最大的问题是，原型中的属性和方法被实例共享，这对于函数和基本类型合适，但是对于引用类型就不合适了。

Person.prototype = {
      name: 'simoon',
      age: 20,
      job: 'web',
      sayName () {
        alert(this.name)
      },
      firends: ['banner', 'conner']
    }

    var person1 = new Person()
    var person2 = new Person()
    person1.firends.push('mingming')

    console.log(person1.firends)
     ["banner", "conner", "mingming"]
    console.log(person2.firends)
     ["banner", "conner", "mingming"]
    // 这时候我并不想改便person2的firends啊

解决办法这里提供两种：

1. 组合使用构造函数和原型模式

function Person(name, age, job) {
      this.name = name,
      this.age = age,
      this.job = job,
      this.firends = ['a', 'b']
    }
    Person.prototype = {
      constructor: Person,
      sayName () {
        console.log(this.name)
      }
    }
    var person1 = new Person()
    var person2 = new Person()
    person1.firends.push('mingming')

    console.log(person1.firends)
     //["a", "b", "mingming"]
    console.log(person2.firends)
     //["a", "b"]

优点：

构造函数上面挂实例属性，原型上面挂方法和共享的属性，每个实例又有自己的副本，同时又共享方法引用，还支持向构造函数传参

2、 动态原型模式

把所有的信息都封装到构造函数中，通过在构造函数中初始化原型，又保持了原型和构造函数的优点。

function Person(name, age, job) {
      this.name = name,
      this.age = age,
      this.job = job,
      this.firends = ['a', 'b']
      if (typeof this.sayName != 'function') {
        Person.prototype.sayName = function () {
          console.log(this.name)
        }
      }
    }

    var person1 = new Person('simoon', 28, 'web')
    person1.sayName()
//simoon