This post will cover the JavaScript questions I have encountered and have seen during my programming career. They will mainly focus on vanilla JavaScript though there are lots of excellent frameworks out there and many people are using them in their daily work.this keywordthis keyword is an very important but easy to confuse concept in JavaScript since it is always referring to the calling object of the function.1. What will be the output of below code snippet?function User(name) { this.name = name; this.display = function(){ console.log(this.name); }}var user = new User("javas...

Since the release of Java 8, people are excited to see a big feature added to this language which is existing in other languages for a long time -- Lambda expression. The introduction of lambda expression in Java 8 gives people an easy way or a vertical to horizontal way to solve problems. There are many posts on the Internet which shows how to use lambda expression in Java, such as Lambda Quick Start and Java 8 Lambda Expressions Tutorial with Examples. In this post, we will only focus on the this keyword in lambda expression.Unlike anonymous functions, a lambda expression can be considered a...

this in JavaScript is always confusing, it is one of the most frequently seen traps in JavaScript. this is not a good design in JavaScript(You can refer some other design flaws of JavaScript here), since it's lazy binding feature, it can be a global object, the current object or.... Some people even avoid using this in JavaScript.Actually if you master how this works, then you will know how to stay away from these traps. Let's take a look at what this points to in below situations.1. In global scope codesalert(this)//windowthis will point to global object(usually it's window in web browsers) i...

In JavaScript, this is always pointing to the owner of a function or a method.FunctionLet's check out function first.function introduce() {     alert("Hello, I am Laruence\r\n");}For this function, what does this point to? In JavaScript, a global function's owner is the current page, i.e, the window object. Because its a method of the window object if we define a global function. Now you should know the this will point to the window object in the above function.If we check the introduce property of window:var name = "I am Laruence";function introduce() {  &nb...

this is a keyword in JavaScript. It refers to an internal object created automatically when a function executes, it can only be used in a function. For example:        function test(){　　　　this.x = 1;　　}The this keyword will change when a function is called in different situations. However, the general rule is : this refers to the object which calls the function.Next we discuss the use of this in 4 different situations.1. In pure function callThis is the most common use of a function, it is a global call, so the this w...

Many people get tripped up by the this keyword in JavaScript. I think theconfusion comes from people reasonably expecting this to work like “this”does in Java or the way people use “self” in Python. Although this issometimes used to similar effect, it’s nothing like “this” in Java or otherlanguages. And while it’s a little harder to understand, its behavior isn’tmagic. In fact, this follows a relatively small set of simple rules. Thispost is an explanation of those rules.But first, I want to give some terminology and information about Ja...

One's sentiment toward JavaScript flips betweenelegance and disgust without transitingintermediate states.The key to seeing JavaScript as elegant is understandingits warts, and knowing how to avoid, work around or even exploit them.I adopted this avoid/fix/exploit approach after readingDoug Crockford'sJavaScript: The Good Parts:Doug has a slightly different and more elaborate take on the bad partsand awful parts,so I'm sharing my perspective on the four issues that have caused me the most griefin the past:how to fix broken block scope with with;the four (not three!) meanings of this;promoting ...

On this page I explain the two advanced event registration models:W3C’s and Microsoft’s. Since neither is cross–browser supported,their use is, for the moment, deprecated.W3C and Microsoft have both developed their own event registration modelto replace Netscape’straditional model. Though I’m notimpressed by the Microsoft model, W3C’s is very good, except for onecrucial vagueness.Unfortunately few browsers support it at the moment.W3CW3C’sDOM Level 2 Event specification pays careful attentionto the problems of the traditional model. It offers a ...