AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

JavaScript中this的使用

2017-11-08 950
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：

用简单的代码写出效率高的程序

 

 

     
 
  1. <!--这个程序使用了javascript中的this，this可以减少很多不必要的代码量，并且提高代码的效率--> 
    2.  
 
  2.  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">  
    3.  
 
  3.  <html>  
    4.  
 
  4.      <head>  
    5.  
 
  5.          <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">  
    6.  
 
  6.          <title>Untitled Document</title>  
    7.  
 
  7.          <script language="javascript">  
    8.  
 
  8.             function processData(form){  
    9.  
 
  9.                  for (var i = 0; i < form.Beatles.length; i++) {   
    10.  
 
  10.                     if (form.Beatles[i].checked) {  
    11.  
 
  11.                         break;  
    12.  
 
  12.                     }  
    13.  
 
  13.                 }  
    14.  
 
  14.                  var beatle = form.Beatles[i].value;   
    15.  
 
  15.                  var song = form.song.value;   
    16.  
 
  16.                 alert("Checking whether"+"   "+ song+"   "+ "features"+"   "+ beatle+"   "+ "...");  
    17.  
 
  17.             }  
    18.  
 
  18.               
    19.  
 
  19.             function verifySong(entry){//这里的entry是随便起的也可以叫别的名  
    20.  
 
  20.                  var song = entry.value;   
    21.  
 
  21.                 alert("Checking whether" +"   "+ song+"   " + "is a Beatles tune...");  
    22.  
 
  22.             }  
    23.  
 
  23.          </script>  
    24.  
 
  24.      </head>  
    25.  
 
  25.      <body>  
    26.  
 
  26.          <form onSubmit="return false">  
    27.  
 
  27.             Choose your favorite Beatle:  
    28.  
 
  28.              <input type="radio" name="Beatles" value="John Lennon" checked/>John  <!--看到这里的checked了吧可以这样太简单了-->  
    29.  
 
  29.              <input type="radio" name="Beatles" value="Paul McCartney"/>Paul   
    30.  
 
  30.              <input type="radio" name="Beatles" value="George Harrison"/>George   
    31.  
 
  31.              <input type="radio" name="Beatles" value="Ringo Starr"/>Ringo   
    32.  
 
  32.              <p>  
    33.  
 
  33.                 Enter the name of your favorite Beatles song:  
    34.  
 
  34.                  <br>  
    35.  
 
  35.                  <input type="text" name="song" value="Eleanor Rigby" onChange="verifySong(this)"/>  
    36.  
 
  36.                  <p>  
    37.  
 
  37.                  <input type="button" name="process" value="Process Request..." onClick="processData(this.form)"/>  
    38.  
 
  38.                  <!--因为这个按钮是要提交表单的，直接将form传到指定的函数中-->  
    39.  
 
  39.                  </form>  
    40.  
 
  40.              </body>  
    41.  
 
  41.   </html>  
    42.  

 

哈哈 看到了吧 简单吧
 


 


 

本文转自sucre03 51CTO博客，原文链接：http://blog.51cto.com/sucre/380681，如需转载请自行联系原作者

                        
                    

                    
                        

                            

    
文章标签：

    

        

            JavaScript
        

        

            前端开发
        

    



                            

    
关键词：

    

        

            JavaScript this
        

    



                            
                        

                        
                        
                    
                

                


                

                    

                        

                            
                                
                            
                            

                        

                        科技小先锋
                        

                        

                    

                    

                        

                            

                            
目录

                        

                        

                    

                

                

                    

                


                

    
相关文章

    

        

            

                

                    低代码布道师
                    
                

                
                
                |
                

                    JavaScript
                    前端开发
                

            

            

                

                    
                        javascript中的this
                    
                    
javascript中的this


                    

                        

                            

                                低代码布道师
                                
                            

                            156
                            0
                            
                        

                    

                

                
            

        

        

            

                

                    远近高低各不同
                    
                

                
                
                |
                

                    JavaScript
                

            

            

                

                    
                        JS中改变this指向的六种方法
                    
                    
JS中改变this指向的六种方法


                    

                        

                            

                                远近高低各不同
                                
                            

                            270
                            0
                            
                        

                    

                

                
            

        

        

            

                

                    众所周知
                    
                

                
                
                |
                

                    自然语言处理
                    JavaScript
                    前端开发
                

            

            

                

                    
                        在JavaScript中，this关键字的行为可能会因函数的调用方式而异
                    
                    
