突然顿悟的Javascript中的this

  一直对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的时候,绑定事件的时候遇到的坑,那时候只知道这么写,不知道怎么回事,今天突然感觉豁然开朗。希望对大家有所帮助。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏java、Spring、技术分享

深入分析Spring Formatter

  在Web项目中,通常需要将数据转换为具有某种格式的字符串进行展示,因此Spring3引入了格式化转换器(Formatter SPI) 和格式化服务API(F...

733
来自专栏技术之路

设计模式:装饰者模式

  装饰者模式么,在生活中我们是经常接触的。比如像我们这么快节奏的生活,好多都是早上去买煎饼。一般我们会这么说:“来一个粗粮煎饼,加两个鸡蛋,加一根肠” 或者:...

1958
来自专栏tkokof 的技术,小趣及杂念

iTween 那些事儿(一)

  工作中用了不少时间的iTween,自己算是有些小小心得,在此随便写写,算作总结吧 :)

342
来自专栏葡萄城控件技术团队

深入浅出OOP(一): 多态和继承(早期绑定/编译时多态)

在本系列中,我们以CodeProject上比较火的OOP系列博客为主,进行OOP深入浅出展现。 无论作为软件设计的高手、或者菜鸟,对于架构设计而言,均需要多次重...

1906
来自专栏恰同学骚年

数据结构基础温故-1.线性表(下)

在上一篇中,我们了解了单链表与双链表,本次将单链表中终端结点的指针端由空指针改为指向头结点,就使整个单链表形成一个环,这种头尾相接的单链表称为单循环链表,简称循...

652
来自专栏林德熙的博客

C# Find vs FirstOrDefault

需要知道,两个方法都是 Linq 的方法,使用之前需要引用 Linq 。对于 List 等都是继承可枚举Enumerable这时获取第一个元素可以使用First...

221
来自专栏前端小叙

js与ios桥接使用WebViewJavascriptBridge简单理解

https://github.com/marcuswestin/WebViewJavascriptBridge function setupWebViewJav...

3065
来自专栏偏前端工程师的驿站

JS魔法堂:剖析源码理解Promises/A规范

一、前言                                 Promises/A是由CommonJS组织制定的异步模式编程规范,有不少库已根据该规...

20810
来自专栏IT派

Python3.7中一种懒加载的方式

Python3.7在模块上也添加了__getattr__()和__dir__()两个方法。这个新特性让我们能够实现一些有趣的事情。例如,通过定义__dir__方...

900
来自专栏IMWeb前端团队

word-break 和 word-wrap 的区别

本文主要要介绍的是 CSS 中 word-break: break-all 和 word-wrap: break-word 的区别,虽然这两个属性都有使用过,但...

1917

扫描关注云+社区