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

相关文章

来自专栏吴裕超

CSS 换行问题white-space属性 window对象和global对象

white-space: nowrap禁止换行 1、word-wrap:break-word; 内容将在边界内换行,仅用于块对象,内联对象要用的话,必须要设定h...

1843
来自专栏liuchengxu

Vim 文本对象指南 (2)

接 Vim 文本对象 (1), 关于插件使用, 可以查看完整配置 space-vim.

412
来自专栏申龙斌的程序人生

零基础学编程018:条件语句

学习了《零基础学编程017:画出我的公众号LOGO》之后,可以用几行代码,画出一个螺旋渐开线。 from turtle import * for i in r...

3256
来自专栏python学习指南

Python爬虫(十二)_XPath与lxml类库

Python学习指南 有同学说,我正则用的不好,处理HTML文档很累,有没有其他的方法? 有!那就是XPath,我们可以用先将HTML文档转换成XML文...

24110
来自专栏Java Edge

软件设计七大原则实战(三)-依赖倒置原则1 定义

依赖倒置原则(Dependence Inversion Principle,DIP) High level modules should not depend...

692
来自专栏前端儿

前端代码相关规范

项目目录和文件的命名使用小写字母,避免使用大写或驼峰,多个单词以下划线 _ 分隔  如:my_project/cast_detail.js

1183
来自专栏deepcc

CSS: IE中的BUG之margin-bottom失效

25910
来自专栏mathor

LeetCode74. 搜索二维矩阵&240. 搜索二维矩阵 II

 通常情况下在一个矩阵中搜索一个元素时间复杂度是O(m*n)的,但是在这里只用O(m+n)的时间复杂度就能完成,说一下思路  以右上角为起点,如果当前的值...

892
来自专栏wOw的Android小站

[MarkDown] MarkDown语法小结

HTML中 < 和 & 都要转码 但markdown不必,输入& 和 &amp; 都显示 &,< 也一样

331
来自专栏柠檬先生

你不知道的javaScript笔记(3)

对象 对象可以通过两种形式定义: 声明形式和构造形式 声明形式语法: var myObj = {key:value} 构造形式语法: var myObj = n...

1745

扫码关注云+社区