• 了解javascript中的this --实例篇


    对javascript this的赋值有了深一层的理解后,看一下比较复杂的情况,this的应用篇参考《对javascript this的理解》.

    #demo1

     1 var name="window";
     2 var object = {
     3     name:"me",
     4     getname:(function(){
     5        alert(this.name);//window,加载即执行
     6         return function(){
     7             return this.name;
     8         }
     9     })()
    10 }
    11 alert(object.getname());// window  me

    首先getname 属性指向的值是一个自执行方法,为了方便,我们称它为AutoExeFun,首先激活AutoExeFun,并且进入到AutoExeFun的执行上下文AutoExeFunContext,并把AutoExeFunContext压入执行堆栈,可以很清楚的看到,AutoExeFun既不是标识符,也不属于属性访问器,所以  line 5 的 this指针为全局的global, 执行完之后返回function(){return this.name},然后由object.getname()调用,属于属性访问器访问,line7的this则为object

    #demo2

     1 var name="window";
     2 var object = {
     3     name:"me",
     4     getname:(function(){
     5         var that=this;
     6         return function(){
     7             return that.name;
     8         }
     9     })()
    10 }
    11 alert(object.getname());//window

    #demo2和#demo1的区别在于line5 中 定义了that作为自执行function中this的引用,由demo1分析可见,line5中的this指向全局对象,在return 的function中,用到了that局部变量,由于外部可能会调用,所以即使退出自执行function的上下文,依然会保持对that的引用,具体可参考《关于javascript中的闭包》 ,所以执行结果为window

    #demo3

     1 var name="window";
     2 var object = {
     3     name:"me",
     4     getname:function(){
     5         var that=this;
     6         return function(){
     7             return that.name;
     8         }
     9     }
    10 }
    11 alert(object.getname()());//me

    #demo3的执行分为两部分,第一部分object.getname(),标记为Section A, 很明显A部分function的调用 属于属性访问器类型,所以解析成对象引用后,会把base->object,同时this->base,即line5的this和that都是指object,Section B 部分, 同时由于闭包保持了对that的引用,在SectionB的执行上下文中,that依然指向object

    以上是几个关于this指针的demo,除全局的this外,function中this指针的赋值操作发生在function被调用的时候,即进入function所在的执行上下文期间。

    贴上一段关于context的伪代码描述,参考文章为 what-is-the-execution-context-in-javascript

    executionContextObj = {
        scopeChain: { /* variableObject + all parent execution context's variableObject */ },
        variableObject: { /* function arguments / parameters, inner variable and function declarations */ },
        this: {}
    }

    具体关于执行上下文的理解可参考 《关于javascript中的 执行上下文》

  • 相关阅读:
    官方下载python源码,编译linux版本的python
    bootstrap冻结窗口
    LeetCode之TwoSum
    MyISAM和InnoDB索引实现对比(总结)
    InnoDB的三个关键特性(总结)
    InnoDB与MyISAM总结和对比(总结)
    C++类库开发之导出类设计原则
    C++类库开发详解
    C#各种配置文件使用,操作方法总结
    C/C++代码优化的27条建议
  • 原文地址:https://www.cnblogs.com/teamobaby/p/3845426.html
Copyright © 2020-2023  润新知