一直对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. Web大文件上传控件-bug修复-Xproer.HttpUploader6

    1.修复上传文件夹时,文件夹大小可能不正确的问题.这个问题是由于以MD5模式上传时没有更新文件夹总大小导致.   更新fd_complete.aspx   更新DBFile.cs-fd_complet ...

  2. (01背包 当容量特别大的时候) Knapsack problem （fzu 2214）

    http://acm.fzu.edu.cn/problem.php?pid=2214   Problem Description Given a set of n items, each with a ...

  3. NX 8.5 License Server Firewall Setting

    Reference: http://eng-tips.com/viewthread.cfm?qid=284511 The FLEXNet Server(lmgrd) listens to 28000 ...

  4. 《Diagnostic use of facial image analysis software in endocrine and genetic disorders: review, current results and future perspectives》学习笔记

    <使用面部图像分析软件诊断内分泌和遗传疾病:回顾,当前研究结果以及未来展望> Abstract 库欣综合征(CS)和肢端肥大症普遍是在发病后几年才能被诊断出的内分泌疾病.现在需要新的诊断方 ...

  5. 真实世界：使用WCF扩展在方法调用前初始化环境

    OperationInvoker 介绍 OperationInvoker 是 WCF 运行时模型中在调用最终用户代码前的最后一个扩展点,OperationInvoker 负责最终调用 Service ...

  6. Xaml/Xml 实现对象与存储分离

    刚开始用xml存储东西的时候都是不断的在xml文件里面添加或者修改xml的节点,这个是很常见的做法,这方面的博客也很多我也就不介绍了.但其实在小批量存储的时候我们可以直接将对象存进xml/xaml,使 ...

  7. 《JavaScript权威指南》第六版阅读笔记（二）：JavaScript词法结构

    JavaScript使用Unicode字符集.ECMAScript3要求JS的实现必须支持Unicode 2.1及后续版本,ECMAScript 5要求JS的实现支持Unicode 3及后续版本. J ...

  8. nodeJs开发app.js解析

    在 node.js 中模块分为核心模块和文件模块两种,核心模块是通过 require('xxxx') 导入的,文件模块是以 require('/xxxx') 或 require('./xxxx').r ...

  9. Nodejs学习笔记（十）--- 与MongoDB的交互（mongodb/node-mongodb-native）、MongoDB入门

    目录 简介 MongoDB安装(windows) MongoDB基本语法和操作入门(mongo.exe客户端操作) 库操作 插入 查询 修改 删除 存储过程 nodejs操作MongoDB 插入 查询 ...

  10. android mvvm初探

    目前google的databinding library还处在rc版,其中编译器发挥了主要作用.目前也只是在android studio开发环境中支持. mvvm能够大大降低模块间的耦合度,在开发过程 ...