When I first started learning about JavaScript object model my reaction was of horror and disbelief. I was totally puzzled by its prototype nature as it was my first encounter with a prototype based language. I didn’t help that JavaScript has a unique take on prototypes as it adds the concept of function constructors. I bet that many of you have had similar experience.

But as I used JavaScript more I didn’t just learn to understand its object model but also started love parts of it. Thanks to JavaScript I have find out the elegance and flexibility of prototypes languages. I am now quite fond of prototype languages because they have a simpler and more flexible object model than class based languages.

Prototypes in Javascript

Most guides / tutorials start explaining JavaScript objects by going directly to ‘constructor functions’, I think this is a mistake, as they introduce a fairly complex concept early on making Javascript look difficult and confusing from the start. Let’s leave this for later. First let’s start with the basics of prototypes.

Prototype chains (aka prototype inheritance)

Every object in Javascript has a prototype. When a messages reaches an object, JavaScript will attempt to find a property in that object first, if it cannot find it then the message will be sent to the object’s prototype and so on. This works just like single parent inheritance in a class based language.

Prototype inheritance chains can go as long as you want. But in general it is not a good idea to make long chains as your code can get difficult to understand and maintain.

The __proto__ object

To understand prototype chains in JavaScript there is nothing as simple as the __proto__property. Unfortunately __proto__ is not part of the standard interface of JavaScript, not at least until ES6. So you shouldn’t use it in production code. But anyway it makes explaining prototypes easy.

// let's create an alien object
var alien = {
kind: 'alien'
} // and a person object
var person = {
kind: 'person'
} // and an object called 'zack'
var zack = {}; // assign alien as the prototype of zack
zack.__proto__ = alien // zack is now linked to alien
// it 'inherits' the properties of alien
console.log(zack.kind); //=> ‘alien’ // assign person as the prototype of zack
zack.__proto__ = person // and now zack is linked to person
console.log(zack.kind); //=> ‘person’

As you can see the __proto__ property is very straightforward to understand and use. Even if we shouldn’t use __proto__ in production code, I think that these examples give the best foundation to understand the JavaScript object model.

You can check that one object is the prototype of another by doing:

console.log(alien.isPrototypeOf(zack))
//=> true

Prototype lookups are dynamic

You can add properties to the prototype of an object at any time, the prototype chain lookup will find the new property as expected.

var person = {}

var zack = {}
zack.__proto__ = person // zack doesn't respond to kind at this point
console.log(zack.kind); //=> undefined // let's add kind to person
person.kind = 'person' // now zack responds to kind
// because it finds 'kind' in person
console.log(zack.kind); //=> 'person'

New / updated properties are assigned to the object, not to the prototype

What happens if you update a property that already exists in the prototype? Let’s see:

var person = {
kind: 'person'
} var zack = {}
zack.__proto__ = person zack.kind = 'zack' console.log(zack.kind); //=> 'zack'
// zack now has a 'kind' property console.log(person.kind); //=> 'person'
// person has not being modified

Note that the property ‘kind’ now exists in both person and zack.

Object.create

As explained before __proto__ is not a well supported way of assigning prototypes to objects. So the next simplest way is using Object.create(). This is available in ES5, but old browsers / engines can be shimmed using this es5-shim.

var person = {
kind: 'person'
} // creates a new object which prototype is person
var zack = Object.create(person); console.log(zack.kind); // => ‘person’

You can pass an object to Object.create to add specific properties for the new object

var zack = Object.create(person, {age: {value:  13} });
console.log(zack.age); // => ‘13’

Yes, the object you need to pass is a bit convoluted, but that is the way it is. See the docs here.

Object.getPrototype

You can get the prototype of an object using Object.getPrototypeOf

var zack = Object.create(person);
Object.getPrototypeOf(zack); //=> person

There is no such thing as Object.setPrototype.

Constructor Functions

Constructor functions are the most used way in JavaScript to construct prototype chains. The popularity of constructor functions comes from the fact that this was the only original way for constructing types. It is also an important consideration the fact that many engines are highly optimized for constructor functions.

Unfortunately they can get confusing, they are in my opinion one of the main reasons why new comers find JavaScript puzzling, but they are a big part of the language and we need to understand them well.

Functions as constructors

In JavaScript you create an instance of a function like this:

function Foo(){}

var foo = new Foo();

//foo is now an instance of Foo
console.log(foo instanceof Foo ) //=> true

In essence functions when used with the keyword new behave like factories, meaning that they create new objects. The new object they create is linked to the function by its prototype, more on this later. So in JavaScript we call this an instance of the function.

‘this’ is assigned implicitly

When we use ‘new’, JavaScript injects an implicit reference to the new object being created in the form of the ‘this’ keyword. It also returns this reference implicitly at the end of the function.

When we do this:

function Foo() {
this.kind = ‘foo’
} var foo = new Foo();
foo.kind //=> ‘foo’

Behind the scenes it is like doing something like this:

function Foo() {
var this = {}; // this is not valid, just for illustration
this.__proto__ = Foo.prototype; this.kind = ‘foo’ return this;
}

But keep in mind that the implicit ‘this’ is only assigned to a new object when using ‘new’. If you forget ‘new’ keyword then ‘this’ will be the global object. Of course forgetting new is a cause of multiple bugs, so don’t forget new.

One convention that I like is capitalizing the first letter of a function when it is intented to be used as a function constructor, so you now straightaway to you are missing the new keyword.

The ‘function prototype’

Every function in JavaScript has a special property called ‘prototype’.

function Foo(){
} Foo.prototype

As confusing as it may sound, this ‘prototype’ property is not the real prototype (__proto__) of the function.

