JavaScript.prototype 和 继承 - 01

我为什么要把 javascript.prototype 原型单独拿出一系列博客来写?

因为平时写js代码的时候很少用到!!!!

我为什么平时写js代码的时候很少用到?

因为平时我写js代码,特别是对象的时候.不出意外,99.99999%的情况都是使用字面量的写法!!!!

var obj = {
    .....
}

一个简单的场景

我们使用字面量(99.9999%的情况都是如此)声明一个对象.

var obj = {
    name: '李四',
    age: 22
}

然后调用

obj.showInfo()

不出意外,肯定报错.且报错信息是 obj.showInfo is not function..

image.png

到目前为止,从来都没有人怀疑过.

这里就应该报错.因为你没有定义这个方法.

那如果我调用obj.toString()方法呢?

[object Object]

我没有定义 toString 方法,为什么不报错,还正确执行了呢?

这个 toString 的方法是哪里来的?


Object.prototype

在解释 toString 方法哪里来的之前

有一个规则需要知道: (什么是规则?规则就是你可以先不去理解,但是必须强行记忆和知道的知识)

在js中函数也是对象,所有的函数对象上会有一个 .prototype 的属性.

Object 也是一个函数,所以,它也有 .prototype 属性.===> Object.prototype

打印一下 Object.prototype 这个对象上有哪些属性?
(请注意,在浏览器环境中打印,在Node.js环境中打印将会返回一个空对象)

image.png

所以,我们可以先暂时假定: obj.toString 方法是来自 Object.prototype 对象上的.

代码改造

之前我们的代码是

var obj = {
    name: '李四',
    age: 22
}

console.log(obj.toString())

[object Object]

之前也说过,一般在书写js代码创建一个对象时.

不夸张的说 99.9999999% 的情况都是写的对象字面量(就像上述那样)

但实际上,这段代码也可以改写成这样.

var obj = new Object()
obj.name = '李四'
obj.age = 22

我们可以理解成,对象字面量其实是一个语法糖.
它帮我们隐式的调用了 new Object().

所以,在我们写js代码利用对象字面量创建对象的时候,new Object() 其实无处不在(因为99.9999%的情况下,我们都是使用对象字面量来创建对象.反而忽略了new的存在.).


new Object()

现在我们知道了,使用对象字面量创建对象只是一个语法糖.
其内部帮我们调用了 new Object().

如果要了解为什么 obj.toString() 没问题.

还需要知道一个前置规则(第一个是:所有的函数都包含一个.prototype属性)

所有构造的对象(隐式或显式(用new).都会从它的构造函数对象的prototype对象继承.

于是,可以画一下面这张图.

image.png
  • Object 是一个函数,它有一个属性叫 .prototype.
  • .prototype 属性本身也是一个对象,它也右边那些属性和方法.
  • obj 实际上是 Object 函数构造出出来的实例.所以,根据第二条规则,通过 new Object() 创建出来的对象,都会从 Object.prototype 对象上继承属性和方法.
  • 所以,我们调用 obj.toString 实际上是调用的 Object.protoype.toString 方法.

证明obj.toString === Object.prototype.toString

我们先尝试修改一下 Object.prototype.toString 让它专门为 obj 对象来使用.

Object.prototype.toString = function () {
  console.log(this.name, this.age)
}

obj.toString()
李四 22

关于 prototype 对象属性的COW(copy on write)

现在在创建一个对象字面量,但内部没有 nameage 属性.

const obj2 = {}

根据上述的规则一 & 规则二.所以下列这条等式是成立的.

console.log(obj2.toString === Object.prototype.toString) // true.

如果我现利用 obj2 修改了 toString 函数,会对 obj 产生影响吗?

obj2.toString = function() {
    console.log('toString函数被我重写了.')
}
obj.toString()

结果

李四 22

除非修改 prototype 对象本身,否则继承自这个 prototype 对象的对象,做的任何修改只会影响此对象自己.
而不会影响到其他的对象.
这个就叫做原型对象的 COW ==copy on write 写时复刻==

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

推荐阅读更多精彩内容