随笔记录--深入理解JavaScript原型

深入理解JavaScript原型

相比于基于类的语言（如java或者C++），JavaScript是动态的，并且本身不提供一个class实现（在ES2015/ES6中引入了class关键字，但那只是语法，JavaScript仍然是基于原型的）。
在理解js的原型之前，必须先了解object和Function，object和Function都是作为JS的自带函数，Object继承自己，Function继承自己，Object和Function互相继承对方，也就是说Object和Function都既是函数也是对象。

console.log(Function instanceof Object);//true
console.log(Object instanceof Function); //true

Object是Function的 实例，而Function是它自己的实例。

console.log(Function.prototype);  //ƒ () { [native code] }
console.log(Object.prototype);  //Object

什么是原型

我们知道JavaScript可以使用构造函数来创建一个新的对象。例如：

// 构造函数，无返回值，通常通过new调用的函数都称为构造函数
function Fun(name){
    this.name = name;
}
// 通过new新建一个对象
var fun = new Fun('张三');

这和一般面向对象编程语言中创建对象的语法很类似，只不过是一种简化的设计，new后面跟的不是类，而是构造函数。这里的构造函数可以看做是一种类型，就像面向对象编程语言中的类，但是这样创建的对象除了属性一样外，并没有其他的任何联系，对象之间无法共享属性和方法。每当我们新建一个对象的时候，都会为方法和属性分配一块内存，这是极大的浪费资源。因此，js为构造函数设置一个属性。这个属性指向一个对象，所有实例对象需要共享的属性和方法。就放在构造函数里面。实例对象一旦创建这个对象，将自动引用这个对象的属性和方法，也就是说，实例对象的属性和方法分成两种：一种是本地的，不共享的，一种是引用的，共享的，这个对象就是原型（prototype）对象，也就是原型。
每个函数都有一个prototype属性，它默认指向一个Object空对象（也就是原型对象），原型对象中有一个属性constructor，它指向函数对象。

比如说Date()是一个对象函数，那么它就有一个prototype属性。

console.log(Date.prototype);
console.log(typeofDate.prototype);//object

假如我们自定义一个函数对象，它默认指向Object空对象（就是没有我们的属性）

functionFun(){}
console.log(Fun.prototype);

根据上面的图可知只是constructor属性和proto隐式属性属性。

在默认情况下，所有原型对象都会自动获得一个constructor(构造函数)属性，这个属性包含一个指向prototype属性所在函数的指针。

显式原型和隐式原型

每个函数function都有一个prototype，也就是显式原型（属性）。
每个实例对象都有一个proto,也就是隐式原型（属性）。
我们可以建立一个函数来验证：

function Fn() { //内部语句：this.prototype={}

}
// 1.每个函数function都有一个prototype，即显式原型
console.log(Fun.prototype);  //object
// 2.每个实例对象都有一个__proto__,可称为隐式原型
var fun = new Fun();
//内部语句：this.__proto=Fn.prototype
console.log(fun.__proto__); //object
//3.实例对象的隐式原型的值为其对应构造函数的显式原型的值
console.log(Fun.prototype === fun.__proto__);//true

显式原型对象和隐式原型对象都是引用变量，保存的都是地址值。显式原型默认指向一个空的Object对象，隐式原型指向创建这个对象的函数的prototype。下面结合流程图来分析上面的代码：

分析：
首先在堆里面创建一个函数对象，假设地址值为0x123，函数名在栈空间里面，Fn是引用类型，它的值是地址值，存的是函数对象的地址0x123.
Function函数对象里面有一个prototype属性，它也是引用类型，它默认指向一个空的Object对象，假设这个空对象的地址是0x234，所以Function函数对象里面prototype属性的值是0x234，所以console.log(Fun.prototype)最终输出的是这个空Object对象。
下面到var fun = new Fun(), 首先产生的fn变量在栈空间中，它也是一个引用类型，假设存的地址是0x345，同时在堆内存中创建一个Fn的实例对象，其地址就是0x345。此外这个Fn的实例对象里面有proto属性，由于this.__proto=Fn.prototype，所以proto的值是：0x234。所以console.log(fun.__proto__);输出的也是Object空对象。
下面给原型添加方法：

