zoukankan      html  css  js  c++  java
  • javascript中原型链存在的问题

    我们知道使用原型链实现继承是一个goodway:)看个原型链继承的例子。

    function A () {
       this.abc = 44;
    }
    A.prototype.getAbc = function (){
      return this.abc;
    };
    function B() {
    }
    B.prototype = new A();          // B通过A的实例完成了继承,形成了原型链(B的原型就是A的实例)
    var b = new B();
    b.getAbc();

    关系如下:b(实例) ->B.prototype = new A() -> A.prototype ->Object.prototype

    可是在这种看似“漂亮”的继承方法中确存在问题。

    1. 最主要的问题来自包含引用类型值的原型,我们知道共享原型是存在问题的,抛出一个例子

    function Person () {                 
    }
    Person.prototype .friends = ["a","b"];  
    var person1 = new Person();
    var person2 = new Person();
    
    person1.friends.push("c");
    console.log(person1.friends);  // "a","b","c"
    console.log(person2.friends);  //"a","b","c"

     通过引用实例改变了原型中本来中的值,同时也影响了其他实例。(这就是为什么引用类型值要定义在构造函数中而非原型中的原因)

    在原型链中同样也会有同样的情况出现:

    function A () {
      this.numbers = [1,2,3];
    }
    function B() {
    }
    B.prototype = new A();
    var b = new B();
    var a = new A();
    
    b.numbers.push(4);     
    b.numbers;             //1234
    var b2 = new B(); 
    b2.numbers;           //1234
    
    a.numbers;             //123

    我们看到出现了和上面一样的情况(在通过原型来继承时,原型实际上会变成另一个类型的实例。于是原先的实例属性也就顺理成章的变成了现在原型属性了)。

    可是我们看到A的实例a.numbers;依然是123,说明在B继承A的实例时是复制了A实例中的所有属性(包括prototype指针,形成原型链)并非引用(其实这里有疑问,是因为继承的是A()的实例所以才不会影响A()创建其他实例的表现吗?)。

    2.在创建子类实例时,不可以在不影响所有对象实例的情况下给超类传递参数。

      function  A (light) {
            this.light1 = light;
        };
      function  B (light) {
            this.light = light;
        };
        //给B赋值的同时,想给A赋值,无法实现
        B.prototype = new A();
        var C = new B(123);
        console.log(C.light);
        console.log(C.light1);

    想实现这个需要手动调用A的构造函数,会影响其他实例

     function A (light) {
            this.light1 = light;
        };
     function B (light) {
            this.light = light;
            A.call(this,light);//手动调用A的构造方法
        };
        //给B赋值的同时,给A赋值
        B.prototype = new A();
        var C = new B(123);
        console.log(C.light);
        console.log(C.light1);
  • 相关阅读:
    Heritrix源码分析(十) Heritrix中的Http Status Code(Http状态码)(转)
    Heritrix源码分析(九) Heritrix的二次抓取以及如何让Heritrix抓取你不想抓取的URL
    Heritrix源码分析(八) Heritrix8个处理器(Processor)介绍(转)
    HTML 的 iframe 元素
    CSS 选择器及其优先级
    在触屏设备中拖动 overflow 元素
    关于博客园博问标签的自我实现
    ABAP中读取EXCEL中不同的SHEET数据
    创建表索引
    Call Transaction
  • 原文地址:https://www.cnblogs.com/nanshanlaoyao/p/5906116.html
Copyright © 2011-2022 走看看