美文网首页
原型与原型链

原型与原型链

作者: 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

相关文章

  • JavaScript 原型、原型链与原型继承

    原型,原型链与原型继承 用自己的方式理解原型,原型链和原型继承 javascript——原型与原型链 JavaSc...

  • 2019-01-28

    原型与原型链

  • 廖雪峰JS小记

    (function(){})() 原型,原型链 浅谈Js原型的理解JS 原型与原型链终极详解 对象 对象:一种无序...

  • Javascript(三)之原型继承理解

    进阶路线 3 原型继承 3.1 优秀文章 最详尽的 JS 原型与原型链终极详解 一 最详尽的 JS 原型与原型链终...

  • JavaScript 面向对象第一篇

    1.原型链 ---- (实例对象与原型之间的连接 叫做原型链) 2. hasOwnproperty ----(看是...

  • 原型与原型链以及继承

    今天复习下原型与原型链的知识,以及记录新学的继承知识点。 知识点纲要 原型与原型链 es5与es6继承 什么是原型...

  • JavaScript深入理解this关键字(一)

    摘要 最近在公司需要做培训,我打算把JavaScript中的原型与原型链讲给大家。但我在梳理原型与原型链的时候发现...

  • js_继承及原型链等(四)

    js_继承及原型链等(三) 1. 继承 依赖于原型链来完成的继承 发生在对象与对象之间 原型链,如下: ==原型链...

  • 原型链&instanceof关键字

    1.原型链&instanceof关键字 简单说明 原型链 与 instanceof 作用原理 1.原型链 1...

  • 原型、原型链

    (什么是原型、原型链?有什么作用) JavaScirpt深入之从原型到原型链 图解 Javascript 原型链 ...

网友评论

      本文标题:原型与原型链

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