美文网首页
原型与原型链

原型与原型链

作者: xiaolizhenzhen | 来源:发表于2016-12-27 19:50 被阅读0次

    1、原型

    1.prototype属性

                function Fruit(){ }
                function Apple(){ }
                console.log(Fruit.prototype);// Fruit {}
                console.log(Fruit.prototype.__proto__);//Object
                console.log(Apple.prototype);// Apple {}
                console.log(Apple.prototype.__proto__);// //Object
                console.log(Fruit.prototype==Apple.prototype);//false
                //由上测试可知,每个构造函数都有一个系统自带的prototype属性,
                //该属性指向构造函数的原型对象。
                //扩展原型方法  公有的
                Fruit.prototype.show = function(){
                    console.log("green");
                }
                //原型方法可以直接调用
                Fruit.prototype.show();
                //Fruit.show();//undefined is not a function
                //报错,构造函数中没有show方法
                console.log("修改原型之前");
                var banner = new Fruit();
                banner.show();//green 
                var obj = new Object();
                obj.show = function(){
                    console.log("orange");
                }
                console.log("修改原型之后");
                Fruit.prototype = obj;//原型指向另一个对象了。
                var banner1 = new Fruit();
                banner1.show();//orange
                banner.show();//green 
    

    每个构造函数都有一个系统自带的prototype属性,该属性指向构造函数的原型对象。

    2.construction属性、proto属性

                function Fruit(){
                    //对象私有 内部var 定义
                }
                //原型公有的属性
                Fruit.prototype.water = true;
                Fruit.prototype.name = "水果";
                Fruit.prototype.eated = function(){
                    console.log(this.name+"可以吃哦");
                }
                console.log(Fruit);
                //function Fruit(){}
                console.log(Fruit.prototype);
                //Fruit {water: true, name: "水果", eated: function}
                console.log(Fruit.prototype.__proto__);
                //Object {}
                
                constructor属性:每个原型对象都有一个constructor属性,
                constructor属性指向的是该原型对象所在的构造函数。
                
                console.log(Fruit.prototype.constructor);
                // function Fruit(){//对象私有 内部var 定义}
                console.log(Fruit.prototype.constructor==Fruit);//true
                
                var a = new Fruit();
                console.log(a);
                //Fruit {water: true, name: "水果", eated: function}
                console.log(a.__proto__);
                //Fruit {water: true, name: "水果", eated: function}
                console.log(Fruit.prototype);
                //Fruit {water: true, name: "水果", eated: function}
                console.log(a.__proto__ == Fruit.prototype);//true
                console.log(a.__proto__.constructor);
                //function Fruit(){//对象私有 内部var 定义}
                var obj = new Object();//等价于var obj = { };
                obj.show = function(){
                    console.log("new Prototype");
                }
                console.log(obj);//Object {show: function}
                console.log(obj.__proto__);// Object {}
                console.log(obj.show);
                //function (){console.log("new Prototype");}
                console.log(obj.show.prototype);// obj.show {}
                Fruit.prototype = obj;
                var b = new Fruit();
                console.log(b.__proto__);//Object {show: function}
                console.log(b.__proto__.__proto__);//Object {}
                console.log(b.__proto__ == obj);//true
                b.show();// new Prototype
                Fruit.prototype.constructor = Fruit;
                var c = new Fruit();
                console.log(c.__proto__);
                //Fruit {show: function, constructor: function}
                console.log(c.__proto__.constructor);
                //function Fruit(){//对象私有 内部var 定义}
                console.log(c.__proto__.__proto__);// Object {}
                c.show();//new Prototype
    
    

    由上可知:
    万物皆对象!所以任何函数都是一个对象,每个对象都会包含一个prototype属性,该属性指向构建函数的原型对象。而且每个原型对象都有一个constructor属性,constructor属性指向该函数的构造函数。
    每个对象里面都有一个包含创建该对象的时候指向原型对象的proto属性

    2、原型链

    访问对象里面的属性的规则(原型链):
    先在对象自身寻找,找不到去原型找,原型找不到去原型的原型上去找,直到找到Object.prototype为止。如果Object.prototype也没有则报错。

    实例1)
            function Animal(){ }
            Animal.prototype.say = function(){
                console.log("我是动物");
            }
    
            function MaoKe(){ }
            MaoKe.prototype.say = function(){
                console.log("我是猫科动物");
            }
    
            function Lion(){ }
            Lion.prototype.say = function(){
                console.log("我是狮子");
            }
    
            var shiziwang = new Lion();
            console.log(Lion.prototype);//Lion
            console.log(shiziwang.__proto__);//Lion
            console.log(shiziwang.__proto__ == Lion.prototype);//true
    
            Lion.prototype = MaoKe.prototype;
            console.log(shiziwang);
            //shiziwang是在更换原型对象之前定义的,所以这里的还是原来的
            console.log(shiziwang.__proto__);//Lion {say: function}
            //对象里面都有一个包含创建对象的时候指向原型对象的属性__proto__
            shiziwang.say();//我是狮子
            
            console.log(Lion.prototype);//Maoke
            shiziwang = new Lion();
            console.log(shiziwang);//Lion {say: function}
            console.log(shiziwang.__proto__);//MaoKe {say: function}
            shiziwang.say();//我是猫科动物
    
    实例2)
            function Animal(){}
            function MaoKe(){}
            function Lion(){}
            Animal.prototype.say = function(){
                console.log("我是动物");
            }
            MaoKe.prototype.say = function(){
                console.log("我是猫科动物");
            }
            Lion.prototype = new MaoKe();
            //创建一个猫科对象赋值给狮子的原型
            Lion.prototype.say = function(){
            //这里Lion.prototype.say实际上是覆盖了MaoKe.prototype.say
                console.log("我是狮子");
            }
            console.log(Lion.prototype);//MaoKe {say: function}
            var shizi = new Lion();
            console.log(shizi.__proto__);//MaoKe {say: function}
            console.log(shizi.__proto__ == Lion.prototype);//true
            console.log(shizi.__proto__.say);
            //function (){console.log("我是狮子");}
            console.log(shizi.__proto__.say.prototype);//Lion.say
            shizi.say();// 我是狮子
    
        实例3)
            function Animal(){}
            function MaoKe(){}
            function Lion(){}
            Animal.prototype.say = function(){
                console.log("我是动物");
            }
            MaoKe.prototype = new Animal();
            MaoKe.prototype.say = function(){
                console.log("我是猫科动物");
            }
            Lion.prototype = new MaoKe();
            Lion.prototype.say = function(){
                console.log("我是狮子");
            }
            console.log(Lion.prototype);//MaoKe
            console.log(MaoKe.prototype);//Animal
            console.log(Animal.prototype);//Animal
            var shizi = new Lion();
            console.log(shizi.__proto__);//MaoKe
            shizi.say();//我是狮子
            delete Lion.prototype.say;
            shizi.say();// 我是猫科动物
            delete MaoKe.prototype.say;
            shizi.say();// 我是动物
            delete Animal.prototype.say;
            shizi.say();//  undefined is not a function
    

    相关文章

      网友评论

          本文标题:原型与原型链

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