JavaScript原型与原型链

JavaScript原型与原型链

原型

1、每个函数都有一个prototype属性，它默认指向一个Object空对象(即称为: 原型对象)，原型对象中有一个constructor，它指向函数对象
2、给原型对象添加属性（一般都是方法），作用:函数的所有实例对象自动拥有原型中的属性（方法）

<script type="text/javascript">
  // 每个函数都有一个prototype属性, 它默认指向一个对象(即称为: 原型对象)
  console.log(Date.prototype, typeof Date.prototype)   //输出结果：Object "object"
  function fn() {
  }
  console.log(fn.prototype, typeof fn.prototype)   //输出结果：Object "object"
  // 原型对象中有一个属性constructor, 它指向函数对象
  console.log(Date.prototype.constructor===Date)   //输出结果：true
  console.log(fn.prototype.constructor===fn)      //输出结果：true
  // 2. 给原型对象添加属性(一般都是方法)
  function F() {
  }
  F.prototype.age = 12 //添加属性
  F.prototype.setAge = function (age) { // 添加方法
    this.age = age
  }
  // 创建函数的实例对象
  var f = new F()
  console.log(f.age)    //输出结果：12
  f.setAge(23)
  console.log(f.age)   //输出结果：23
</script>

显式原型

每个函数function都有一个prototype，即显式原型，在 定义函数时自动添加的，默认值是一个空Object对象

隐式原型

每个实例对象都有一个-proto-，可称为隐式原型，对象的隐式原型的值为其对应构造函数的显示原型的值。

总结及显式原型与隐式原型分析图

程序员能直接操作显示原型，但不能直接操作隐式原型（ES6之前）

原型链（隐式原型链）

访问一个对象属性时，先在自身属性中查找，找到返回；如果没有，再沿着proto这条链向上查找，找到返回；如果最终没有找到，返回undefined，原型链例子如下：

<script type="text/javascript">
  function Fn() {
    this.test1 = function () {
      console.log('test1()')
    }
  }
  Fn.prototype.test2 = function () {
    console.log('test2()')
  }
  var fn = new Fn()

  fn.test1()   //输出结果：test1()
  fn.test2()   //输出结果：test2()
  console.log(fn.toString())  //输出结果：[object Object]
  fn.test3()  //输出结果：fn.test3 is not a function
</script>

原型链分析图：