JavaScript 中 this 是如何工作的 ?

先来看看这个题目:

var x = 0;
var foo = {
    x:1,
    bar:{
    x:2,
    baz: function () {
       console.log(this.x)
     }
    }
}

var a = foo.bar.baz
foo.bar.baz() // 2
a() //0
  • this 永远指向函数运行时所在的对象,而不是函数创建时所在的对象
  • 匿名函数和不处于任何对象中的函数,This指向window
  • call, apply, with指的This是谁就是谁。
  • 普通函数调用,函数被谁调用,This就指向谁

上面的例子中,baz被bar调用所以指向的指bar. a 运行时所在的对象是 window,所以指向的是window。

作用域链?

理解执行环境和上下文

函数调用都有与之相关的作用域和上下文。从根本上说,作用域是基于函数(function-based)而上下文是基于对象(object-based)。换句话说,作用域是和每次函数调用时变量的访问有关,并且每次调用都是独立的。上下文总是关键字 this 的值,是调用当前可执行代码的对象的引用。

执行上下文分有globalfunctioneval,一个函数可以产生无数个执行上下文,一系列的执行上下文从逻辑上形成了 执行上下文栈,栈底总是全局上下文,栈顶是当前(活动的)执行上下文。

执行上下文三属性:this指针,变量对象(数据作用域),作用域链

作用域链 即:一变量在自己的作用域中没有,那么它会寻找父级的,直到最顶层。过程如下:

  • 任何在执行上下文时刻的作用域都由作用域链来实现
  • 在一个函数被定义的时候, 会将它定义时刻的scope chain链接到这个函数对象的[[scope]]属性
  • 在一个函数对象被调用的时候,会创建一个活动对象(也就是一个对象), 然后对于每一个函数的形参,都命名为该活动对象的命名属性, 然后将这个活动对象做为此时的作用域链(scope chain)最前端, 并将这个函数对象的[[scope]]加入到scope chain中.

上面的文字大家可以好好琢磨一下,可以更好的理解函数作用域。

函数声明提升和变量声明提升(Hoisting) ?

我们先来了解js编译器在执行代码的过程:
以执行一段function代码为例:
第一步:创建可执行上下文(以下简称为EC),压入当前的EC栈中。EC中包括了以下信息:

  • 词法环境(=环境记录项(保存变量、函数声明和形参)+ 外部词法环境(function的[[scope]]属性,作用域链的本质))
  • this的指针
  • 变量环境(与环境记录项的值相同,但不再发生变动。)

第二步:收集函数声明变量声明形参,保存在环境记录项内。这个收集的过程,就是一般所谓的声明提升现象的本质。如果发现了重复的标识符,则优先级函数声明形参变量声明(优先级低的会被无视)。

第三步:开始执行代码,环境记录项内没有的标识符会根据作用域链查找标识符对应的值,环境记录项亦有可能因赋值语句而被修改。

第四步:函数执行完毕,EC栈被弹出、销毁。

好了,第二步说的很清楚了 声明提升(Hoisting)现象就是在收集函数、变量声明和形参的过程会根据函数声明、形参、变量声明的顺序优先级来收集。

例子:

var a = 1;
function b() {
    a = 10;
    return;
    function a() {}
}
b();
console.log(a);
// 输出1 由于函数声明提升,b内的实际是这样:
// function b() {
//    function a() {}; 这里是函数声明提升
//    a = 10;
//    return;
//    function a() {}
// }

理解了吗?

勘误:谢谢github上有同学的指正关于博客中的一个问题 · Issue #1 · stephenzhao/hexo-theme-damon,上面的正确执行应该为先进行预编译,所以先执行function a(){},然后会进行对a的赋值操作。

//正确的顺序应该为:
// function b() {
//    function a() {}
//    a = 10;
//    return;
// }

什么是闭包,如何使用它,为什么要使用它?

还是上面的题目,做个变形。

var x = 0;
var foo = {
    x:1,
    bar:function () {
        console.log(this.x);
        var that = this;
        return function () {
           console.log(this.x)
           console.log(that.x)
        }
    }
}

foo.bar()       // 1
foo.bar()()     // this: 0, that: 1

上面的例子中ba‘r里面返回了一个匿名函数,这个匿名函数可以在外部被调用即:foo.bar()() 读取到了bar的执行上下文的变量对象 that,这个函数就形成了一个闭包。

好了,我们理解了上面的套路,下面来解释闭包就好理解了。

闭包就是能够读取其它函数内部变量的函数

在Javascript语言中,只有函数内部的子函数才能读取局部变量,因此可以把闭包简单理解成“定义在一个函数内部的函数”

var x = 0;
var bar:function () {
        var n = 999;
        return function () {
           return n;
        }
    }
var outer = bar();
outer() // 999

用途:

  1. 读取函数内部的变量
  2. 让这些变量的值始终保持在内存中

我们修改一下上面的代码

var add;
var bar = function () {
        var n = 999;
        add = function () {
            n += 1;
        }
        return function () {
           return n;
        }
    }
var outer = bar();
outer() // 999
add();
outer(); // 1000

说明,n一直保存在内存当中,而没有在bar()执行完成之后被销毁;
原因:
bar里面的匿名函数被赋值给了outer,这个导致在outer没有被销毁的时候,该匿名函数一直存在内存当中,而匿名函数的存在依赖于bar,所以bar需要使用都在内存当中,所以bar并不会在调用结束后呗垃圾回收机制给收回。

而上面的add接受的也是一个匿名函数,该匿名函数本身也是闭包,所以也可以在外部操作里面的变量。

注意点

  1. 会导致内存泄漏,慎用
  2. 闭包会修改内部变量的值,所以在使用闭包作为对象的公用方法时要谨慎。
    闭包的一个应用,单例模式