【6月更文挑战第15天】JavaScript的`this`根据调用方式变化：非严格模式下直接调用时指向全局对象（浏览器为window），严格模式下为undefined。作为对象方法时，`this`指对象本身。用`new`调用构造函数时，`this`指新实例。`call`，`apply`，`bind`可显式设定`this`值。箭头函数和绑定方法有助于管理复杂场景中的`this`行为。

                    

                        

                            

                                众所周知
                                
                            

                            115
                            3
                            
                        

                    

                

                
            

        

        

            

                

                    码喽的自我修养
                    
                

                
                
                |
                

                    JavaScript
                    前端开发
                

            

            

                

                    
                        js中改变this指向、动态指定函数 this 值的方法
                    
                    
js中改变this指向、动态指定函数 this 值的方法

                    

                        

                            

                                码喽的自我修养
                                
                            

                            183
                            1
                            
                        

                    

                

                
            

        

        

            

                

                    众所周知
                    
                

                
                
                |
                

                    自然语言处理
                    JavaScript
                    前端开发
                

            

            

                

                    
                        在JavaScript中，this关键字的行为可能会因函数的调用方式而异
                    
                    
【5月更文挑战第9天】JavaScript中的`this`关键字行为取决于函数调用方式。在非严格模式下，直接调用函数时`this`指全局对象，严格模式下为`undefined`。作为对象方法调用时，`this`指向该对象。用`new`调用构造函数时，`this`指向新实例。通过`call`、`apply`、`bind`可手动设置`this`值。在回调和事件处理中，`this`可能不直观，箭头函数和绑定方法可帮助管理`this`的行为。

                    

                        

                            

                                众所周知
                                
                            

                            109
                            1
                            
                        

                    

                

                
            

        

        

            

                

                    晓同哇哇~
                    
                

                
                
                |
                

                    JavaScript
                    前端开发
                

            

            

                

                    
                        深入探索JavaScript：如何改变this的指向
                    
                    
深入探索JavaScript：如何改变this的指向

                    

                        

                            

                                晓同哇哇~
                                
                            

                            176
                            2
                            
                        

                    

                

                
            

        

        

            

                

                    土木林森
                    
                

                
                
                |
                

                    JavaScript
                    前端开发
                

            

            

                

                    
                        【专栏】`Function.prototype.apply` 在JavaScript中用于动态设定函数上下文（`this`）和参数列表
                    
                    
【4月更文挑战第29天】`Function.prototype.apply` 在JavaScript中用于动态设定函数上下文（`this`）和参数列表。它接受两个参数：上下文对象和参数数组。理解`apply`有助于深入JS运行机制。文章分三部分探讨其原理：基本概念和用法、工作原理详解、实际应用与注意事项。在应用中要注意性能、参数类型和兼容性问题。`apply`可用于动态改变上下文、传递参数数组，甚至模拟其他语言的调用方式。通过深入理解`apply`，能提升代码质量和效率。

                    

                        

                            

                                土木林森
                                
                            

                            189
                            3
                            
                        

                    

                

                
            

        

        

            

                

                    朝阳39
                    
                

                
                
                |
                

                    JavaScript
                

            

            

                

                    
                        js 【详解】函数中的 this 指向
                    
                    
js 【详解】函数中的 this 指向

                    

                        

                            

                                朝阳39
                                
                            

                            161
                            0
                            
                        

                    

                

                
            

        

        

            

                

                    百锦再@新空间代码工作室
                    
                

                
                
                |
                

                    JavaScript
                    前端开发
                

            

            

                

                    
                        24 JavaScript学习：this
                    
                    
24 JavaScript学习：this

                    

                        

                            

                                百锦再@新空间代码工作室
                                
                            

                            111
                            0
                            
                        

                    

                

                
            

        

        

            

                

                    wljslmz
                    
                

                
                
                |
                

                    JavaScript
                    前端开发
                    数据安全/隐私保护
                

            

            

                

                    
                        深入探索 JavaScript 的“神秘花园”：“this”关键字
                    
                    
【4月更文挑战第21天】

                    

                        

                            

                                wljslmz
                                
                            

                            125
                            1
                            
                        

                    

                

                
            

        

    



            

            

                
                
                    
                    

    

        

            