Foo.__proto__ === Foo.prototype //=> false

This of course generates a lot of confusion as people use the term ‘prototype’ to refer to different things. I think that a good clarification is to always refer to the special ‘prototype’ property of functions as ‘the function prototype’, never just ‘prototype’.

The ‘prototype’ property points to the object that will be asigned as the prototype of instances created with that function when using ‘new’. Confusing? This is easier to explain with an example:

function Person(name) {
this.name = name;
} // the function person has a prototype property
// we can add properties to this function prototype
Person.prototype.kind = ‘person’ // when we create a new object using new
var zack = new Person(‘Zack’); // the prototype of the new object points to person.prototype
zack.__proto__ == Person.prototype //=> true // in the new object we have access to properties defined in Person.prototype
zack.kind //=> person

That is mostly everything there is to know about the JavaScript object model. Understanding how __proto__ and function.prototype are related will give you countless hours of joy and satisfaction, or maybe not.

Mistakes, confusing? Let me know.

A Plain English Guide to JavaScript Prototypes的更多相关文章

  1. [转]A plain english introduction to cap theorem

    Kaushik Sathupadi Programmer. Creator. Co-Founder. Dad. See all my projects and blogs → A plain engl ...

  2. [label][JavaScript][The Defined Guide of JavaScript] 如何声明变量

    因为觉得我自己的JavaScript基础很不扎实,或者可以说根本就没有所谓基础,所以就最近一直在看<The Defined Guide of JavaScript> . 在一边看的同时,我 ...

  3. [label][JavaScript][The Defined Guide of JavaScript] 变量的作用域

    变量的作用域 一个变量的作用域(scope)是程序中定义这个变量的区域. 全局(global)变量的作用域(scope)是全局性的,即在JavaScript代码中,它处处都有定义.    而在函数之内 ...

  4. 《JS高程》对象&原型学习笔记

    ECMA-262 把对象定义为:”无序属性的集合,其属性可以包含基本值.对象或者函数.”可以把 ECMAScript 的对象想象成散列表:无非就是一组名值对,其中值可以是数据或函数.   6.1.理解 ...

  5. Cheatsheet: 2019 07.01 ~ 09.30

    Other Intro Guide to Dockerfile Best Practices QuickJS Javascript Engine Questions for a new technol ...

  6. 每个JavaScript开发人员应该知道的33个概念

    每个JavaScript开发人员应该知道的33个概念 介绍 创建此存储库的目的是帮助开发人员在JavaScript中掌握他们的概念.这不是一项要求,而是未来研究的指南.它基于Stephen Curti ...

  7. Tomcat Clustering - A Step By Step Guide --转载

    Tomcat Clustering - A Step By Step Guide Apache Tomcat is a great performer on its own, but if you'r ...

  8. Javascript modules--js 模块化

    https://medium.freecodecamp.org/javascript-modules-a-beginner-s-guide-783f7d7a5fcc 这个网站也是非常好:https:/ ...

  9. JavaScript一词被《牛津大词典》收录了

    早上看VS Team的推特发了这个图片,以前总爱问Java怎么读,现在好了,有标准发音了. 确定是 扎瓦·死磕瑞普特 ,哈哈,以后不要再念加瓦了. …… Last month JavaScript r ...

随机推荐

  1. 粗略阅读《Agile Software Development》后的感想

    大致配合翻译和词典阅读了一下这篇文章之后,我另外还查阅了维基百科.百度百科和MBA智库百科还有一些网络上的文章.对敏捷开发有了一个大致上的浅显的认识. 敏捷建模(Agile Modeling,AM)的 ...

  2. iOS开发 AFNetworking 3.0使用遇到的问题

    前段时间写了一个iOS开发之AFNetworking 3.0.4使用这篇文章,是基本的用法,昨天在使用的时候又出现了几个问题,特地俩记录下,希望能帮到大家! 问题一 我是做一个获取手机验证码的功能,进 ...

  3. 【产品体验】eyepetizer开眼

    第一次写博客,内心还有点小激动呢~~本人产品新人,学习中,希望大家多多指教!  先来两张开眼的界面图坐镇——         开眼简介: appetizer for eyes 即 eyepetizer ...

  4. Portal:十大免费建站程序推荐

    TOP1 独立网店系统 ShopEx,是上海商派网络科技有限公司推出的一个网上商店系列程序.是目前网店软件行业内比较知名的公司.ShopEx旗下的网上商店系统.网上商城系统以及丰富的网商工具,以专业的 ...

  5. Firefly 配置说明

    下图一一个典型的config.json的配置:配置中主要包括四个部分,master,servers,db,memcached.master用来定义master的端口,servers用来定义各个服务器中 ...

  6. Android 多渠道打包原理和使用

    每次中午吃饭总会和技术同学聊天.当做 iOS 开发的做安卓开发的人员在一起的时候,他们中间又多了一个话题:iOS 开发难还是安卓开发难. 这个时候做安卓开发的同学最激动说安卓开发要自己画界面.机型复杂 ...

  7. 服务器部署_centos 安装nginx手记

    前言: a.linux上安装nginx网上有很多文章,本文仅仅是自己整理备忘. b.安装centos的时候,把develop相关组件都装上,免得缺这个缺哪个. c. 本文软件版本:nginx-1.2. ...

  8. QQ输入法个人设置

    常用 按键 外观 词库 账户 高级

  9. 先贴出代码C++ 中的单例模式

    先贴出代码,代码后面是讲解 自己编写的单例模式: #include <iostream> #include <stdio.h> #include <string> ...

  10. 六月计划#1B(6.1-6.8)

    1/7 图论 purfer_sequence