一.闭包

最开始理解闭包是在一个函数内部定义一个函数,可以在外面的环境里进行调用。现在对于闭包的理解是利用函数来保存作用域内的对象。

理解闭包首先要理解执行上下文,变量对象,活动对象,作用域链。因为执行上下文在函数执行后会销毁,因此变量也同时消失,但是为了一些特殊的应用场景,因此需要在函数执行后依旧可以访问到函数内的变量。js语言将函数作为“一等公民”,可以作为参数进行传递,同时每个函数也拥有其作用域链,如果内部函数作为变量返回,那么它将带着它的作用域链一同返回。因为内部函数的作用域链中包含着外部函数的变量,函数声明和参数等,因此,外部函数即使被执行完了,变量也不会销毁,因为他们依旧被内部函数的作用域链引用。 举个例子:

var scope = 'global scope';
function foo() {
var scope = 'local scope';
return function bar() {
console.log(scope);
}
}
foo()();

执行结果是‘local scope’。因为在返回的bar函数被调用的时候,会先从自己的作用域链查找,没有的话会逐级再向上查找,直到找到scope对象,输出结果结束。

二.this

如果把上面的代码增加一句话,在返回的函数中输出this。

var scope = 'global scope';
function foo() {
var scope = 'local scope';
return function bar() {
console.log(scope);
console.log(this);
}
}
foo()();

结果是’local scope’,’window’。this指向的是global对象,在浏览器中就是window。 对this的理解是:

1)它是在解析函数的时候确定的,即执行上下文的一个属性,运行过程中并不会改变。

function foo() {
function bar () {
...
}
this = bar; //会报错
}

2)this根据调用函数的对象或者表达式形式确定。

function foo() {
console.log(this);
}
foo();

调用函数的对象是Global,即window

var foo = {
x:10,
bar: function () {
console.log(this.x);
}
}
var zoo = {
x:20
}
zoo.bar = foo.bar;
zoo.bar();
foo.bar();

输出20,10,调用函数的对象分别是zoo和foo

x = 'global x';
var foo = {
x:'local x',
bar: function () {
console.log(this.x);
}
}
foo.bar();
(foo.bar)();
(foo.bar = foo.bar)();

()表达式并没有改变函数本身的调用值,因此返回‘local x’,赋值表达式改变了函数本身的调用值,因此返回‘global x’。

3)new操作符调用的函数this指向构造函数对象

当函数作为构造器被调用的时候:

function A() {
alert(this); // newly created object, below - "a" object
this.x = 10;
} var a = new A();
alert(a.x); // 10

在这种情况下,new操作符会生成一个新的对象,即构造函数定义的对象。 在对象创建之后,然后所有“A”函数中this的值会设置为新创建的对象。

可以通过函数对this值进行人为干预:

4)call和apply函数

x = 'global x';
var foo = {
x:'local x',
bar: function (n) {
console.log(this.x);
console.log(n);
}
}
foo.bar.call({x:'call x'}, 'call');
foo.bar.apply({x:'apply x'}, ['apply']);

通过call和apply的第一个参数改变this的值。

参考文章:

ECMA-262-3 in detail. Chapter 3. This.

