突然顿悟的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 条评论
登录 后参与评论

相关文章

来自专栏腾讯NEXT学位

这些 CSS 命名规范将省下你大把调试时间(文末有福利)

443100
来自专栏林德熙的博客

WPF 使用 Direct2D1 画图 绘制基本图形

在开始前先告诉大家为何需要使用 Direct2D ,虽然 WPF 也是基于 DX 进行渲染,但是 WPF 做了很多兼容处理,所以没有比直接使用 Direct2D...

24010
来自专栏章鱼的慢慢技术路

Go指南练习_切片

19030
来自专栏小筱月

分享:Java 开发精美艺术二维码

看到网络上各种各样的二维码层出不穷,好像很炫酷的样子,一时兴起,我也要制作这种炫酷二维码效果

17130
来自专栏mathor

事件模型

 事件模型如何理解呢,举个例子,你老婆出门了,让你在家看孩子,难道你每过一分钟就去看一次孩子吗,对于计算机来说,我做一个按钮,难道就一直监听这个按钮使用没有...

10710
来自专栏数据结构与算法

P1903 【模板】分块/带修改莫队(数颜色)

题目描述 墨墨购买了一套N支彩色画笔(其中有些颜色可能相同),摆成一排,你需要回答墨墨的提问。墨墨会像你发布如下指令: 1、 Q L R代表询问你从第L支画笔到...

356100
来自专栏云瓣

从 0 到 1 实现 React 系列 —— 5.PureComponent 实现 && HOC 探幽

本系列文章在实现一个 cpreact 的同时帮助大家理顺 React 框架的核心内容(JSX/虚拟DOM/组件/生命周期/diff算法/setState/Pur...

10010
来自专栏好好学java的技术栈

特别的520,送给特别的你们,还不来看看?

12920
来自专栏deepcc

emmet(Zen coding)前端写代码神器

39470
来自专栏阿凯的Excel

自定义单元格格式介绍(第二期 文本版)

上期和大家分享了自定义条件格式的数字版。本期继续和大家分享文本的自定义单元格格式! 继续强调啰嗦两件事情!!! 1、自定义单元格格式只改变显示内容,不改变实...

29860

扫码关注云+社区

领取腾讯云代金券