zoukankan      html  css  js  c++  java
  • javascript之观码说理

    前一阶段看到大神在网上贴出的测试个人js理解的代码。

    在此我在此借用大神的代码,进行自我复述,大神文章参见:http://www.imooc.com/article/1731

    代码1:

    function foo(){
        console.log(this.a);
    }
    function doFoo(fn){
        fn();
    }
    function doFoo2(o){
        o.foo();
    }
    var obj = {
        a: 2,
        foo: foo
    };
    var a = "I'm an a";
    doFoo(obj.foo);
    doFoo2(obj);


     

    我的理解:

    先说doFoo(obj.foo)

    传入的参数obj.foo即对象obj的元素foo,内容为foo。

    此时传入的foo在方法doFoo中就变成了调用foo()方法。

    因为foo()是定义在最外层的,此时的this指向最外层对象window,所以取得的a应该是在最外层定义的 var a = "I'm an a";

    所以第一个方法返回的是I'm an a。

    其次说doFoo2(obj)

    传入的参数是obj对象.

    此时在doFoo2中调用的是obj.foo()。

    这时foo()方法中的this重新指向了obj对象,所以this.a取得的是obj对象中的a。

    所以第二个方法返回的是2.

    大神的分析:

    在Javascript中,this指向函数 执行时的当前对象,而非声明环境有
    执行doFoo的时候执行环境就是doFoo函数,执行环境为全局。
    执行doFoo2时是在对象内部调用函数,this指针指向该对象。

    代码2:

    function foo(somthing){
        console.log(this.a, somthing);
    }
    function bind(fn, obj){
        return function(){
            return fn.apply(obj, arguments);
        }
    }
    var obj = {
        a:2
    }
    var bar = bind(foo, obj);
    var b = bar(3);
    console.log(b);


    第二段代码,再次先说我自己的理解:

    结论先行:这里展示apply的作用-修改方法作用的对象,也可以说是修改this的指向

    解释:

     原本在foo函数的定义中,this指向的是全局对象,而在函数bind中,利用apply,bind将this指向了obj,即fn方法实际作用在obj上了。

    之后的代码便是定义一个obj对象直接量,然后将利用bind方法将foo方法的作用对象指向了obj,最后再通过定义的bar传入参数"3"。

    也就是说,在最后bar(3)执行的时候,调用的方法foo作用于对象obj上(这里的obj指的是已经定义的对象直接量),所以方法执行的是下面的内容:

    console.log(obj.a,3);

    而obj的a是2,所以输出的内容是2 3。

    再次看大神的分析,发现自己漏掉了最后方法没有返回参数,所以还会返回一个undefined。

    贴上大神的分析:

    apply、call、bind都有个作用就是改变作用域,这里用apply将foo函数的作用域指向obj对象,同时传入参数。
    再简单分析一下bind函数内部的嵌套,执行bind函数的时候返回的是一个匿名函数,所以执行bar(3)的时候实际上是执行的bind内部的匿名函数,返回的是之前传入的foo函数的执行结果。
    函数没有返回值的情况下默认返回undefined。

    代码3:

    function foo(a,b){
        this.val = a+b;
    }
    var bar = foo.bind(null, 'p1');
    var baz = new bar('p2');
    console.log(baz.val);

    未完待续

  • 相关阅读:
    支付扣款 并发 异步
    Floyd-Warshall算法
    black arch
    ChromeDriver only supports characters in the BMP
    Getting console.log output with Selenium Python API bindings
    微信公众号文章批量采集系统的构建
    node npm Bower
    PyPy CPython C++ connects programs written in C and C++ with a variety of high-level programming languages
    timeout connect 10000 # default 10 second time out if a backend is not found
    timeout connect 10000 # default 10 second time out if a backend is not found
  • 原文地址:https://www.cnblogs.com/zjtTT/p/4914055.html
Copyright © 2011-2022 走看看