1. 原型鏈
-- 訪問一個物件的屬性時,
---- 先在自身屬性中查找,找到返回
---- 如果沒有,再沿著__proto__這條鏈向上查找,找到返回
---- 如果最終沒找到,返回undefined
--  別名: 隱式原型鏈
--  作用: 查找物件的屬性(方法)
2. Function = new Function():實例對象才有隱式原型(屬性)__proto__   而實例對象的隱式原型(屬性)__proto__ 等於 構造函數的顯式原型(屬性)prototype
3. 所有函數的隱式原型(屬性)__proto__都是一樣的
<script type="text/javascript">

  function Fn() {
    this.test1 = () => console.log('test1()');
  }

  // 在原型上面添加一個方法
  Fn.prototype.test2 = () => console.log('test2()');

  const fn = new Fn();
  fn.test1();
  fn.test2();
  console.log(fn.toString());
 // fn.test3();


  // 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 = 'sci';
  const fn1 = new Fn();
  console.log(fn1.a, fn1);

  const fn2 = new Fn();
  fn2.a = '瞳耀';
  console.log(fn1.a);   // sci
  console.log(fn2.a);   // 瞳耀
  console.log(fn2);

  // 屬性一般通過構造函數定義在物件本身上
  function Person(name, age) {
    this.name = name;
    this.age = age;
  }

  // 方法一般定義在原型中
  Person.prototype.setName = (name) => this.name = name;
  const p1 = new Person('展耀', 30);
  p1.setName('白與瞳');
  console.log(p1);

  const p2 = new Person('陸離', 32);
  console.log(p2);

  console.log(p1.__proto__ === p2.__proto__);   // true

</script>
arrow
arrow
    文章標籤
    JavaScript 原型鏈
    全站熱搜

    bingzhichen 發表在 痞客邦 留言(0) 人氣()