写给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属性，这个属性的值是指向原型所在的构造函数的指针。

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

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


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，并且可以访问在原型上定义的属性和方法，他们之间的引用关系如图所示。

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

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

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

对象的原型可以通过__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.prototypeMethod0，prototypeMethod0在foo中不存在而在上层（即foo.__proto__中存在），并且这不是一个特殊属性（如只读）。

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

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