闭包和this的更多相关文章

  1. 《Web 前端面试指南》1、JavaScript 闭包深入浅出

    闭包是什么? 闭包是内部函数可以访问外部函数的变量.它可以访问三个作用域:首先可以访问自己的作用域(也就是定义在大括号内的变量),它也能访问外部函数的变量,和它能访问全局变量. 内部函数不仅可以访问外 ...

  2. 干货分享:让你分分钟学会 JS 闭包

    闭包,是 Javascript 比较重要的一个概念,对于初学者来讲,闭包是一个特别抽象的概念,特别是ECMA规范给的定义,如果没有实战经验,很难从定义去理解它.因此,本文不会对闭包的概念进行大篇幅描述 ...

  3. 深入浅出JavaScript之闭包(Closure)

    闭包(closure)是掌握Javascript从人门到深入一个非常重要的门槛,它是Javascript语言的一个难点,也是它的特色,很多高级应用都要依靠闭包实现.下面写下我的学习笔记~ 闭包-无处不 ...

  4. javascript之闭包理解以及应用场景

    半个月没写博文了,最近一直在弄小程序,感觉也没啥好写的. 之前读了js权威指南,也写了篇博文,但是实话实说当初看闭包确实还是一头雾水.现在时隔一个多月(当然这一段时间还是一直有在看闭包的相关知识)理解 ...

  5. js闭包 和 prototype

    function test(){ var p=200; function q(){ return p++; } return q; } var s = test(); alert(s()); aler ...

  6. js闭包for循环总是只执行最后一个值得解决方法

    <style> li{ list-style: none;width:40px;height: 40px;text-align:center;line-height: 40px;curso ...

  7. JavaScript学习笔记(二)——闭包、IIFE、apply、函数与对象

    一.闭包(Closure) 1.1.闭包相关的问题 请在页面中放10个div,每个div中放入字母a-j,当点击每一个div时显示索引号,如第1个div显示0,第10个显示9:方法:找到所有的div, ...

  8. 带你一分钟理解闭包--js面向对象编程

    上一篇<简单粗暴地理解js原型链--js面向对象编程>没想到能攒到这么多赞,实属意外.分享是个好事情,尤其是分享自己的学习感悟.所以网上关于原型链.闭包.作用域等文章多如牛毛,很多文章写得 ...

  9. 如何设计一门语言(七)——闭包、lambda和interface

    人们都很喜欢讨论闭包这个概念.其实这个概念对于写代码来讲一点用都没有,写代码只需要掌握好lambda表达式和class+interface的语义就行了.基本上只有在写编译器和虚拟机的时候才需要管什么是 ...

  10. JavaScript 闭包深入浅出

    闭包是什么? 闭包是内部函数可以访问外部函数的变量.它可以访问三个作用域:首先可以访问自己的作用域(也就是定义在大括号内的变量),它也能访问外部函数的变量,和它能访问全局变量. 内部函数不仅可以访问外 ...

随机推荐

  1. 用MVVM做了一个保存网页的工具-上篇

    前言: 你是否有过收藏了别人博客或文章,当想用的时候却找不到?你是否有过收藏了别人博客或文章,却因为没有网络而打不开网页?OK,下面是我做的一个工具,有兴趣的同学们可以download 玩下,哈哈^. ...

  2. 浏览器兼容处理(HTML条件注释、CSSHack和JS识别)

    前面的话 本文中所有IEx+代表包含x及x以上:IEx-代表包含x及x以下,仅个人习惯.例:IE7+代表IE7.IE8…… 本文中所有例子全部经过测试,欢迎交流. HTML识别 条件注释法(IE10+ ...

  3. 使用NPOI从Excel中提取图片及图片位置信息

    问题背景: 话说,在ExcelReport的开发过程中,有一个比较棘手的问题:怎么复制图片呢? 当然,解决这个问题的第一步是:能使用NPOI提取到图片及图片的位置信息.到这里,一切想法都很顺利.但NP ...

  4. GitHub入门教程 Hello World for GitHub

          Intro                              1.简介 What is GitHub?           2.什么是github? Create a Reposi ...

  5. H5游戏开发之抓住小恐龙

    第一次写技术性博文,以前都只是写一些生活感想,记录一些生活发生的事情. 博主大三学生一枚,目前学习JS一年多,还处于学习阶段,有什么说的不好的希望大牛指点下,由于第一次写博文,排版什么的有待改进,希望 ...

  6. Spark入门实战系列--3.Spark编程模型(下)--IDEA搭建及实战

    [注]该系列文章以及使用到安装包/测试数据 可以在<倾情大奉送--Spark入门实战系列>获取 . 安装IntelliJ IDEA IDEA 全称 IntelliJ IDEA,是java语 ...

  7. AngularJS in Action读书笔记2——view和controller的那些事儿

    今天我们来818<angularjs in action>的第三章controller和view. 1.Big Picture概览图 View是angularjs编译html后呈现出来的, ...

  8. T-SQL中jion操作

    --创建学生表 create table Students( sno nvarchar(10) not null primary key, name nvarchar(30) not null, ge ...

  9. [SDK2.2]Windows Azure Virtual Network (4) 创建Web Server 001并添加至Virtual Network

    <Windows Azure Platform 系列文章目录> 在上一章内容中,笔者已经介绍了以下两个内容: 1.创建Virtual Network,并且设置了IP range 2.创建A ...

  10. 解决matplotlib的中文问题

    matplotlib的强大无需我去言说,但它对使用中文的我来说却有一点瑕疵,那就是--在默认状态下,matplotlb无法在图表中使用中文. 在网上查找了一些资料,发现matplotlib本身是支持U ...