热门文章

        

        

            
最新文章

        

    

    

        

            

                
  • 
                    
                        
    
                            
    1
    
                            
                            
    Chrome 下载大文件报错！用 Streamsaver.js 完美填坑
    
                            
    
                        
    
                        
                
    • 
                
  • 
                    
                        
    
                            
    2
    
                            
                            
    百宝箱开放平台 ✖️ Node.js SDK
    
                            
    
                        
    
                        
                
    • 
                
  • 
                    
                        
    
                            
    3
    
                            
                            
    局域网监控其他电脑的设备信息管理 Node.js 跳表算法
    
                            
    
                        
    
                        
                
    • 
                
  • 
                    
                        
    
                            
                            
    4
    
                            
    好程序员web前端分享详细了解JavaScript函数
    
                            
    
                        
    
                        
                
    • 
                
  • 
                    
                        
    
                            
                            
    5
    
                            
    javascript:函数的apply，call方法和length属性
    
                            
    
                        
    
                        
                
    • 
                
  • 
                    
                        
    
                            
                            
    6
    
                            
    kettle转换JavaScript加载外部js文件
    
                            
    
                        
    
                        
                
    • 
                
  • 
                    
                        
    
                            
                            
    7
    
                            
    JavaScript返回上一页代码区别
    
                            
    
                        
    
                        
                
    • 
                
  • 
                    
                        
    
                            
                            
    8
    
                            
    javascript中的 cookie对象
    
                            
    
                        
    
                        
                
    • 
                
  • 
                    
                        
    
                            
                            
    9
    
                            
    一些有用的javascript实例分析(二)
    
                            
    
                        
    
                        
                
    • 
                
  • 
                    
                        
    
                            
                            
    10
    
                            
    javascript 正则全收录
    
                            
    
                        
    
                        
                
    • 
            
    
            
    
                
            
    
        
    
        
    
            
    
                
  • 
                    
                        
    
                            
    1
    
                            
                            
    仿真银行app下载安装， 银行卡虚拟余额制作app，用html+css+js实现逼真娱乐工具
    
                            
    2330
    
                        
    
                        
                
    • 
                
  • 
                    
                        
    
                            
    2
    
                            
                            
    个人征信电子版无痕修改， 个人信用报告pdf修改，js+html+css即可实现【仅供学习用途】
    
                            
    700
    
                        
    
                        
                
    • 
                
  • 
                    
                        
    
                            
    3
    
                            
                            
    个人征信PDF无痕修改软件，个人征信模板可编辑，个人征信报告p图神器【js+html+css仅供学习用途】
    
                            
    1167
    
                        
    
                        
                
    • 
                
  • 
                    
                        
    
                            
                            
    4
    
                            
    征信报告修改器，征信报告生成器，制作软件无痕修改软件【js+html+css】
    
                            
    1644
    
                        
    
                        
                
    • 
                
  • 
                    
                        
    
                            
                            
    5
    
                            
    银行流水生成器在线制作，银行流水虚拟生成器app，h5+js+css【仅供学习用途】
    
                            
    3540
    
                        
    
                        
                
    • 
                
  • 
                    
                        
    
                            
                            
    6
    
                            
    制作b超单生成器， 假怀孕b超单图片制作， p图医院证明【css+html+js装逼恶搞神器】
    
                            
    600
    
                        
    
                        
                
    • 
                
  • 
                    
                        
    
                            
                            
    7
    
                            
     医院检查单子p图软件，在线制作仿真病历，js+css+html装逼神器
    
                            
    754
    
                        
    
                        
                
    • 
                
  • 
                    
                        
    
                            
                            
    8
    
                            
     处方单图片生成器， 处方单在线制作免费，js+css+html恶搞神器
    
                            
    1372
    
                        
    
                        
                
    • 
                
  • 
                    
                        
    
                            
                            
    9
    
                            
    病历单生成器在线制作，病历单生成器app，HTML+CSS+JS恶搞工具
    
                            
    3186
    
                        
    
                        
                
    • 
                
  • 
                    
                        
    
                            
                            
    10
    
                            
    抖音快手小红书虚拟评论截图生成器，模拟对话制作工具，html+js+css
    
                            
    956
    
                        
    
                        
                
    • 
            
    
            
    
                
            
    
        
    
    
    

    
                    
                    
    
    
    
        
    相关课程
    
        更多
    
    
    
    
        
  • 
                JavaScript入门与实战
            
    • 
        
  • 
                JavaScript 自学手册文档教程
            
    • 
    
    

    
                    
    
    
    
        
    相关电子书
    
        更多
    
    
    
    
        
  • 
                JavaScript面向对象的程序设计
            
    • 
        
  • 
                Delivering Javascript to World
            
    • 
        
  • 
                编程语言如何演化-以JS的private为例
            
    • 
    
    

    
                    
                    
                    
                    
    
                        
    
    
    
        
    下一篇
    
    
    
    阿里云负载均衡收费标准：ALB、NLB和CLB价格，包括LCU费用、实例费和公网带宽价格