javascript学习笔记（十三） --原型和原型链（二）

一、原型

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

<script type="text/javascript">
  console.log(Date.prototype, typeof Date.prototype);//Object, "object"
  function Fun() {}
  
  console.log(Fun.prototype);//Object  默认指向一个Object空对象(没有我们的属性)

  //原型对象中有一个属性constructor, 它指向函数对象
  console.log(Date.prototype.constructor === Date); //true
  console.log(Fun.prototype.constructor === Fun); //true

  // 给原型对象添加属性(一般都是方法) ==>实例对象可以访问
  Fun.prototype.test = function () {
    console.log('test()');
  }
  var fun = new Fun()
  fun.test() //test()

</script>

二、显式原型和隐式原型

1. 每个函数function都有一个prototype，即显式原型(属性)
2. 每个实例对象都有一个__proto__，可称为隐式原型(属性)
3. 实例对象的隐式原型的值为其对应构造函数的显式原型的值

<script type="text/javascript">
  //定义构造函数
  function Fn() { // 内部语句： this.prototype = {}
  
  }
  
  //1. 每个函数function都有一个prototype，即显式原型属性，默认指向一个空的Object对象
  console.log(Fn.prototype);//Object
  
  //2. 每个实例对象都有一个__proto__，可称为隐式原型
  //创建实例对象
  var fn = new Fn() // 内部语句：this.__proto__ = Fn.prototype
  console.log(fn.__proto__);//Object
  
  //3. 实例对象的隐式原型的值为其对应构造函数的显式原型的值
  console.log(Fn.prototype === fn.__proto__); //true
  
  //给原型添加方法
  Fn.prototype.test = function () {
    console.log('test()');
  }
  
  //通过实例调用原型的方法
  fn.test() //test()

</script>

总结：
	函数的prototype属性: 在定义函数时自动添加的, 默认值是一个空Object对象
	对象的__proto__属性: 创建对象时自动添加的, 默认值为构造函数的prototype属性值
	程序员能直接操作显式原型, 但不能直接操作隐式原型(ES6之前)

内存结构图：

三、原型链

1. 原型链(图解)
	访问一个对象的属性时，
		先在自身属性中查找，找到返回
		如果没有, 再沿着__proto__这条链向上查找, 找到返回
		如果最终没找到, 返回undefined
	别名: 隐式原型链
	作用: 查找对象的属性(方法)

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

  Fn.prototype.test2 = function () {
    console.log('test2()');
  }

  var fn = new Fn()

  fn.test1() //test1()
  fn.test2() //test2()
  console.log(fn.toString()); // [Object, Object]
  console.log(fn.test3); //为找到，返回undefined 

  /*
  1. 函数的显示原型指向的对象：默认是空的Object实例对象(但Object不满足)
  */
  console.log(Fn.prototype instanceof Object);//true
  console.log(Object.prototype instanceof Object);//false
  console.log(Function.prototype instanceof Object);//true
  /*
  2.所有函数都是Function的实例(包括Function)
  */
  console.log(Function.__proto__ === Function.prototype);//true
  /*
  3.Object的原型对象是原型链尽头
  */
  console.log(Object.prototype.__proto__); //null
</script>

原型链（图解）

四、原型链的属性问题

1. 读取对象的属性值时: 会自动到原型链中查找
2. 设置对象的属性值时: 不会查找原型链, 如果当前对象中没有此属性, 直接添加此属性并设置其值
3. 方法一般定义在原型中, 属性一般通过构造函数定义在对象本身上

<script type="text/javascript">
  function Fn() {
    
  }
  Fn.prototype.a = 'xxx'
  var fn1 = new Fn()
  console.log(fn1.a, fn1);//xxx

  var fn2 = new Fn()
  fn2.a = 'yyy'
  console.log(fn1.a, fn2.a, fn2);//xxx yyy

  function Person(name, age) {
    this.name = name
    this.age = age 
  }
  Person.prototype.setName = function (name) {
    this.name = name
  }
  var p1 = new Person('Tom', 12)
  p1.setName('Bob')
  console.log(p1);
  console.log(p1.name, p1.age);//Bob 12

  var p2 = new Person('Jack', 12)
  p2.setName('Cat')
  console.log(p2);
  console.log(p1.__proto__ === p2.__proto__); //true

</script>