原型链模式图解1 .2 .5

来源：互联网发布：2018年网络dj歌曲编辑：程序博客网时间：2024/05/16 02:36
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <meta http-equiv="X-UA-Compatible" content="ie=edge">    <title>Document</title></head><body>    <script>        // function CreateJsPerson(name, age) {        //     this.name = name;        //     this.age = age;        // }        // CreateJsPerson.prototype.writeJs = function() {        //     console.log("my name is " + this.name + "..........");        // }        // var p1 = new CreateJsPerson("a", 14);        // var p2 = new CreateJsPerson("b", 24);        // console.log(p1.writeJs === p2.writeJs); //true        //构造函数模式中拥有了类和实例的概念,并且实例和实例之间是相互独立开的  --> 实例识别        //基于构造函数模式的原型模式解决了  方法或者属性公有的问题  --> 把实例之间相同的属性和方法提取成公有的属性和方法 --> 想让谁公有就把他放在CreateJsPerson.prototype上即可        //1.每一个函数数据类型(普通函数,类)都有一个天生自带的属性:propotype(原型),并且这个属性是一个对象数据类型的值        //2. 并且在propotype上浏览器天生给他加了一个属性constructor(构造函数),属性值是当前函数(类)本身        //3.每一个对象数据类型(普通的对象,实例,prototype)也是天生自带一个属性: __proto__,属性值是当前实例所属类的原型(prototype)        function Fn() {            this.x = 100;            this.num = function() {                console.log("私有sum");            }        }        Fn.prototype.getX = function() {            console.log(this.x)        }        Fn.prototype.sum = function() {            console.log("公有sum");        }        var f1 = new Fn;        var f2 = new Fn;        console.log(Fn.prototype.constructor === Fn); //-->true        console.log(f1 instanceof Object) // --> true            //Object是js中所有对象数据类型的基类(最顶层的类)            //1).因为f1通过__proto__可以向上级查找,不管有多少级,最后总能找到Object        //2).在Object.prototype上没有__proto__属性        //原型链模式        //f1.hasOwnProperty("x"); //-->  hasOwnProperty是f1的一个属性        //但是我们发现在f1的私有属性上并没有这个方法        //通过   对象名.属性名  的方式获取属性值的时候首先在对象的私有的属性上进行查找,如果私有中存在这个属性,则获取的是私有的属性值        //如果私有的没有,则通过__proto__找到所属类的原型(所属类的原型上定义的属性和方法都是当前实例的公有的属性和方法),原型上存在的话,获取的是公有的属性值        //如果原型上也没有的话,则继续通过原型上的__proto__继续向上查找,一直找到Object.prototype为止        // f1.getX === f2.getX //   ---> true        // f1.__proto__.getX === f2.getX // -----> true        // f1.getX === Fn.prototype.getX //-----> true        // f1.sum === f2.__proto__.sum //----> false        // f1.sum === Fn.prototype.sum //-----> false        // f1.hasOwnProperty -> f1.__proto__.proto__.hasOwnProperty        //在IE浏览器中,我们的原型模式也是同样的原理,但是IE浏览器怕你通过__proto__把公有的修改,禁止使用__proto__        f1.sum = function() {            //修改自己私有的sum        }        f1.__proto__.sum = function() {            //修改所属原型上的sum        }        Fn.prototype.sum = function() {            //修改公有的sum        }    </script></body></html>
这里写图片描述
阅读全文
1 0