写给Java开发者看的JavaScript对象机制

帮助面向对象开发者理解关于JavaScript对象机制

本文是以一个熟悉OO语言的开发者视角,来解释JavaScript中的对象。

对于不了解JavaScript 语言,尤其是习惯了OO语言的开发者来说,由于语法上些许的相似会让人产生心理预期,JavaScript中的原型继承机制和class语法糖是让人迷惑的。

如果你已经对prototype机制已有了解,但是由于两者对象机制的巨大(本质)差异,对它和构造函数,实例对象的关系仍有疑惑,本文或许可以解答你的问题。

我们看下面的代码,可以看出和OO语言相比,语法上也有很大分别:

// 定义一个类
class Foo {
  constructor() {
    this.a = 'a';
  }
}

//实例化对象
const foo = new Foo();

//定义原型的属性
Foo.prototype.b = 'b';

//实例可以访问属性
foo.b // "b"

//修改原型的属性
Foo.prototype.b= 'B';


//实例属性值没有被修改
foo.b // "b"

类已经定义了怎么还能修改呢?prototype又是什么?

不存在面向对象

对于熟悉了面向对象的开发者而言JS中种种非预期操作的存在,都是因为JavaScript中根本没有面向对象的概念,只有对象,没有类。

即使ES6新添了class语法,不意味着JS引入了面向对象,只是原型继承的语法糖。

原型是什么

什么是原型?如果说类是面向对象语言中对象的模版,原型就是 JS中创造对象的模版。

在面向类的语言中,实例化类,就像用模具制作东西一样。实例化一个类就意味着“把类的形态复制到物理对象中”,对于每一个新实例来说都会重复这个过程。

但是在JavaScript中,并没有类似的复制机制。你不能创建一个类的多个实例,只能创建多个对象,它们[[Prototype]]关联的是同一个对象。

//构造函数
function Foo(){
}
//在函数的原型上添加属性
Foo.prototype.prototypeAttribute0 = {status: 'initial'};

const foo0 = new Foo();
const foo1 = new Foo();
foo0.prototypeAttribute0 === foo1.prototypeAttribute0 //true

对象、构造函数和原型的关系

当我们创建一个新对象的时候,发生了什么,对象、构造函数和原型到底什么。

先简单地概括:

原型用于定义共享的属性和方法。

构造函数用于定义实例属性和方法,仅负责创造对象,与对象不存在直接的引用关系。

我们先不用class语法糖,这样便于读者理解和暴露出他们之间真正的关系。

// 先创建一个构造函数 定义原型的属性和方法
function Foo() {
    this.attribute0 = 'attribute0';
}

当创建了一个函数,就会为该函数创建一个prototype属性,它指向函数原型。

所有的原型对象都会自动获得一个constructor属性,这个属性的值是指向原型所在的构造函数的指针。

构造函数和原型.png

现在定义原型的属性和方法


Foo.prototype.prototypeMethod0 = function() {
    console.log('this is prototypeMethod0');
}

Foo.prototype.prototypeAttribute0 = 'prototypeAttribute0';

好了,现在,新建一个对象,

const foo = new Foo();

foo.attribute0 // "attribute0"
foo.prototypeAttribute0 //"prototypeAttribute0"
foo.prototypeMethod0() // this is prototypeMethod0

它拥有自己的实例属性attribute0,并且可以访问在原型上定义的属性和方法,他们之间的引用关系如图所示。

对象构造函数和原型.png

当调用构造函数创建实例后,该实例的内部会包含一个指针(内部对象),指向构造函数的原型对象。

当读取实例对象的属性时,会在实例中先搜寻,没有找到,就会去原型链中搜索,且总是会选择原型链中最底层的属性进行访问。

对象的原型可以通过__proto__在chrome等浏览器上访问。

__proto__是对象的原型指针,prototype是构造函数所对应的原型指针。

语法糖做了什么

ES6推出了class语法,为定义构造函数和原型增加了便利性和可读性。

class Foo {
    constructor(){
        this.attribute0 = 'attribute0';
    }

    prototypeMethod0(){
        console.log('this is prototypeMethod0')
    }
}

/* 相当于下面的声明*/
function Foo() {
    this.attribute0 = 'attribute0';
}

Foo.prototype.prototypeMethod0 = function() {
    console.log('this is prototypeMethod0')
}

class中的constractor相当于构造函数,而class中的方法相当于原型上的方法。、

值得注意的特性

属性屏蔽 —— 避免实例对象无意修改原型

看这段代码,思考输出的结果。

class Foo {
    prototypeMethod0(){
        console.log('this is prototypeMethod0')
    }
}

const foo0 = new Foo();
const foo1 = new Foo();

foo0.prototypeMethod0 === foo0.__proto__.prototypeMethod0 // true

foo0.prototypeMethod0 = () => console.log('foo0 method');
foo0.prototypeMethod0(); //??
foo1.prototypeMethod0(); //??
foo0.prototypeMethod0 === foo0.__proto__.prototypeMethod0 // ??

输出的结果是

foo0.prototypeMethod0(); // foo0 method
foo1.prototypeMethod0(); // this is prototypeMethod0
foo0.prototypeMethod0 === foo0.__proto__.prototypeMethod0 // false

我们知道对象(即便是原型对象),都是运行时的。

创建之初,foo本身没有prototypeMethod0这个属性,访问foo0.prototypeMethod0将会读取foo0.__proto__.prototypeMethod0

直接修改foo0.prototypeMethod0没有改变__proto__上的方法原因是存在属性屏蔽

现在的情况是:想要修改foo0.prototypeMethod0prototypeMethod0foo中不存在而在上层(即foo.__proto__中存在),并且这不是一个特殊属性(如只读)。

那么会在foo中添加一个新的属性。

这便是为什么直接修改却没有影响__proto__的原因。

小结

再温习一遍这些定义:

原型用于定义共享的属性和方法。

构造函数用于定义实例属性和方法,仅负责创造对象,与对象不存在直接的引用关系。

__proto__是对象的原型指针,prototype是构造函数的原型指针。

在解释原型作用的文章或书籍中,我们会听到继承这样的术语,其实更准确地,委托对于JavaScript中的对象模型来说,是一个更合适的术语。

委托行为意味着某些对象在找不到属性或者方法引用时会把这个请求委托给另一个对象。对象之间的关系不是复制而是委托。


参考

《JavaScript高级程序设计》

《你不知道的JavaScript》

本文仅供解惑,要在脑袋里形成系统的概念,还是要看书呀。

有疑问欢迎大家一起讨论。

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

推荐阅读更多精彩内容