当前位置:主页 > 资料 >

Hoisting in JavaScript
栏目分类:资料   发布日期:2018-08-02   浏览次数:

导读:本文为去找网小编(www.7zhao.net)为您推荐的Hoisting in JavaScript,希望对您有所帮助,谢谢! Two weeks ago I gave a lightning talk at Caphyon on hoisting in JavaScript. Putting aside all the common jokes about the JS

本文为去找网小编(www.7zhao.net)为您推荐的Hoisting in JavaScript,希望对您有所帮助,谢谢! 本文来自去找www.7zhao.net



Two weeks ago I gave a lightning talk at Caphyon on hoisting in JavaScript. Putting aside all the common jokes about the JS language, people really seemed to like it. It was kind of a challenge to talk about JS while having an audience of C++ and Java colleagues.

内容来自www.7zhao.net

Now getting back to the talk, that was lightning fast and it didn’t covered that much as I would’ve liked to. So I’ll try to write a bit more on JavaScript scoping and hoisting below. www.7zhao.net

欢迎访问www.7zhao.net

Hosting Hoisting

On the clickbait talk title, that’s actually a true story. Last time I mentioned the hoisting term in  , I remember that a friend read it and told me I had a typo in the article.

本文来自去找www.7zhao.net

So what’s hoisting in JavaScript? The short answer is that, conceptually, variable and function declarations are moved/hoisted to the top of their scope before code execution. 内容来自www.7zhao.net

Variable Declaration

When declaring a variable, only its name gets hoisted.

www.7zhao.net

console.log(name);
var name = "whatever";
// The console logs undefined 内容来自www.7zhao.net 

Here’s how the above is interpreted, thus undefined .

www.7zhao.net

var name;
console.log(name);
name = "whatever"; 

欢迎访问www.7zhao.net

Function Declaration

Unlike var , a function declaration hoists its actual definition too. 去找(www.7zhao.net欢迎您

hello("world");
function hello(p) {
  return "Hello " + p;
}
// The console logs "Hello world" 

copyright www.7zhao.net

Here’s how the above is interpreted, which results in “Hello world” :

copyright www.7zhao.net

function hello(p) {
  return “Hello ” + p;
}
hello("world"); 去找(www.7zhao.net欢迎您 

Function Expressions

The variable name gets hoisted, but not the function assignment. 去找(www.7zhao.net欢迎您

hello("world");
var hello = function(p) {
    return “Hello ” + p;
}
// TypeError: hello is not a function 去找(www.7zhao.net欢迎您 

Here’s how the above is interpreted,which results in hello is not a function : 内容来自www.7zhao.net

var hello;
hello("world");
hello = function(p) {
    return "Hello"  + p;
} 
去找(www.7zhao.net欢迎您

On ES6 and Later

The hoisting behavior isn’t something that applies to the latest ECMAScript gems:

www.7zhao.net

  • let
  • const
  • class declaration
  • arrow function

let

www.7zhao.net

// let
console.log(name);
let name = "whatever";
// Uncaught ReferenceError: name is not defined 本文来自去找www.7zhao.net 

const copyright www.7zhao.net

// const
console.log(name);
const name = "whatever";
// Uncaught ReferenceError: name is not defined 欢迎访问www.7zhao.net 

class declaration

本文来自去找www.7zhao.net

// class declaration
const p = new Rectangle();
class Rectangle {...}
// Uncaught ReferenceError: Rectangle is not defined 

www.7zhao.net

arrow function copyright www.7zhao.net

// arrow function
console.log(doubled);
const doubled = [1, 2, 3].map(n => n * 2);
// Uncaught ReferenceError: doubled is not defined 去找(www.7zhao.net欢迎您 

Last but Not Least

Here’s what Brendan Eich said about JS hoisting:

内容来自www.7zhao.net

var hoisting was an implementation artifact. - 

去找(www.7zhao.net欢迎您

function hoisting was better motivated: function declaration hoisting is for mutual recursion & generally to avoid painful bottom-up ML-like order - 

欢迎访问www.7zhao.net

The Slides

, just in case.

欢迎访问www.7zhao.net

去找(www.7zhao.net欢迎您


本文原文地址:https://dzone.com/articles/hoisting-in-javascript-4

以上为Hoisting in JavaScript文章的全部内容,若您也有好的文章,欢迎与我们分享!

本文来自去找www.7zhao.net

Copyright ©2008-2017去找网版权所有   皖ICP备12002049号-2 皖公网安备 34088102000435号   关于我们|联系我们| 免责声明|友情链接|网站地图|手机版