JavaScript中的 [[prototype]]、prototype、__proto__ 关系

说到 prototype、__proto__ 首先就得去理解 JavaScript 语言的继承机制。在典型的面向对象的语言中，如C#，都存在类（class）的概念, 类就是对象的模板，对象就是类的实例。C# 中的 继承允许我们根据一个类来定义另一个类，这使得创建和维护应用程序变得更容易。同时也有利于重用代码和节省开发时间。在 JavaScript 是不存在 类 和 子类 概念的,全靠原型链的模式来实现继承 (后面出class在这基础上的语法糖)。

这里举一个简单C# 类和继承例子,一类 People,其中包含一个Say方法。另外两个类 Man 和 Woman 都继承 People这个类,这样这两个子类都拥有了父类的Say方法。这是一个典型的继承

//C# Code
using System;

namespace ConsoleApp
{
    class Program
    {
        static void Main(string[] args)
        {
            Man man = new Man();
            man.Work();
            man.Say("累死爷了");

            Woman woman = new Woman();
            woman.Shop();
            woman.Say("花钱真爽");

            Console.Read();
        }
    }

    class People
    {
        public People()
        {

        }

        public void Say(string text)
        {
            Console.WriteLine(text);
        }
    }

    class Man : People
    {
        public void Work()
        {
            Console.WriteLine("工作工作.....赚钱赚钱...");
        }
    }

    class Woman : People
    {
        public void Shop()
        {
            Console.WriteLine("买买买.....");
        }
    }

}

prototype 的由来

当初JavaScript之父在开发JavaScript的时候,觉得没有必要做的很复杂,只需要做些简单操作就可以了,所以没有引入类的概念。

在JavaScript中也是通过 new 生成一个对象实例的,例如在C#中生成一个对象实例会这样写 new People(),会调用类的构造函数。在JavaScript简化了这个操作,new 后面跟的不是类,而是构造函数。

用JavaScript来实现上面C#例子

var people = {
    Say:function(text){
        console.log(text)
    } 
}

function Man(){
    this.Work=function(){
        console.log("工作工作.....赚钱赚钱...");
    }
    this.Say=people.Say;
}

function Woman(){
    this.Shop=function(){
        console.log("买买买.....");
    }
    this.Say=people.Say;
}

var man = new Man();
man.Work();
man.Say("累死爷了");

var woman = new Woman();
woman.Shop();
woman.Say("花钱真爽");

但是用构造函数生成实例对象，有一个缺点，那就是无法共享属性和方法。

people.Say=function(){
    console.log("...")
}
 
man.Say("累死爷了"); //累死爷了
woman.Say("花钱真爽");//花钱真爽

var man2=new Man();
man2.Say();//...

man.Say=null;
woman.Say("花钱真爽");//花钱真爽

//这里即使修改了 people.Say 也不会对以生成实例有影响,修改一个也不会对另一个有影响,每个实例都是相互独立的

每一个实例对象，都有自己的属性和方法的副本。这不仅无法做到数据共享，也是极大的资源浪费。于是JavaScript之父 为了解决这个问题就在构造函数加入了个prototype属性。这个属性是一个对象(常称 原型对象),把一些公用的属性和方法都放在这个对象里,一些是私有的就放在构造函数里。

实例对象被创建时候,会自动引用原型对象的属性和方法,这样实例对象属性就分为两种了,一种是构造函数里私有自己的,另一种则是来着引用 原型对象。一旦原型对象属性和方法修改后,实例的对象也会跟着变化。原型对象 不仅共享了数据,也减少了对资源的占用。

那么用Js来实现上面C#例子就可以这样写


var people = {
    Say:function(text){
        console.log(text)
    } 
}

function Man(){
    this.Work=function(){
        console.log("工作工作.....赚钱赚钱...");
    }
}

Man.prototype = people;

function Woman(){
    this.Shop=function(){
        console.log("买买买.....");
    }
}

Woman.prototype = people;

var man = new Man();
man.Work();
man.Say("累死爷了");

var woman = new Woman();
woman.Shop();
woman.Say("花钱真爽");

//这个时候加入个 people 在加入个 eat 方法, man 和 woman 实例对象也是可以使用的
people.Eat=function(){
     console.log("吃吃吃.....");
}

man.Eat();
woman.Eat();

prototype 和 __proto__ 和 [[prototype]] 关系

JavaScript中任意对象都有一个内置属性[[prototype]]，在ES5之前没有标准的方法访问这个内置属性，但是大多数浏览器都支持通过 __proto__ 来访问,

prototype 和 __proto__ 关系

关系图

JavaScript 只有一种结构：对象。每个实例对象（ object ）都有一个私有属性（称之为 __proto__ ）指向它的构造函数的原型对象（ prototype ）。该原型对象也有一个自己的原型对象( __proto__ ) ，层层向上直到一个对象的原型对象为 null。根据定义，null 没有原型，并作为这个原型链中的最后一个环节。几乎所有 JavaScript 中的对象都是位于原型链顶端的 Object 的实例。

看文字可能会有点蒙,用上面例子来举例说明下

var people = {
    Say:function(text){
        console.log(text)
    } 
}

function Man(){}

Man.prototype = people;

var man = new Man();

/* man 是构造函数的原型对象是  Man.prototyp
   所以 man.__proto__ === Man.prototype */
console.log(man.__proto__ === Man.prototype && man.__proto__  === people) //true

/* Man 构造函数也是对象,也有自己的 __proto__ 属性
  而函数 Man 是由 Function 构造的 */
console.log(Man.__proto__ === Function.prototype)

/* Function 对象也有自己的 __proto__ 属性
   Function 是由 Function自己实例来的 */
console.log(Function.__proto__ === Function.prototype)

/* Object 和  Function 同理*/
console.log(Object.__proto__ === Function.prototype)
console.log(Object.__proto__ === Function.__proto__)

/* Function 的 原型对象 也有自己的 __proto__
   Function 的 原型对象 是由 Object 来的*/
console.log(Function.prototype.__proto__ === Object.prototype)

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