javascript的prototype、__proto__、constructor

 <script>
      /*
      函数身上都有一个prototype属性,是一个对象
      __proto__每个对象身上都有
      构造函数或者构造类实例身上的__proto__指向构造函数或者构造类本身的prototype
      constructor 一般是指实例对象的构造函数本身
      */
      class Test {
        constructor() {
          this.c = '我是c';
        }
      }

      console.log(Test.prototype);
      /*
       {constructor: ƒ}
       constructor: class Test
       [[Prototype]]: Object
       */
      const test = new Test();
      console.log(test.__proto__);
      /*
       {constructor: ƒ}
       constructor: class Test
       [[Prototype]]: Object
       */
      //由此可以看出 Test.prototype === test.__proto__
      console.log(Test.prototype === test.__proto__); // true

      // prototype是一个对象 所有身上也有一个proto属性
      console.log(
        Test.prototype.__proto__,
        Test.prototype.__proto__ === Object.prototype
      );
      /*
       打印:{constructor: ƒ, __defineGetter__: ƒ, __defineSetter__: ƒ, hasOwnProperty: ƒ, __lookupGetter__: ƒ, …}
        Test.prototype.__proto__ === Object.prototype true
       */

      // 原型链终点是个null
      console.log(Object.prototype.__proto__); // null

      // 原型链继承
      Test.prototype.a = '我是a';
      Object.prototype.b = '我是b';

      console.log(test.a); // 我是a 通过__proto__找到a
      console.log(test.b); // 我是b 通过__proto__找到b
      console.log(test.c); // 我是c

      console.log(test);
      /* 
      原型链继承图

      test {
        c:'我是c '
        __proto__:Test.prototype {
            a:'我是a',
            __proto__:Object.prototype {
                b:'我是b'
                // Object.prototype 不存在__proto__ 了 所有找不到只能返回个null
            }
        }
      }
      */

      console.log(Object.prototype.__proto__); // null 不存在 __proto__
      console.log(test.e, Test.prototype.f); // undefined undefined

      console.log(Test.__proto__ === Function.prototype); // true
      console.log(Test.__proto__ === Function.__proto__); // true
      console.log(Function.__proto__ === Function.prototype); // true
      console.log(Object.__proto__ === Function.prototype); // true
      console.log(Object.__proto__ === Function.__proto__); // true
      console.log(typeof Function, typeof Object); // function function

      // 检测自身原型链有没有某个属性值
      console.log(test.hasOwnProperty('a')); // false
      console.log(test.hasOwnProperty('b')); // false
      console.log(test.hasOwnProperty('c')); // true

      // 当前自身或者继承原型链上有没有某个属性
      console.log('a' in test); // true
      console.log('b' in test); // true
      console.log('c' in test); // true
      console.log('d' in test); // false

      // constructor 指的是实例化对象的构造函数
      console.log(test.constructor, test.constructor === Test);
      /* 
      class Test {
        constructor() {
          this.c = '我是c';
        }
      }

      true
      */
      //Test.constructor 一个函数
      console.log(
        Test.constructor,
        Test.prototype.constructor,
        test.constructor
      );
      /* 
      打印一
     ƒ Function() { [native code] } 
      打印二
     class Test {
        constructor() {
          this.c = '我是c';
        }
      }
      打印三
      class Test {
        constructor() {
          this.c = '我是c';
        }
      }
      */

      // constructor指向也可以被修改
      class Test2 {}
      const test2 = new Test2();
      console.log(test2.constructor);
      /* 
       输出结果 :
      class Test2 {}
      */
      test2.constructor = test.constructor;
      console.log(test2.constructor);
      /* 
      输出结果 :
      class Test {
        constructor() {
          this.c = '我是c';
        }
      }
      */
    </script>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

追逐梦想之路_随笔

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值