单例模式的定义是产生一个类的唯一实例

单例模式在js中经常会遇到,比如 var a = {}; 其实就是一个单例子。

但是我们写一个更有意义的单例:

var singleton = function( fn ){
    var result;
    return function(){
        return result || ( result = fn .apply( this, arguments ) );
    }
}

更简洁一点的:

var singleton = (function () {
    var instance;
    return function (object) {
        if(!instance){
            instance = new object();
        }
        return instance;
    }
    })();

原文地址:https://www.cnblogs.com/youngGao/p/8252998.html

时间: 2024-10-30 03:33:09

JavaScript 中 this 是如何工作的 ?的相关文章

JavaScript中timer是如何工作的

作为入门者来说,了解JavaScript中timer的工作方式是很重要的.通常它们的表现行为并不是那么地直观,这是因为它们都处在单线程中.让我们先来看看三个用来出创建和操作timer的函数. var id = setTimeout(fn, delay); 初始化这个timer,然后这个timer将会在delay延时后调用这个函数fn.这个函数将返回一个唯一的ID,可以通过这个ID来取消timer. var id = setInterval(fn, delay); 与setTimeout类似,不过

【译】在JavaScript中{}+{}的结果是什么?

原文链接:What is {} + {} in JavaScript? 最近,Gary Bernhardt在一个名为'Wat'的闪电演讲中提到了一些有趣的JavaScript技巧.当你把一个object和一个object或者和一个数组相加时,会获得意想不到的结果.这篇文章将会对这些结果做解释. 在JavaScript中,对于+的普通规则很简单:你可以把数字和字符串相加,结果将会被转换成他们中的一种类型.为了理解这种类型转换时如何工作的,我首先需要了解一些其他东西.无论何时引用一个段落,它都引自E

JavaScript中this的工作原理以及注意事项

在JavaScript中,this 的概念比较复杂.除了在面向对象编程中,this 还是随处可用的.这篇文章介绍了this 的工作原理,它会造成什么样的问题以及this 的相关例子. 要根据this 所在的位置来理解它,情况大概可以分为3种: 1.在函数中:this 通常是一个隐含的参数. 2.在函数外(顶级作用域中):在浏览器中this 指的是全局对象:在Node.js中指的是模块(module)的导出(exports). 3.传递到eval()中的字符串:如果eval()是被直接调用的,th

[ Javascript ] JavaScript中的定时器(Timer) 是如何工作的!

作为入门者来说,了解JavaScript中timer的工作方式是很重要的.通常它们的表现行为并不是那么地直观,而这是因为它们都处在一个单一线程中.让我们先来看一看三个用来创建以及操作timer的函数. var id = setTimeout(fn, delay); - 初始化一个单一的timer,这个timer将会在一定延时后去调用指定的函数.这个函数(setTimeout)将返回一个唯一的ID,我们可以通过这个ID来取消timer. var id = setInterval(fn, delay

【JavaScript】JavaScript中的Timer是怎么工作的( setTimeout,setInterval)

原文(http://www.yeeyan.org/articles/view/luosheng/24380) 作为入门者来说,了解JavaScript中timer的工作方式是很重要的.通常它们的表现行为并不是那么地直观,而这是因为它们都处在一个单一线程中.让我们先来看一看三个用来创建以及操作timer的函数. var id = setTimeout(fn, delay); - 初始化一个单一的timer,这个timer将会在一定延时后去调用指定的函数.这个函数(setTimeout)将返回一个唯

javascript中闭包的工作原理

一.什么是闭包? 官方”的解释是:闭包是一个拥有许多变量和绑定了这些变量的环境的表达式(通常是一个函数),因而这些变量也是该表达式的一部分.相信很少有人能直接看懂这句话,因为他描述的太学术.其实这句话通俗的来说就是:JavaScript中所有的function都是一个闭包.不过一般来说,嵌套的function所产生的闭包更为强大,也是大部分时候我们所谓的“闭包”.看下面这段代码: 1 2 3 4 5 6 7 function a() { var i = 0; function b() { ale

javascript中的操作符详解1

好久没有写点什么了,根据博主的技术,仍然写一点javascript新手入门文章,接下来我们一起来探讨javascript的操作符. 一.前言 javascript中有许多操作符,但是许多初学者并不理解或曲解他们的用途,本章将会带领初学者们一起来学习一下javascript的几个常用操作符:typeof.in.delete.new. 二.学习目标 1. 深入了解javascript操作符:typeof.in.delete.new的功能及用法. 2. 剖析根本,掌握这些常用的操作符的运用场景,活学活

揭秘JavaScript中谜一样的this

揭秘JavaScript中谜一样的this 在这篇文章里我想阐明JavaScript中的this,希望对你理解this的工作机制有一些帮助.作为JavaScript程序员学习this对于你的发展有很大帮助,可以说利大于弊.这篇文章的灵感来自于我最近的工作——我即将完成的书的最后章节——JavaScript 应用程序设计(JavaScript Application Design)(注意:现在你可以购买早期版本),我写的是关于scope工作原理的方面. 似是而非,这可能是你对this的感觉: 很疯

[译]JavaScript中,{}+{}等于多少?

[译]JavaScript中,{}+{}等于多少? 原文:http://www.2ality.com/2012/01/object-plus-object.html 最近,Gary Bernhardt在一个简短的演讲视频“Wat”中指出了一个有趣的JavaScript怪癖:在把对象和数组混合相加时,会得到一些你意想不到的结果.本篇文章会依次讲解这些计算结果是如何得出的. 在JavaScript中,加法的规则其实很简单,只有两种情况:你只能把数字和数字相加,或者字符串和字符串相加,所有其他类型的值