//给原型添加方法
Fn.prototype.test = function() {
   console.log("test()");
}
fn.test(); //"test()"

（结合上图）Fn.找到prototype.找到Object，在Object对象里面建test()方法。实际上这个test()也是一个函数对象，和前面的函数对象一样，就不展开解释了。所以在执行fn.test()的之后就能一步一步到Object中找到test(）方法。

小结：

  • 函数的prototype属性是在定义函数时自动添加的，默认值是一个空Object对象。
  • 每个实例对象都有一个proto属性这个属性在创建对象的时候就自动添加，默认值为构造函数的prototype属性值。
    我们能直接操作显式原型但不能直接操作隐式原型（ES6之前）。

原型链

先看这一段代码：

function Fn(){
    this.test1 = function()  {
        console.log("test1()");
    }
}
· = function() {
    console.log("test2()");
}
var fn = new Fn();
fn.test1(); //test1()
fn.test2();//test2() 
console.log(fn.toString());//[object Object]
// fn.test3();error

大概过程和上面的类似。此外我们不难知道Object空对象也是一个实例对象，是Object的实例对象。我们之前说过每个实例对象都有一个proto属性，因此Object的实例对象也有一个proto属性，假设它的值是0x345。其实在执行这些代码之前栈空间里就已经有一个Object，它指向Object函数对象，假设它这个函数对象的地址值是0x456，所以栈空间里的Object的值就是0x456。
Object函数对象里面也必然有一个prototype属性，根据实例对象的隐式原型的值为其对应构造函数的显式原型的值，所以Object函数对象里面的prototype属性的值是0x345，都是指向Object的原型对象，它的地址值是0x345。
Object原型对象里面有很多默认的自带的方法。
console.log(Object.prototype)

当执行到Fn.prototype.test2的时候，在Object对象里面创建test2对象。 var fn = new Fn()和上面的类似，分别在栈空间里创建fn和堆空间里创建Fn函数对象，假设地址是0x567。Fn实例对象里面有proto：0x234，指向Object对象。还有一个test1对象。

注意：Object原型对象里面也有一个proto属性，它的值是null。
所以fn.test3返回的是undefined，因为找到了原型的尽头还是没找到。

因此，函数的显式原型指向的对象默认是空Object实例对象（但是Object不满足）

console.log(Fn.prototype instanceof Object); //true
console.log(Object.prototype instanceof Object); //false 
console.log(Function.prototype instanceof Object);//true

所有函数都是Function的实例，包括Function本身。
console.log(Function.__proto__ === Function.prototype);//true

下面补充一点原型属性的注意。

  • 读取对象的属性值时：会自动到原型链中查找。
  • 设置对象的属性值时：不会查找原型链，如果当前对象中没有这个属性，直接在该对象中添加这个属性并设置值。
  • 在函数对象中定义的方法一般都在原型中，属性一般通过构造函数定义 在对象本身上。
    通过下面的代码可以认证
function Foo() {

}
Foo.prototype.a = "xxx";
var foo1 = new Foo();
console.log(foo1.a);//'xxx'

 var foo2 = new Foo();
 foo2.a = 'yyy';
 console.log("foo1.a = " + foo1.a );
 console.log("foo2.a = " + foo2.a );

上面的结果是：

foo1.a = xxx
foo2.a = yyy

通过这段代码可认证属性在对象本身上，方法在其原型上。

 var foo2 = new Foo();
 foo2.a = 'yyy';
 console.log("foo1.a = " + foo1.a );
 console.log("foo2.a = " + foo2.a );

//  在Foo原型上添加方法
function Person(name,age) {
    this.name = name;
    this.age = age;
}
// 定义一个方法
Person.prototype.setName = function(name) {
    this.name = name;
}
var p1 = new Person('张三',12);
p1.setName('李四');
console.log(p1);

第一接触并学习原型，通过看了一些博客和视频根据自己理解总结出来的。如有不对望大家指正。

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念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