js 原型 _proto_, prototype, contructor的联系 (2)

第一行,我们创建了一个空对象obj
第二行,我们将这个空对象的__proto__成员指向了Base函数对象prototype成员对象
第三行,我们将Base函数对象的this指针替换成obj,然后再调用Base函数,于是我们就给obj对象赋值了一个id成员变量,这个成员变量的值是”base”,关于call函数的用法。

 

代码:

    function Person(name)  

    {  

       this.name=name;  

       this.showMe=function()  

            {  

               alert(this.name);  

            }  

    };  

 

    Person.prototype.from=function()  

    {  

      alert('I come from prototype.');  

    }  

 

    var one=new Person('js');  

 

    one.showMe();//js,这个结果没有什么好奇怪的  

    one.from();//I come from prototype.,这个结果有一点奇怪吧  

    alert(one.constructor);//function Person(name) {...}  

    alert(Person.prototype.constructor);//function Person(name) {...}  

再看看继承是如何实现的

function Person(name)  

{  

   this.name=name;  

   this.showMe=function()  

        {  

           alert(this.name);  

        }  

};  

 

Person.prototype.from=function()  

{  

  alert('I come from prototype.');  

}  

function SubPerson()  

{  

}  

SubPerson.prototype=new Person();  

 

var subOne=new SubPerson();  

subOne.from();//I come from prototype.  

alert(subOne.constructor);//function Person(name) {...};  

alert(SubPerson.prototype.constructor);//function Person(name) {...};

继承的实现很简单,只需要把子类的prototype设置为父类的一个对象即可。注意这里说的可是对象哦!

 

那么通过prototype属性实现继承的原理是什么呢?还是先看图形说明,然后编写代码进行验证。 

注意:红色的方框就是把子类与父类链接起来的地方。这个就应该是传说中的prototype链了吧。下面有代码进行验证

js代码:

    function Person(name)  

    {  

       this.name=name;  

       this.showMe=function()  

            {  

               alert(this.name);  

            }  

    };  

 

    Person.prototype.from=function()  

    {  

      alert('I come from prototype.');  

    }  

    var father=new Person('js');//为了下面演示使用showMe方法,采用了js参数,实际多采用无参数  

    alert(father.constructor);//查看构造函数,结果是:function Person(name) {...};  

    function SubPer()  

    {  

    }  

    SubPer.prototype=father;//注意这里  

    SubPer.prototype.constructor=SubPer;  

 

    var son=new SubPer();  

    son.showMe();//js  

    son.from();//I come from prototype.  

    alert(father.constructor);//function SubPer(){...}  

    alert(son.constructor);//function SubPer(){...}  

    alert(SubPer.prototype.constructor);//function SubPer(){...}  

根据上图的prototype链,还有代码的结果,我想应该明白为什么使用prototype能够实现

JS中的继承了吧。



 

到此,上面的图应该很清楚了。再来一张手绘版的,有点不清楚哈

js 原型 _proto_, prototype, contructor的联系

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wspxzp.html