JS中的prototype和__proto__

prototype概念

prototype是一个对象的属性，指向的是另外一个对象称作原型对象，上面挂满了各式各样想要继承（或分享）给子对象的方法和属性。在JAVA中，类属性和方法的继承是通过public和protected关键字来实现的，但是JavaScript中的继承不是通过类来实现的，是通过对象原型链来实现的，因此，当一个JavaScript对象想要给子对象一些共享方法的时候，就把所有的变量和方法统一写到原型对象当中，再用Prototype指向它即可。

根原型对象Object.prototype

来看下面的代码：

let person = {
        name : "map",
        age : 18
    }

console.log(person.prototype); // undefined
console.log(person.__proto__ === Object.prototype); //true
console.log(Object.prototype); // {constructor: ƒ, __defineGetter__: ƒ, __defineSetter__: ƒ, hasOwnProperty: ƒ, __lookupGetter__: ƒ, …}
console.log(person.hasOwnProperty("name")); // true
  1. 上面的person对象用大括号直接创建，实际上JavaScript已经为它设定了所有对象都共有的根原型对象——Object.prototype，这点在person.__ proto __ === Object.prototype上得到验证。
  2. person对象并未设置自己的共享方法，意味着它将不会为子对象创造新的库，因此直接打印person.prototype结果是undefined。

  3. Object.prototype定义了某些方法，像toString()、valueOf()……
    Object.prototype方法
  4. person对象继承了所有Object.prototype定义的方法，可直接调用其hasOwnProperty方法。

自定义prototype

上面第二点说到了person并没有为自己创建原型对象，所以是undefined，那么如果我们要位person创建一个原型对象，并且加上一些方法呢？

let person = {
        name : "map",
        age : 18
    }

    person.prototype = {
    }

    person.prototype.nextYear = function() {
        return person.age += 1;
    }
    
    console.log(person.prototype.nextYear()); // 结果：19
    console.log(person.nextYear()); // Uncaught TypeError: person.nextYear is not a function

我们为person创建了一个计算明年几岁的方法，调用方式是person.prototype.nextYear()，如果直接用person.nextYear()调用会报错，这充分说明了对象和它的原型对象是不同的两个对象，并没有共通变量、方法的情况。

子对象对prototype的继承

既然我们定义了person这个对象的prototype，何不用原型继承的原则，来写另外一个类：

let person = {
        name : "map",
        age : 18
    }

    person.prototype = {
    }

    person.prototype.nextYear = function() {
        return person.age += 1;
    }
let student = {};
    student.__proto__ = person.prototype;
    student.age = 22;
    console.log(student.nextYear()); //结果：19

继承关系是在“student.proto = person.prototype;”这里确定的，__ proto __我将会在下一小节深入讨论。

这里student继承了person，并且能够直接调用person.prototype中的方法nextYear()，但student的age是22，为什么其结果还是和person一样是19呢？这就是因为age这个属性不是共享属性导致nextYear在计算仍然采用了person的age。让我们修改代码：

let person = {
        name : "map"
    }

    person.prototype = {
        age : 18
    }


    person.prototype.nextYear = function() {
        return this.age += 1;
    }
    
    let student = {};
    student.__proto__ = person.prototype;
    student.age = 22;

    console.log(person.prototype.nextYear()); //结果：19
    console.log(student.nextYear()); //结果：23

将age属性放到Prototype当中，将nextYear中person.age改成this.age，这里的this指的就是当前对象的prototype，但有个问题是，student修改了原型对象中的age变量为22，但我们在之后用person去调用nextYear的结果仍然是19，为什么呢？这里照理说应该用修改之后的变量去计算，得到的结果是23才对，那么这里就涉及到刚才所说的另外一个概念__ proto __了。

__ proto __概念

__ proto __在对象建立之初就存在了，是决定继承和被继承关系的关键字。JavaScript 对象有一个指向一个原型对象的链。当试图访问一个对象的属性时，它不仅仅在该对象上搜寻，还会搜寻该对象的原型，以及该对象的原型的原型，依次层层向上搜索，直到找到一个名字匹配的属性或到达原型链的末尾。

我们上面的代码中创建了一个这样的原型链：student —> person.prototype —> Object.prototype —> null，而能够访问这个链条的方式正是“__ proto __”：

let person = {
        name : "map"
    }

    person.prototype = {
        age : 18
    }


    person.prototype.nextYear = function() {
        return this.age += 1;
    }

let student = {};
    student.__proto__ = person.prototype;
    student.age = 22;

console.log(student);
console.log(student.__proto__);
console.log(student.__proto__.__proto__);
console.log(student.__proto__.__proto__.__proto__);

结果如图：

原型链

所以当我们调用student.nextYear()，JavaScript首先会搜索原型链的第一个节点——student对象中是否有nextYear()方法，发现没有，就进入到原型链的第二个节点——person.prototype中，发现有nextYear()方法，则调用此方法；

JavaScript接着会发现nextYear()有个this.age，同样首先会搜索原型链的第一个节点——student对象中是否有age这个属性，发现为22，因此在计算的时候就用到了22，值得注意的是，这里搜索的是student对象而不是student.prototype对象，因为原型链的的第一个环节是student，并非其prototype，这里一定要注意，所有原型链的最底层都不会是prototype除非人为去定义。

总结

prototype和__ proto __是JavaScript当中最基础核心的多态概念，一定要掌握，要知道所有的对象本质上都存在于一条原型链上，这条链子上的所有对象应该都烂熟于心。

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 206,602评论 6赞 481
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 88,442评论 2赞 382
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 152,878评论 0赞 344
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 55,306评论 1赞 279
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 64,330评论 5赞 373
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 49,071评论 1赞 285
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 38,382评论 3赞 400
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 37,006评论 0赞 259
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 43,512评论 1赞 300
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,965评论 2赞 325
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,094评论 1赞 333
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,732评论 4赞 323
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 39,283评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,286评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,512评论 1赞 262
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 45,536评论 2赞 354
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,828评论 2赞 345