Js中概念理解(一)

转载 2017年01月03日 09:09:33

Js中概念理解(一)

Js 中 核心概念

变量提升


Js中var声明的作用域,从声明处向前后两个方向扩展,知道触及函数边界才停止,作用域很广,一进入函数Js引擎就会马上找到它并创建出来,这就是所谓的 “变量提升”。Js引擎会将所有var声明和function函数声明提升到函数内的最高处。

用ES6的let关键字声明变量不存在 变量提升的特性,所以在let声明变量之前,使用变量会报错。

立即调用函数表达式(iife)


本质:立即执行函数表达式

顾名思义,立即执行函数可以让你的函数创建后立即执行。常用形式如下:

1、(function(){})();

2、(function(){}());

只有函数表达式后加上括号,函数才会立即执行,函数声明即便后加括号也不会立即执行。

js中,括号内只允许表达式,当js引擎解析代码是,先遇到(),再遇到function时就会主动将()里的匿名函数识别为函数表达式,而非函数声明。

(function(a){ console.log(a); //输出123,使用()运算符})(123);

(function(a){ console.log(a); //输出1234,使用()运算符}(1234));

!function(a){ console.log(a); //输出12345,使用!运算符}(12345);

+function(a){ console.log(a); //输出123456,使用+运算符}(123456);

-function(a){ console.log(a); //输出1234567,使用-运算符}(1234567);var fn=function(a){ console.log(a); //输出12345678,使用=运算符}(12345678)

匿名函数前加 ! + - = , 都可以起到将匿名函数转换为函数表达式,后加括号即可立即执行,这些运算符消除了js引擎识别函数表达式和函数声明的歧义,告诉js引擎这是一个可运算的函数表达式,而非函数声明。 常规做法是加括号实现立即执行,其他运算符会和函数返回值运算

立即执行函数的作用:

js中没有私有域的概念,声明变量如果同名存在相互覆盖的情况,使用立即执行函数(iife)目的就是模仿一个私有作用域,立即执行的匿名函数相当于一个容器,内部可以访问外部的变量,但是外部不可以访问内部的变量,所以还可称为“匿名包装器”。

详解立即执行函数

函数声明 和 函数表达式


  • 函数声明:

    function fnname(){...};function 关键字声明一个函数,再指定一个函数名,既函数声明。

  • 匿名函数

    function(){...},使用function声明一个函数,但未指定函数名,所以叫匿名函数,匿名函数属于函数表达式,匿名函数作用很多,赋予一个变量则创建函数,赋予一个事件则成为事件处理程序或创建闭包。

  • 函数表达式

    var fnname=function(){...} 使用function声明一个函数,但未指定函数名,然后将匿名函数赋予一个变量,叫函数表达式。

  • 函数声明和函数表达式区别

    // 函数声明提升fnName(); // 正常,因为函数声明被提升,所以函数调用可以在声明之前function fnName(){

    ...

    }

    fnName(); // 错误,函数调用必须在函数表达式之后var fnName=function(){

    ...

    }

    var fnName=function(){

    alert('hello world!');

    }();// 函数表达式加(),js引擎解析到此处时,函数立即执行function fnname(){

    alert('hello world');

    }();// 不会报错,但js引擎只会解析函数声明,忽略后面的(),函数声明不会被调用function(){

    alert('hello world');

    }();// 语法错误,虽然匿名函数属于函数表达式范畴,但未执行赋值操作,// 所以js引擎将function关键字解析为函数声明,报错:要求需要一个函数名

    • javascript引擎在解析javascript代码时,函数声明会函数声明提升,当前执行环境(作用域)上的函数声明,而函数表达式必须等到js引擎执行到它所在行时,才会从上而下一行一行地解析函数表达式。

    • 函数表达式后面可以加上(),立即调用该函数,函数声明不可以,函数声明不可以,只能以fnName()形式调用。

块级作用域


ES5只有全局作用域和函数作用域,没有块级作用域,这会带来如下问题: 内层变量覆盖外层变量

var tmp=new Date();function f(){

alert(tmp); if(false){ var tmp='hello world';

}

}

f();// 输出:// undefined

分析:

原因在于“变量提升”,内部的var tmp='hello world';变量提升,覆盖了f()函数作用域,进而覆盖了外部的tmp变量,而且alert时还没有执行到var tmp='hello world;'所以会输出undefined.

var s = 'hello';for (var i = 0; i < s.length; i++) { console.log(s[i]);

}console.log(i); // 5

i变量提升,循环结束后并未消失,成为全局变量,或有违程序设计初衷。

暂时性死区


代码块内,使用let命令声明变量之前,该变量是不可用的,语法上成为暂时性死区

注意 由于暂时性死区的存在,typeof就不再是一个百分之百安全的操作。

本文为头条号作者发布,不代表今日头条立场。

A/B 测试的基本概念举例理解以及具体实现方法【传统A/B测试基于后端的 A/B 测试(Back-end AB test),现在基本上基于前端js在客户端进行分流,有更多优点,请看里面】

文章来源:http://www.aliued.cn/2010/09/27/ab-testing-realization-method.html 什么是A/B测试?以及如何进行? 很多朋友都问我怎...

JS概念理解(一)——函数和对象、原型链、_proto_

最近发现自己JS的基础不太好,于是通过看书和大神的博客,通过自己的理解将一些难懂的概念在此总结:         1.函数和对象的关系:         在JavaScript中一切对象都是通过函数创...

JS概念理解(二)——this

this在JS中经常出现并使用,其中this所取的值是当函数被调用执行时才可以确定,定义时还无法确定。因为this取值关乎执行上下文环境,每次调用时可能都不一样,下面介绍this的几种取值情况:  ...

javascript_js加密解密概念

  • 2012年10月22日 11:08
  • 28KB
  • 下载

js 基本概念

  • 2013年01月10日 16:11
  • 2.39MB
  • 下载

js基本概念注意点—数据类型

【1】关于JS数据类型 数据类型的类别: JS中的数据类型总的可以分为几下几类:Number(数值型)、Boolean(布尔型)、String(字符串型)、Undefined和Null,还有一种复杂数...

什么是vue.js?(概念很清楚)

Vue.js新手入门指南最近在逛各大网站,论坛,以及像SegmentFault等编程问答社区,发现Vue.js异常火爆,重复性的提问和内容也很多,楼主自己也趁着这个大前端的热潮,着手学习了一段时间的V...

JS中命名空间(namespace)的概念和使用

为什么使用命名空间         引入命名空间之前,一个令开发人员头疼的问题就是如何防止函数名/类名和其他人的冲突,在一个公司内部项目组之间可以通过命名预定(比如加前缀等)解决这个问题,但是把视线...

Node.js之模块的基本概念

模块算是Node.js里面比较重要的概念了,以往在网页上写JavaScript,都是通过标签来嵌入JavaScript代码,这样对于代码的组织和复用并不灵活,所以,Node.js使用了模块来管理不同的...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Js中概念理解(一)
举报原因:
原因补充:

(最多只允许输入30个字)