一直对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. Round函数

    Round():函数返回一个数值,舍入到指定的长度或精度 eg: --1) ) ---->123.9990 ) ---->124.0000 --3为需要舍入的位数 --2) ) ----- ...

  2. 业务代码中(java class)中如何实现多线程，并且将子线程中的值随方法返回返回值

    转载自http://bbs.csdn.net/topics/390731832 问题: public static String getAddress(final InputStream inputS ...

  3. java图形化编程

    转载 学习Java Swing图形化编程,我们首先要了解三个最基本的概念:顶层容器,控件,布局. 下面就来介绍一下这三个基本概念 1.顶层容器 什么是顶层容器?当我们使用Java进行图形编程的时候,图 ...

  4. Windows 8.1 应用再出发 - 几种布局控件

    本篇为大家介绍Windows 商店应用中几种布局控件的用法.分别是Canvas.Grid.StackPanel 和 VariableSizedWrapGrid. 1. Canvas Canvas使用绝 ...

  5. php笔试题（1）--转载

    一份不错的php面试题,附答案,有准备换工作的同学可以参考一下.一.基础题1. 写出如下程序的输出结果 <?php     $str1 = null;     $str2 = false;    ...

  6. csc一些命令简记

    C#在命令行进行编译的一些命令: csc使用详解 @echo off cd / cd C:\Program Files (x86)\MSBuild\12.0\Bin set /p var= 请输入文件 ...

  7. [Xamarin] 調用JSON.net 來解析JSON (转帖)

    上一篇文章我們提到了透過WebClient從Facebook 拿到我的JSON資料 再來我們要怎麼解析JSON格示呢?在.net 中,我們很孰悉的JSON.net,沒錯,我們依然可以在Xamarin中 ...

  8. 【Win10】UAP/UWP (通用程序) 开发初体验(1) 之 开发准备

    一.准备: 1.准备一个 10074或更高版本的Win10.可以通过 https://insider.windows.com/ 地址,加入Windows 的会员俱乐部免费获取的. 2.下载Visual ...

  9. 在Linux CentOS上编译CoreCLR

    经过几天的努力,终于解决了在CentOS上编译CoreCLR的问题.最终发现问题是CMAKE_C_FLAGS的设置引起的. 只要在“src/pal/tools/clang-compiler-overr ...

  10. 设计模式之美：Builder（生成器）

    索引 意图 结构 参与者 适用性 效果 相关模式 实现 实现方式(一):Builder 为每个构件定义一个操作. 实现方式(二):Builder 将构件返回给 Director,Director 将构 ...