zoukankan      html  css  js  c++  java
  • this,this,再次讨论javascript中的this,超全面

    至于js中this这个东西,好多淫解释过了,看起来好高端的样子,不造你看懂了木有?

    先引用比较高端的,“汤姆大叔“ 的, yes this  

    好了,下面加上鄙人比较挫的解释

    论点: this 不是变量,不是属性,不能为其赋值,它始终指向调用它的对象

    感觉还TM太虚了,只要记住最重要的一条即可 ”它始终指向调用它的对象“ ,所以找到调用this的对象,就知道this到底指向谁了

    1、

    alert(this);
    

    瞅瞅,弹出来的是么子,要么是”object window“ ,要么 "object" 总之就对象了,是那个对象呢?

    alert(this === window);

    结果为'true' 所以了,现在调用它的对象是window了

    2、

    var test = function(){
            alert(this);
    }
    test();

    猜猜上面弹出什么,是不是和"alert(this)" 这句一样的

    var test = function(){
            alert(this === window);
        }
    
    test();

    运行上面的代码,是不是弹出了'true' ?

    事情就这样完了?

    要这么简单的话,何必那么多人都去论述这个鸟了?

    3、

    再来

    var test = function(){
            alert(this === window);
        }
    
    new test();

    哎哎,这次咋成'false'呢?

    记住”this 始终指向调用它的对象“,第”1、“处调用该段代码的直接对象是全局对象,即"window" ;第”2、“处虽然是函数,但是调用其的仍然是”window“(不要弄混了,函数虽然是对象,但是调用它的是另一个对象);第”3、“处,使用了”new“ 这时其实已经发生变化了,这是一个构造函数,构造函数创建时创建了一个新的空的对象,即”new test()“创建了一个新的对象,然后再由这个对象指向函数"test"中的代码,因此此时this不在是window对象,而是该构造函数创建的新对象。

    4、

    var test ={
            'a':1,
            'b':function(){
                alert(this === test)
            }
        }
    
    test.b();

    有了上面的论点,这下一下子清楚了吧!

    5、

    var test ={
            'a':1,
            'b':function(){
                alert(this === test)
            }
        }
    
    var test1 = test;
    test1.b();

    so, 你不会认为结果为"false"吧,错了,虽然'test1'的值为'test'  但是'test1'不还是'test'对象么,它有新产生对象,你暂且理解为引用的了,两个都指向一个对象,奉上下面一段代码为证

    var test ={
            'a':1,
            'b':function(){
                alert(this === test)
            }
        }
    
    var test1 = test;
    test.a = 2;
    alert(test1.a);

    如果弹出了”1“,你来骂我

    6、再整个复杂的

    var test ={
            'a':1,
            'b':{
                'b1':function(){
                    alert(this === test);
                }
            }
        }
    test.b.b1();

    这是"true"还是"false"呢?

    按照上面的理论,这时"this"不再直接被'test'调用了,而是被'test.b' 调用, 奉上下面一段代码为证

    var test ={
            'a':1,
            'b':{
                'b1':function(){
                    alert(this === test.b);
                }
            }
        }
    test.b.b1();

    7、好再整个复杂点的

    var test = function(){
            var innerTest = function(){
                alert(this === test);
            }
            innerTest();
        }
    test();

    你不会认为弹出"true"吧,不是按照上面的理论'innerTest'是被'test'调用的,然后'this'就指向'test'吗?

    额,错就错在是谁调用的'innerTest', 其实这种函数都是'window'对象调用的,及时你嵌套一千层,调用各个函数的都是'window'对象,奉上下面这段代码为证

    var test = function(){
            var innerTest = function(){
                alert(this === window);
    
                var innerTest1 = function(){
                    alert(this === window);
                }
                innerTest1();
            }
            innerTest();
        }
    test();

    8、再来一段特殊的

    var test = function(){
            alert(this === window);
        }
    var test1 = {
    }
    test.apply(test1);

    这个我觉得大家都不会猜错,该函数的作用就是”调用一个对象的一个方法,以另一个对象替换当前对象“ 所以了'window' 对象已经被替代为'test1',自然为'false'了,奉上如下代码以为证明

    var test = function(){
            alert(this === test1);
        }
        var test1 = {
            }
    test.apply(test1);    

    那么诸如'call'之类的也就相似了

    9、再来一个原型的继承,区别于字面量的继承

    var test = function(){
        }
    
        var my = function(){
            this.a = function(){
                alert(this === mytest2);
            }
        }
    
        var mytest = new my();
        test.prototype = mytest;
        var mytest2 = new test();
        mytest2.a();

    10、还剩下些什么了,可能就是'dom'对象了

    <script>
            var mytest = function(context){
                alert(context.getAttribute('id'));
                alert(this === window);
            }
        </script>
        <div id="test" onclick="mytest(this)">aaaa</div>

    看了上面的应该了解了吧,里面的'this'分别代表神马

    好了,鄙人才疏学浅,目前就造这点,有不足之处,欢迎补足!

  • 相关阅读:
    JS的构造函数
    Wdcp在安装memcached出现错误的解决办法
    mac 下 xampp 多域名 多站点 多虚拟主机 配置
    JS快速获取图片宽高的方法
    全文检索引擎Solr系列——整合MySQL、MongoDB
    php:获取浏览器的版本信息
    css3 media媒体查询器用法总结
    转:利用node压缩、合并js,css,图片
    火车进站
    三角形有向面积
  • 原文地址:https://www.cnblogs.com/painsOnline/p/5102359.html
Copyright © 2011-2022 走看看