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
    
  • 相关阅读:
    马哥学习笔记三——DNS服务
    rndc
    DNS服务器解析错误:server can't find 168.220.168.192.in-addr.arpa: SERVFAIL
    python学习笔记十一——类和对象
    启动或重启DNS服务时,卡在Generating /etc/rndc.key:上
    python学习笔记十——异常处理
    python学习笔记九——文件与目录
    马哥学习笔记一——ssh服务
    python学习笔记八——正则表达式
    python学习笔记七——模块和包
  • 原文地址:https://www.cnblogs.com/gullrye/p/14221330.html
Copyright © 2011-2022 走看看