美文网首页
面向对象与原型(三)

面向对象与原型(三)

作者: 一江碎月 | 来源:发表于2017-11-07 14:00 被阅读0次

    原型

    每个 JavaScript 对象都有一个与之相关联的另一个 JavaScript 对象(或null,但这是罕见的)。 第二个对象被称为原型,第一个对象从原型继承属性。

    换句话说:每个 JS 对象一定有一个对应的原型对象,并从原型对象继承属性和方法。

    默认时,原型对象是空对象

    默认情况下,每一个原型对象都有一个 constructor 属性,这个属性指向 prototype 所属的方法。默认时,原型对象通过 constructor 指向函数,函数通过 prototype 指向原型对象

    函数的原型

    每一个函数都是 Function 的实例。所以下面两个输出都返回的是 true。

    ```javascript
    alert(Object.__proto__ == Function.prototype)
    function Demo(){}
    alert(Demo.__proto__ == Function.prototype)
    ```
    

    Object 是系统内置的一个方法 ,所以它的 __proto__ 就是 Function.prototype。在这个时候,它与自己定义的 Demo 方法是一样的。

    prototype

    创建函数时,JS 会自动为这个函数添加 prototype 属性,值是空对象。用于存储该函数实例化出的对象所共享的属性与方法。这个对象就是原型对象,简称原型。

    prototype 是函数的属性,对象中没有该属性

    1. 任何对象都会从其原型对象中继承方法与属性。因此,当调用到对象中不存在的某个方法或属性时,会延着其原型一级级的往上查找,直到找到或到达原型链的顶层。

      function Demo () {
      }
      Demo.prototype.name = function(){
          alert('prototype function')
      }
      var d = new Demo()
      var d2 = new Demo()
      alert(d.name == d2.name) // true
      d.name()
      d2.name()
      alert(d.hasOwnProperty('name')) // false
      alert(d2.hasOwnProperty('name')) // false
      d.name = function(){
         alert('d.name')
      }
      d.name()
      d2.name()
      
      • 初始时,d 与 d2 中都没有 name 方法,调用时两者都会找到原型对象中的 name 方法,所以两者相等,且输出的结果一样,都是 prototype function。

      • 对 d 的 name 方法进行重新定义,使 d 中有一个 name 方法(但这并不影响 d2 中没有 name 方法),所以再次输出时,d 输出的是 d.name,而 d2 输出的依旧是 prototype function。

    2. 原型也可以当作一个普通的对象,它与普通对象的区别在于:原型中的属性与方法是别的实例所共有的。

    3. 如果函数只是当作普通函数,其原型对象没有什么用。

    4. 使用原型可以扩展类的功能

      String.prototype.ex = function(){
          alert('this is ex');
      }
      'str'.ex() // 本身 String 没有 ex 功能,但通过原型扩展了 String 的功能
      

    自定义原型对象

    可以手动的为 prototype 指定一个对象。如下:

    function Demo () {
    }
    
    var cp =  {
        age:'fdafdasfasdf'
    };
    
    Demo.prototype= cp; // 将 cp 对象指定成 Demo 的原型对象
    
    var d = new Demo()
    alert(d.age) // Demo 的实例 d 具有原型对象中所定义的一切属性与方法
    alert(Demo.prototype.constructor == Demo) //false
    alert(Demo.prototype.constructor == Object) //true
    

    指定原型对象后,原型对象的 constructor 属性便不会指向构造函数。

    为达到默认情况下 constructor 依旧指向原来的构造函数,可以手动为原型对象添加上 constructor 属性,使其指向构造函数。即将 cp 的初始化改为如下形式:

    var cp =  {
        age:'fdafdasfasdf',
        constructor:Demo // 手动指定 constructor 指向 Demo
    };
    

    __proto__

    1. 每一个函数都有一个 prototype 属性,用于指向原型。而一旦你把这个函数当作构造函数调用,那么 JS 就会帮你创建该构造函数的实例,实例继承构造函数 prototype 的所有属性和方法(实例通过设置自己的 __proto__ 指向承构造函数的 prototype 来实现这种继承)。因此,对象的 __proto__ 指向自己构造函数的 prototype

      function Demo(){
      
      }
      var p = {}
      Demo.prototype = p;
      var d = new Demo()
      document.write(Demo.prototype == d.__proto__) // true
      document.write(Demo.prototype == p) //  true
      
    2. 原型链的最顶层对象是 Object.prototype,也就是 Object 的原型对象。并且该对象的 __proto__ 属性值为 null。也就是说 Object 的原型对象没有原型。

      alert(Object.prototype.__proto__) // null
      

    比较

    1. prototype 是函数的一个属性, 它指向函数的原型.
    2. __proto__ 是对象的内部属性, 它指向构造函数的原型, 对象依赖它进行原型链查询.
    3. prototype 只有函数才有, 其他(非函数)对象不具有该属性. 而 __proto__ 是对象的内部属性, 任何对象都拥有该属性。所以每一个函数也都具有 __proto__ 属性——因为函数也是对象。

    相关文章

      网友评论

          本文标题:面向对象与原型(三)

          本文链接:https://www.haomeiwen.com/subject/jpqjmxtx.html