zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    004_列表list操作
    003_字符串str的操作
    002_python基础语录
    求哈夫曼树的编码
    Python笔记(一)——打印输出
    python基础一 day33 验证客户端的合法性
    python基础一 day32 复习
    python基础一 day30 网络编程
    python基础一 day29 logging
    python基础一 day29 学习方法(课前谈心)
  • 原文地址:https://www.cnblogs.com/liuestc/p/4455139.html
Copyright © 2011-2022 走看看