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)