JS 原型和原型链

不是对象的“对象”

JS中的数据类型可分为基本类型(包括数字、字符串、布尔等)和对象,这两者是有有本质差别的。你可能见过类似“JS中一切都是对象”的描述,但实际上这是不够严谨的。更合理的表述应该是“一切都可以被视作对象(或者说表现的像个对象)”。

var a = 1

// 视作对象使用
a.toString()
"1"
a.name = 'foo'
"foo"

// 如果是对象的话,a.name 应该是 foo,
// 但是实际是 undefined 属性赋值并未生效
a.name
undefined

透过上面的例子可以知道,简单类型并非对象,其可以被视作对象使用的原因是,JS引擎在处理a.toString()时,在内部临时创建了一个与该类型匹配的临时对象(如上例 a 是数字,那么就在其内部执行new Number(1)),然后把代码中对该简单的类型的操作“转移”到临时对象上,然后将执行结果返回并输出,有点类似代理的操作。而且,这个临时对象还是“一次性”的,所以先前的修改并不会生效(如上例中的 a.name = 'foo',实际上是在临时对象上执行的,所以后续的 a.name 又是一个新的临时Number(1),所以后面的a.name自然就是undefined了)。

原型和原型链

在获取对象的属性时,如果对象“自身”没有,就会到其原型上找(其原型是对象的__proto__属性,和其构造函数的prototype属性相等,实际上二者是指向同一对象的),如果原型也没有,就到原型的原型找,再没有就到原型的原型的原型找,以此类推。这条原型连着原型的“链”就是原型链。

// 定义一个构造函数 Man
function Man() {}
Man.prototype.name = '张三'
"张三"

// 使用 Man 构造一个对象,并为对象属性赋值
var stranger = new Man()
stranger.name = '李四'
stranger.name 
"李四"

// 删除已赋值属性后,实例已经没有 name 了
// 再次访问该属性则会沿着“链”搜寻原型的 name
delete stranger.name
stranger.name  // === Man.prototype.name === stranger.__proto__.name
"张三"

// 一点补充
stranger.__proto__.constructor === Man
true

Man.prototype.constructor === stranger.__proto__.constructor
true

因为原型本身也是对象,那么原型也有原型,沿着这条链就找到最原始的原型Object.prototype,而Object.prototype还是对象,按照先前的逻辑,那么它还有原型,不过Object.prototype.__proto__ === null,这条链到此为止了。

总结

// 内置
Object.prototype === {constructor: ..., toString: ..., valueOf: ..., ...}
Function.prototype === ƒ () { [native code] }

// “公式 1”
(对象).__proto__ === (该对象的构造函数).prototype

// “公式 2” Object.prototype.__proto__ 并没有指向 Object.prototype
// 而是等于 null,故原形链到此为止,Object.prototype 就是终极原型
Object.prototype.__proto__ === null

// “公式 3” 实际上是“公式 1”的补充
// Function.__proto__ 不等于 Object.prototype
// Function既是函数也是对象,实际上也是满足“公式 1”的
Function.__proto__ === Function.prototype

// 一些 可能错误 的推论
// 由公式 1 3 推导出
(任意函数).__proto__ === Function.prototype
(任意函数).__proto__.__proto__ === Object.prototype
(任意函数).prototype.prototype === (任意函数).__proto__.prototype === (任意函数).prototype .__proto__=== undefined

// 由公式 1 2 推导出
(任意非 Object 函数).prototype.__proto__ === Object.prototype

// 有意思的是
// (function fn(){}).__proto__.constructor === Function
// (function(){}).__proto__.contructor === Function.prototype.contructor !== Function
(任意非 Object.prototype 对象).__proto__.constructor === (该对象的构造函数)

一些例子,可以用来巩固原型和原型链知识

('1').__proto__ === String.prototype
({}).__proto__ === Object.prototype
(function(){}).__proto__ === Function.prototype

===========================================

String.__proto__ === Function.prototype
Object.__proto__ === Function.prototype
Function.__proto__ === Function.prototype

===========================================

String.__proto__.__proto__ === Object.prototype
Object.__proto__.__proto__ === Object.prototype
Function.__proto__.__proto__ === Object.prototype

===========================================

String.prototype.__proto__ === Object.prototype
Object.prototype.__proto__ === null
Function.prototype.__proto__ === Object.prototype

===========================================

String.prototype.prototype === undefined
Object.prototype.prototype === undefined
Function.prototype.prototype === undefined

===========================================

('1').__proto__ === String.prototype
('1').__proto__.__proto__ === Object.prototype
('1').__proto__.__proto__.__proto__ === null

({}).__proto__.__proto__ === null

String.__proto__ === Function.prototype
String.__proto__.__proto__ === Object.prototype
String.__proto__.__proto__.__proto__ === null

===========================================

('').__proto__.constructor === String
(Object).__proto__.constructor === Function
({}).__proto__.constructor === Object

===========================================

(1).prototype === undefined

参考链接:
js中为什么不能给基本类型的变量添加属性和方法?
JavaScript深入之从原型到原型链

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 220,137评论 6 511
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 93,824评论 3 396
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 166,465评论 0 357
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 59,131评论 1 295
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 68,140评论 6 397
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,895评论 1 308
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,535评论 3 420
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,435评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,952评论 1 319
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 38,081评论 3 340
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 40,210评论 1 352
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,896评论 5 347
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,552评论 3 331
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 32,089评论 0 23
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,198评论 1 272
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,531评论 3 375
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 45,209评论 2 357

推荐阅读更多精彩内容