一直对Javascript中的this都有一种似是而非的感觉，今天突然感觉豁然开朗，特此记录一下。

咱们先看个栗子：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>this的使用</title>

        <script type="text/javascript">

            var Car,tesla;

            Car=function  () {

                this.start=function(){

                    console.log('car started');

                };

                this.turnKye=function () {

                    var carKey=document.getElementById('car_key');

                    carKey.onclick=function () {

                    this.start();

                    };

                }

                return this;

            }

            tesla=new Car();

            tesla.turnKye();

        </script>

    </head>

    <body>

      <input type="button" id="car_key" value="test" />

    </body>

</html>

咋一看这段代码没有什么问题，但是由于对于this的错误理解最终导致错误的结果。我们在元素car_key上面绑定了click事件，认为在car的类中嵌套绑定click事件就可以让这个dom元素访问car的this上下文。这种方式看起来很合理，但是不幸的是它并不工作。

在Javascript中，this关键字总是指向正执行的作用域的所有者。

　　请大家仔细揣摩上面那句话。正如我们所知，函数调用会产生新的作用域，一点onclick事件被触发，this就指向了dom元素而不是Car的类。

　　那我们怎么做才会让它能正常工作呢？我们通常会把this赋值给一个局部的自由变量(比如that,_this,self,me等，这个在许多的框架里面都有体现）来避开作用域带来的问题。这里使用局部变量来重写之前的方法：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>this的使用</title>

    </head>

    <body>

      <input type="button" id="car_key" value="test" />

        <script type="text/javascript">

            var Car,tesla;

            Car=function  () {

                this.start=function(){

                    console.log('car started');

                };

                this.turnKye=function () {

                    var that=this;

                    var carKey=document.getElementById('car_key');

                    carKey.onclick=function () {

                      that.start();

                    };

                }

                return this;

            }

            tesla=new Car();

            tesla.turnKye();

        </script>

    </body>

</html>

　　由于that是一个自由变量，onclick事件的出发并不会引起它的重新定义。

　 如果你熟悉ES6的话可以使用胖箭头符号，这更简洁和更容易理解，如下：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>this的使用</title>

    </head>

    <body>

      <input type="button" id="car_key" value="test" />

        <script type="text/javascript">

            var Car,tesla;

            Car=function  () {

                this.start=function(){

                    console.log('car started');

                };

                this.turnKye=function () {

                    //var that=this;

                    var carKey=document.getElementById('car_key');

                    //carKey.onclick=function () {

                     // that.start();

                    //};

                    carKey.onclick=()=>this.start();

                }

                return this;

            }

            tesla=new Car();

            tesla.turnKye();

        </script>

    </body>

</html>

当然我们也可以使用绑定函数的方法来解决这个问题：如下

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>this的使用</title>

    </head>

    <body>

      <input type="button" id="car_key" value="test" />

        <script type="text/javascript">

            var Car,tesla;

            Car=function  () {

                this.start=function(){

                    console.log('car started');

                };

                var click=function(){

                    this.start();

                }

                this.turnKye=function () {

                    //var that=this;

                    var carKey=document.getElementById('car_key');

                    carKey.onclick=click.bind(this);

                }

                return this;

            }

            tesla=new Car();

            tesla.turnKye();

        </script>

    </body>

</html>

其实这些在学习React的时候，绑定事件的时候遇到的坑，那时候只知道这么写，不知道怎么回事，今天突然感觉豁然开朗。希望对大家有所帮助。

突然顿悟的Javascript中的this的更多相关文章

  1. javascript中的原型和继承

    javascript一直是初学者口中的难点,甚至一些有些许工作经验的人也不太明白其中的原理,而我就是那个初学者,前段时间在阮一峰老师的博客上看了一篇文章<javascript继承机制的设计思想& ...

  2. javascript中值传递与值引用的研究

    今天重新看了一下<javascript高级程序设计>,其中讲到了javascript中的值传递和值引用,所以就自己研读了一下,但是刚开始没有明白函数中的参数只有值传递,有的场景好像参数是以 ...

  3. 快速入门上手JavaScript中的Promise

    当我还是一个小白的时候,我翻了很多关于Promise介绍的文档,我一直没能理解所谓解决异步操作的痛点是什么意思 直到我翻了谷歌第一页的所有中文文档我才有所顿悟,其实从他的英文字面意思理解最为简单粗暴 ...

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

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

  5. javascript中的this与函数讲解

    前言 javascript中没有块级作用域(es6以前),javascript中作用域分为函数作用域和全局作用域.并且,大家可以认为全局作用域其实就是Window函数的函数作用域,我们编写的js代码, ...

  6. JavaScript 中的数据类型

    Javascript中的数据类型有以下几种情况: 基本类型:string,number,boolean 特殊类型:undefined,null 引用类型:Object,Function,Date,Ar ...

  7. javascript中的操作符详解1

    好久没有写点什么了,根据博主的技术,仍然写一点javascript新手入门文章,接下来我们一起来探讨javascript的操作符. 一.前言 javascript中有许多操作符,但是许多初学者并不理解 ...

  8. 掌握javascript中的最基础数据结构-----数组

    这是一篇<数据结构与算法javascript描述>的读书笔记.主要梳理了关于数组的知识.部分内容及源码来自原作. 书中第一章介绍了如何配置javascript运行环境:javascript ...

  9. javascript中变量提升的理解

    网上找了两个经典的例子 var foo = 1; function bar() { if (!foo) { var foo = 10; } alert(foo); } bar(); // 10 var ...

随机推荐

  1. 推荐一个C语言学习教程

    Linux C编程一站式学习 http://learn.akae.cn/media/index.html

  2. 5.4 String

    JAVA 中为什么String 是immutable的? 1.设计:当创建一个String(String str2 = "abc"), 如果它(原先有一个String str = ...

  3. Android--Notification

    1.通知(Notification)是应用程序没有运行在前台时可以向用户发出一些提示消息的功能,发出通知后,手机状态栏会显示通知,用户可以通过下拉状态栏来查看和操作通知: 2.Notification ...

  4. 十六进制转十进制函数_C编程

    /**************************十六进制转十进制函数**************************//*函数原型:uint htd(uint a)/*函数功能:十六进制转十 ...

  5. 分享一下SQLSERVER技术交流QQ群里的群共享资源

    分享一下SQLSERVER技术交流QQ群里的群共享资源 SQLSERVER技术交流QQ群已经开了一段时间了,人数已经有了100多号人, 而群里面很多SQLSERVER爱好者上传了他们宝贵的SQLSER ...

  6. ASP.NET MVC 下拉列表使用小结

    ASP.NET MVC中下拉列表的用法很简单,也很方便,具体来说,主要是页面上支持两种Html帮助类的方法:DropDownList()和DropDownListFor().这篇博文主要作为个人的一个 ...

  7. Visual Studio 2013 新功能 Memory Dump 分析器

    本文为 Dennis Gao 原创技术文章,发表于博客园博客,未经作者本人允许禁止任何形式的转载. TechEd2013 发现新功能 12月5日和6日,在国家会议中心参加了微软的 TechEd2013 ...

  8. 创建Fragment

    你可以认为fragment是Activity中模块化的部分.Fragment有它自己的生命周期,接收它自己的输入事件,并且你可以在Activity运行的时候添加或移除它(有点像可以被重用在不同Acti ...

  9. VirtualBox安装Ubuntu教程

    1.VirtualBox虚拟机安装,及VirtualBox安装Ubuntu教程VirtualBox版本为VirtualBox-4.3.12-93733-Win.exe,Ubuntu版本为ubuntu- ...

  10. servlet servlet请求与响应

    request 客户端浏览器发出的请求被封装成一个HttpServletRequest对象.所有的信息包括请求的地址,请求的参数,提交的数据,上传的文件,客户端的Ip地址甚至客户端操作系统都包含在Ht ...