一直对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. 利用RBAC模型实现一个通用的权限管理系统

    本文主要描述一个通用的权限系统实现思路与过程.也是对此次制作权限管理模块的总结. 制作此系统的初衷是为了让这个权限系统得以“通用”.就是生产一个web系统通过调用这个权限系统(生成的dll文件), 就 ...

  2. 今天开始着手原来Office系统的重构

    原来系统架构Spring+Hibernate+Struts+springsecurity 拟改成 Spring+SpringMVC+MyBatis/JDBC+Shiro 同时优化前端的CSS和JQue ...

  3. 【细说Java】path和classpath的作用

    path:javac.exe和java.exe等可执行文件存放路径,通过path变量让系统寻找该路径的可执行文件,然后对Java代码进行编译和运行. ps:如果有多个jdk版本的赋给path变量,系统 ...

  4. 我的复杂的OpenCV编译之路（OpenCV3.1.0 + VS2010 + Win7）

    教程:www.cnblogs.com/jliangqiu2016/p/5597501.html 这里主要记载我编译遇到的错误及解决方法. OpenCV3.1软件下载:https://sourcefor ...

  5. web标准：img图片在ie6下显示空白的bug解决方案

    在进行页面的DIV+CSS排版时,遇到IE6(当然有时Firefox下也会偶遇)浏览器中的图片元素img下出现多余空白的问题绝对是常见的对于该问题的解决方法也是“见机行事”. 1.将图片转换为块级对象 ...

  6. Unity3D研究院之使用Animation编辑器编辑动画（五十四）

     Unity提供了Animation编辑器,它可以为我们编辑物理动画.举个例子比如场景中有一个来回摇动的秋千,这个秋千在项目中完全只起到衬托作用,它不会与别的游戏对象有任何交互.如果这个秋千也用代码来 ...

  7. 【基础知识】.Net基础加强09天

    委托: 1. 委托是一种数据类型,像类一样{可以声明委托变量类型} 2. deleate关键字定义委托 : public delegate void MethodDelegate();//这就是定义了 ...

  8. C#的泛型委托与闭包函数

    前些天Wendy问我说Func<T, ResultT>是个什么意思,初学C#都觉得这样的写法很奇葩,甚至觉得这样写有点诡异,其实以我来看,这是体现C#函数式编程的又一个亮点. 从MSDN上 ...

  9. Android开发笔记

    Android 中国SDK: http://wear.techbrood.com/ Android SDK Manager 代理设置: http://www.cnblogs.com/sunzn/p/4 ...

  10. C++11 并发指南六( <atomic> 类型详解二 std::atomic )

    C++11 并发指南六(atomic 类型详解一 atomic_flag 介绍)  一文介绍了 C++11 中最简单的原子类型 std::atomic_flag,但是 std::atomic_flag ...