zoukankan      html  css  js  c++  java
  • 看了Tomxu 的文章,特写下一个他的一个js程序的执行过程。

    看了Tomxu 的文章,特写下一个他的一个js程序的执行过程。

    function ConcreteClass(){
        this.performTask=function(){
            console.log(this)
            this.preTask();
            console.log('一些代码');
            this.postTask();
        }
    }
    ConcreteClass.prototype.add=function(){console.log('测试使用。')}
    function AbstractDecorator(decorated){//抽象类 Abstract
        this.performTask=function(){
            decorated.performTask();
        }
    }
    function ConcreteDecoratorClass(decorated){
        this.base=AbstractDecorator;
        this.base(decorated);
        decorated.preTask=function(){
            console.log('pre-calling...');
        }
        decorated.postTask=function(){
            console.log('post-calling...');
        }
    }

    var c1=new ConcreteClass();
    var d1=new ConcreteDecoratorClass(c1);
    d1.performTask();
    var c2=new ConcreteClass();

    //新添加,以上为Tom大叔的代码

    c2.preTask();// TypeError: c2.preTask is not a function
    var d2=new ConcreteDecoratorClass();
    d2.performTask();//TypeError: decorated is undefined

    上面程序执行过程如下:
    1.载入后,分别注册3个函数ConcreteClass、AbstractDecorator、ConcreteDecoratorClass,但不执行内部方法
    2.var c1=new ConcreteClass();执行至此时,跳到ConcreteClass函数内部,进行属性或方法的添加,添加performTask方法,但不执行
    3.var d1=new ConcreteDecoratorClass(c1);执行至此时:
        A:跳到ConcreteClass函数内部,添加base属性,this.base=AbstractDecorator;
            this.base=function AbstractDecorator(decorated){//抽象类 Abstract
                            this.performTask=function(){
                                decorated.performTask();
                            }
            }
            接着顺序执行decorated.preTask、decorated.postTask 为c1对象实例添加了这2个方法          
        B:this.base(decorated);变为AbstractDecorator(c1),并立即执行,跳转至函数AbstractDecorator(decorated)中,
            它里面的this代表ConcreteDecoratorClass【当前作用域】,添加属性performTask,且
            this.performTask=function(){
                c1.performTask();
            }
            即对象实例d1拥有了performTask属性而不是构造函数ConcreteDecoratorClass的属性
        C:c2.preTask();执行至此时,在对象实例中开始查找preTask()方法并执行
         查找过程:从ConcreteClass构造函数中查找,当走到this.base(decorated);时,查找到了:
             this.performTask=function(){
                c1.performTask();
            }
        故this.performTask()至c1.performTask();,故c2.preTask()变成c1.performTask(),至此执行c1内部的‘
            this.preTask();
            console.log('一些代码');
            this.postTask();
    以上执行完毕。


    var c2=new ConcreteClass();
    c2.preTask();// TypeError: c2.preTask is not a function
    var d2=new ConcreteDecoratorClass();
    d2.performTask();//TypeError: decorated is undefined
    对于这2个是为了查看ConcreteClass中和ConcreteDecoratorClass
  • 相关阅读:
    Vim 使用设置
    stm32之CAN发送、接收详解
    stm32内部的CAN总线
    stm32之CAN总线基础
    JavaScript之Ajax
    JavaScript之insertBefore()和自定义insertAfter()的用法。
    JavaScript之向文档中添加元素和内容的方法
    JavaScript之共享onload
    JavaScrtip之JS最佳实践
    XX秘籍
  • 原文地址:https://www.cnblogs.com/yuzhongwusan/p/2685284.html
Copyright © 2011-2022 走看看