JS 中 讨厌的 prototype constructor _pro_ 理解

这几天一直在看着块,哎,看的人头都大了,差不多明白了,总结一下。

 

prototype:创建的每一个函数都有一个prototype属性,这个属性指向一个prototype对象。即他是通过构造函数而创建的实例对象的原型对象(属性存在于构造函数中)。

constructor:这个属性在原型对象中,指向函数中的prototype属性。(存在于原型对象中,原型对象===原型)

_proto_:这个属相存在于实例中,指向原型。

 

举个栗子:

function ljd(){
this.name="ljd";
}

ljd.prototype.age=20;
a=new ljd();

a.age;
ljd.prototype.constructor;

 

这段简单的代码会打印出什么呢》、??

大家思考明白这个问题应该就会理解这里面恩怨纠葛了。

 

然后还有一个注意点:

这样重新定义原型,他的constructor属性会指向Obcject;

 

function ljd() {
  this.name = ‘ljd‘;
}
ljd.prototype.age = 20;
ljd.prototype = {
  sex:
  ‘male‘,
  job: ‘student‘
};

ljd.prototype.constructor;

  这个呢 是输出Object()的。

还有这样写原型中就木有age属性了,完全重构。

其实也好理解,这个语法 x={} 相当于创建了个obcjec实例啦~~。

 

原型对象存在的问题:

举个栗子:原型对象中有一个数组,第一个实例push 进一个元素后,第二个实例的数组中也会有该元素。

 

 

再来谈谈JS中的继承问题:

先说说 new  创建一个实例有以下三个步骤  a1=new A;

1、新建一个对象并赋值给变量a1:var a1 = {};

2、把这个对象的[[Prototype]]属性指向函数A的原型对象:a1.[[Prototype]] = A.prototype

3、调用函数A,同时把this指向1中创建的对象a1,对对象进行初始化:A.apply(a1,arguments)

 function SuperType() {
        this.property = true;
    }

    SuperType.prototype.getSuperValue = function() {
      return this.property;
    };

    function SubType() {
        this.subproperty = false;
    }

    //继承了SuperType
    SubType.prototype = new SuperType();
    SubType.prototype.getSubValue = function() {
        return this.subproperty;
    };

    var instance = new SubType();

注意这句

SubType.prototype = new SuperType();  //相当于重写了SubType.prototype,所以就像上面提到的constructor属性改变 

SubType.prototype.constructor ==Super.

 

 

好了  太晚了 今天就先到这。。。晚安

 

 

突然忘了,还有这段代码,大家看下学下JS中的组合继承。

<script>
    function Par(name,value){
        if(!arguments.length) return;
        this.name = name;
        this.value = value;
    }
    function Job(name,value,job){
        if(!arguments.length) return;
        Par.apply(this,arguments);
        this.job = job;
    }
    function Age(name,value,job,age){
        if(!arguments.length) return;
        Job.apply(this,arguments);
        this.age = age;
    }
    Par.prototype.showName = function(){
        alert(this.name);
    };
    Job.prototype = new Par();
    Job.prototype.showJob = function(){
        alert(this.job);
    };
    Age.prototype = new Job();
    Age.prototype.showAge= function(){
        alert(this.age)    
    };
    
    var a = new Age(‘123‘,‘dw2‘,‘sad‘,21);
    
    a.showName()
    //alert(a.constructor)
</script>

 

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。