惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

雷峰网
雷峰网
博客园 - 叶小钗
博客园_首页
阮一峰的网络日志
阮一峰的网络日志
D
Docker
J
Java Code Geeks
B
Blog
G
Google Developers Blog
小众软件
小众软件
博客园 - 聂微东
罗磊的独立博客
大猫的无限游戏
大猫的无限游戏
IT之家
IT之家
量子位
WordPress大学
WordPress大学
美团技术团队
钛媒体:引领未来商业与生活新知
钛媒体:引领未来商业与生活新知
宝玉的分享
宝玉的分享
腾讯CDC
Martin Fowler
Martin Fowler
V
Visual Studio Blog
D
DataBreaches.Net
Stack Overflow Blog
Stack Overflow Blog
C
Check Point Blog

JavaScript iDiallo.com

How to tell an element is in view using JavaScript. Complex function call delays without nesting in JavaScript How to use pushState without breaking the back button How to create DOM elements efficiently with JavaScript Uncaught TypeError: Cannot read property of null Why Use Prototype in JavaScript Optimization: Minimize look-ups in for loops. Uncaught SyntaxError: Unexpected token < Magical JavaScript Live Collection
Creating a class in JavaScript
Ibrahim Dial · 2016-01-03 · via JavaScript iDiallo.com

Creating a class in JavaScript

JavaScript Notes

Practical tips and subtle gotchas from real production experience.

It comes to a surprise that JavaScript, the most popular language on the web, has the most unconventional method for creating a class. In most object oriented programming languages, classes follow a common syntax. Here is one example:

class Person {
    private String fname;
    private String lname;

    public String className = "Person";

    public function __construct(fname,lname){
        this.fname = fname;
        this.lname = lname;
    }

    public function getFullName(){
        return this.fname + " " + this.lname;
    }
}

This is straight forward and coming from any language you will understand what is happening. Except in JavaScript, that's not how you create a class. The word class is a reserved keyword that still haven't found any use in the latest Ecmascript draft.

In JavaScript everything is an object. And that include Functions. And functions are classes...

Ok let me show you. To create a class, you create a function. But this function will be called differently. Let's rewrite our generic class above in JavaScript.

function Person(fname,lname) {

    // private variables
    var firstName = fname,
        lastName  = lname;

    // public variable
    this.className = "Person";

    this.getFullName = function() {
        return firstName + " " + lastName;
    }
}

This looks like a regular function. Using the keyword var we can create private members in the class. And with this, we can create public members. But the main difference occurs on the way we instantiate it.

var person = new Person("Ibrahim","Diallo");
person.getFullName();
> Ibrahim Diallo

When used with the keyword new, like in most languages, we instantiate the class. It may seem confusing at first, but this is just the way it is done in JavaScript, and if you familiarize yourself with it, you will see that it is not so different then other languages.

Note that we can also create Static Classes. It requires no complex naming convention. Let's try to recreate this class as a static one.

var Person = {
    fname: null,
    lname: null,
    className: 'Person',
    getFullName: function() {
        return this.fname + " " + this.lname;
    }
};

One key difference here is that we cannot create private variables. So when trying to decide which type of class you want to create, take this into consideration.


Did you like this article? Subscribe for more and follow updates via RSS.

Back to JavaScript articles