至于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'分别代表神马

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

this,this,再次讨论javascript中的this,超全面的更多相关文章

  1. 再次讨论javascript 中的this

    原文: http://www.jb51.net/article/77519.htm 核心总结: 1.不论函数在哪里被调用,只要没有指定调用方,则this都指向window.指定了调用方,就指向调用方. ...

  2. JavaScript从初见到热恋之深度讨论JavaScript中的面向对象。

    JavaScript中的面向对象.面向对象的三个基本特征:封装.继承.多态. 1.封装 js的封装如下 定义Person类 function Person(name,age,sex) { this.n ...

  3. 再次学习javascript中的參数传递

     javascript中的全部函数的參数传递都是依照值传递的,做了以下測试:    function addTen(num){ num +=10; return num; } var count = ...

  4. 通过代数,数字,欧几里得平面和分形讨论JavaScript中的函数式编程

    本文是对函数式编程范式的系列文章从而拉开了与以下延续一个. 介绍 在JavaScript中,函数只是对象.因此,可以构造函数,作为参数传递,从函数返回或分配给变量.因此,JavaScript具有一流的 ...

  5. 再次理解javascript中的事件

    一.事件流的概念 + 事件流描述的是从页面中接收事件的顺序. 二.事件捕获和事件冒泡 +    事件冒泡接收事件的顺序:

  6. javascript 中加’var‘和不加&#39;var&#39;的区别,你真的懂吗?

    没看之前千万别说我是标题党,这个问题真的有好多淫都不懂!!! 大家都看了很多文章,都说避免隐式声明全局变量,就是说声明变量前必须加'var',那加了'var'和不加'var'到底有啥区别呢? 先来看一 ...

  7. javascript中加var和不加var的区别

    Javascript是遵循ECMAScript标准下的一个产物,自然ECMAScript的标准其要遵循. 先来看下var关键字的定义和用法 var 语句用于声明变量. JavaScript 变量的创建 ...

  8. JavaScript中的内存泄漏以及如何处理

    随着现在的编程语言功能越来越成熟.复杂,内存管理也容易被大家忽略.本文将会讨论JavaScript中的内存泄漏以及如何处理,方便大家在使用JavaScript编码时,更好的应对内存泄漏带来的问题. 概 ...

  9. javascript中的Array对象 —— 数组的合并、转换、迭代、排序、堆栈

    Array 是javascript中经常用到的数据类型.javascript 的数组其他语言中数组的最大的区别是其每个数组项都可以保存任何类型的数据.本文主要讨论javascript中数组的声明.转换 ...

随机推荐

  1. UWP学习记录2-设计和UI之布局

    UWP学习记录2-设计和UI之布局 1.导航基础知识 应用里,多个页面会有层次关系或者对等关系.这两种关系,通常在一个复杂应用里都会存在,而关系的选定依据: 对于对等导航,一般用选项卡(tabs)或者 ...

  2. 由ASP.NET所谓前台调用后台、后台调用前台想到HTTP——理论篇

    工作两年多了,我会经常尝试给公司小伙伴儿们解决一些问题,几个月下来我发现初入公司的小朋友最爱问的问题就三个 1. 我想前台调用后台的XXX方法怎么弄啊? 2. 我想后台调用前台的XXX JavaScr ...

  3. WWF3入门&lt;第一篇&gt;

    工作流是什么东西?暂时还不是很弄得清除. 工作流是用来解决什么问题的?暂时只是形成了一个很模糊的概念,还没办法用语言描述出来. 一.入门范例 以VS2008为例,先来创建一个WWF程序. 在工具箱中, ...

  4. ubuntu13.04 Thinkpad W520安装nvidia显卡驱动

    Ubuntu13.04 amd64 Thinkpad W520安装Nvidia显卡驱动 曾经在ubuntu11.10上成功安装Nvidia显卡驱动.但是自从机器(Thinkpad W520)更新到13 ...

  5. 安卓webview下使用zepto的swipe失效

    安卓webview下使用zepto的swipe遇到的坑 众所周知,安卓手机上touch事件一直有各种各样莫名其妙的问题. 比如,我想要用swipeLeft/swipeRight监听向左向右滑动事件,如 ...

  6. 同一台电脑使用 gitlab 和 github 配置

    Git 客户端与服务器端的通信支持多种协议,ssh 最常用.ssh的公钥登录流程,用户将自己的公钥存储在远程主机,登录时,远程主机会向用户发送一条消息,用户用自己的私钥加密后,再发给服务器.远程主机用 ...

  7. 【算法】Attention is all you need

    Transformer 最近看了Attention Is All You Need这篇经典论文.论文里有很多地方描述都很模糊,后来是看了参考文献里其他人的源码分析文章才算是打通整个流程.记录一下. T ...

  8. Ubuntu下编译SqlCipher以及解密微信数据库EnMicroMsg.db过程和坑

    wget https://codeload.github.com/sqlcipher/sqlcipher/zip/v3.4.2 ./configure --enable-tempstore=yes C ...

  9. 使用shiro框架,注销问题的解决

    在使用shiro框架的时候,有时候会因为登录问题找不到注销的controller.所以会报404的错误,下面是解决办法: 1.首先写一个类SystemLogoutFilter继承LogoutFilte ...

  10. 带你从零学ReactNative开发跨平台App开发(一)

    ReactNative跨平台开发系列教程: 带你从零学ReactNative开发跨平台App开发(一) 带你从零学ReactNative开发跨平台App开发(二) 带你从零学ReactNative开发 ...