zoukankan      html  css  js  c++  java
  • 简析原型、原型链

    内容参考:原型、原型链

    1. 对应名称和从属关系

    • prototype: 即原型,是函数的一个属性,本身是一个对象{}

    • __proto__: 即原型链(链接点),即对象 Object 的一个属性,本身也是一个对象{}

    • 对象的 __proto__ 保存着该对象的构造函数的 prototype

    example

    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
      </head>
      <body>
        <script>
          function Person() {}
          console.log(Person.prototype)
    
          const person1 = new Person()
          console.log(person1.__proto__)
          // 实例对象的 __proto__ === 构造函数的 prototype
          console.log(Person.prototype === person1.__proto__) // true
        </script>
      </body>
    </html>
    
    

    如上,我们声明一个构造函数 Person,打印出 Personprototype 属性。接着,我们创建一个 Person 的实例对象 person1,打印出 person1__proto__ 属性。最后,我们对两者进行 === 比较。

    输出结果如下图所示:

    因为构造函数的原型 Person.prototype 也是一个对象,对象都有 __proto__ 属性,则

    // 所有函数的 prototype 都默认是 Object 的实例(Object除外)
    console.log(Person.prototype.__proto__ === Object.prototype) // true
    console.log(Object.prototype.__proto__) // null,原型链顶端为 null
    

    2. 认识原型链、原型与原型链继承

    给实例对象、构造函数的原型和 Object 的原型各添加属性 a、b 和 c。而通过 person1 我们可以访问到这些属性。

    function Person() {}
    const person1 = new Person()
    
    person1.a = 1
    Person.prototype.b = 2
    Object.prototype.c = 3
    
    console.log(person1.a); // 1
    console.log(person1.b); // 2
    console.log(person1.c); // 3
    
    

    我们用下面这种形式来表示上边展示的代码,可以看出,如果我们在自身找不到需要的属性,那么它会自动在链上往上找。这就是原型链:

          // person1 {
          //   a: 1,
          //   __proto__: Person.prototype = {
          //     b: 2,
          //     __proto__: Object.prototype = {
          //       c: 3,
          //       __proto__: null
          //     } 
          //   }
          // }
    

    3. Function 和 Object 的特殊性

    // const Person = new Function() 
    // 构造函数 Person 是由 Function 创建出来的
    console.log(Person.__proto__ === Function.prototype) // true
    console.log(Function.__proto__ === Function.prototype) // true(这是规定)
    // const obj = new Object()
    console.log(typeof Object) // function
    console.log(Object.__proto__ === Function.prototype) // true
    // 由前面代码推导可知:
    console.log(Object.__proto__ === Function.__proto__) // true
    
    

    4. 判断属性是否存在的方法

    属性只在自身存在

    console.log(person1.hasOwnProperty('a')) // true
    console.log(person1.hasOwnProperty('b')) // false
    console.log(person1.hasOwnProperty('c')) // false
    

    属性在链上存在

    console.log('a' in person1) // true
    console.log('b' in person1) // true
    console.log('c' in person1) // true
    
  • 相关阅读:
    HAProxy、Keepalived 在 Ocatvia 的应用实现与分析
    Octavia 的 HTTPS 与自建、签发 CA 证书
    Octavia 创建 loadbalancer 的实现与分析
    OpenStack Rally 质量评估与自动化测试利器
    自建 CA 中心并签发 CA 证书
    Failed building wheel for netifaces
    通过 vSphere WS API 获取 vCenter Datastore Provisioned Space 置备空间
    OpenStack Placement Project
    我们建了一个 Golang 硬核技术交流群(内含视频福利)
    没有图形界面的软件有什么用?
  • 原文地址:https://www.cnblogs.com/Ohmy/p/14221330.html
Copyright © 2011-2022 走看看