JavaScript中return的用法详解

    最近,跟身边学前端的朋友了解,有很多人对函数中的this的用法和指向问题比较模糊,这里写一篇博客跟大家一起探讨一下this的用法和指向性问题。

1定义   

    this,从字面意思来看就是‘这个’,官方定义:在 ECMAScript 中,要掌握的最重要的概念之一是关键字 this 的用法,它用在对象的方法中。关键字 this 总是指向调用该方法的对象,可以看下下面的示例代码:

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8     <div id="div1">你好,this</div>
 9     <script>
10         var odiv=document.getElementById('div1');
11         odiv.onmouseover=function(){
12            alert(this);
13         }
14     </script>
15 </body>
16 </html>

  示例图片:

   

  这里,div标签通过事件调用函数。所以,这里的this指向HTML的div标签;

    

    

2使用this的意义

    那为什么这里使用 this 而不是直接使用odiv呢?因为在实例化对象时,总是不能确定开发者会使用什么样的变量名。使用 this,即可在任何多个地方重用同一个函数。看不懂定义的话我们来看下面的栗子:

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8     <script>
 9         function showname() {
10             alert(this.name);
11         };
12         var obj1 = new Object;
13         obj1.name = "obj1";
14         obj1.showname = showname;
15         var obj2 = new Object;
16         obj2.name = "obj2";
17         obj2.showname = showname;
18         obj1.showname();        //输出 "obj1"
19         obj2.showname();        //输出 "obj2"
20     </script>
21 </body>
22 </html>

    示例图片:

  这里对每个对象都附上了showname方法,这里使用this的话就不用每一个对象都重新写一个方法,有利于方法的复用,减少无用的代码。

    

3规律与练习   

 

    

(1)规律1与练习1

  

   
    规律1:通过函数名()直接调用:this指向window:

    示例代码:

    

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script>
        function showname() {
            alert(this);
        };
        showname();
    </script>
</body>
</html>

    

    

    

 
(2)规律2与练习2
   

  规律2:通过对象.函数名()调用的:this指向这个对象;本例的对象是狭义的对象(即object);标签对象的栗子见本博客开头的栗子

  练习2:示例代码

     

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Title</title>
 </head>
 <body>
     <script>
         function showThis() {
             alert(this);
         };
         var obj1 = new Object;
         obj1.name = "obj1";
         obj1.showThis = showThis;
         obj1.showThis();
     </script>
 </body>
 </html>

  示例图片:

  

(3)规律3与练习3

  

  规律3:函数作为数组的一个元素,通过数组下标调用的:this指向这个数组

  练习3:示例代码

  

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Title</title>
 </head>
 <body>
     <script>
         function showname() {
             alert(this);
         };
         var arr = [showname,1,2,3];
         arr[0](); //this--->数组arr
     </script>
 </body>
 </html>

  示例图片:

  

  可以看出,弹窗就是那个数组的内容;这里指向数组

4规律4与练习4   

    规律4:函数作为window内置函数的回调函数调用:this指向window

    练习4:示例代码:

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Title</title>
 </head>
 <body>
     <script>
         function showname() {
             alert(this);
         };
         setTimeout(showname,1000);
     </script>
 </body>
 </html>

    执行效果图:

    

5规律5与练习5

  规律5:函数作为构造函数,用new关键字调用时:this指向新new出的对象

  练习5:

  

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script>
        function Person(a){
            this.name=a;
        }
        var zhangsan = new Person("zhangsan");
        console.log(zhangsan);
        alert(zhangsan.name);
    </script>
</body>
</html>

 执行效果:

  

4综合练习  

  练习1:

var obj1 = {
    name:'obj1',
    arr:[setTimeout(func,3000),1,2,3]
}
    document.getElementById("div").onclick = obj1.arr[0];
//函数最终调用者:setTimeout,符合规律⑤  this--->window

    练习2:

  

var obj2 = {
    name:'obj1',
    arr:[func,1,2,3]
}
document.getElementById("div").onclick = obj2.arr[0]();
//函数最终调用者:数组下标,符合规律③  this--->arr
        

   练习3

var obj3 = {
    name:'obj1',
    arr:[{name:'arrObj',fun:func},1,2,3]
}
document.getElementById("div").onclick = obj3.arr[0].fun();
//函数最终调用者:{name:'arrObj',fun:func},符合规律②  this--->obj

  

  练习4

<body>
    <div id="div1">点我呀</div>
    <script>
        var div = document.getElementById("div1");
        function showname() {
            alert(this);
        };
        div.onclick = showname();
    </script>
</body>

  这里你会发现你并没有点击,就已经弹窗了,而且指向window。对象通过事件调用的只能是一个自写的匿名函数,行内js代码除外。

  例:div.onclick=function(){执行语句};

  

本次分享就到这里

谢谢大家的观看

 
觉得不错请点赞
 

希望能对大家有所启发

有更好的方法或不同的意见请在留言区跟我交流

  

JavaScript中return的用法详解的更多相关文章

  1. JavaScript中this的用法详解

    JavaScript中this的用法详解 最近,跟身边学前端的朋友了解,有很多人对函数中的this的用法和指向问题比较模糊,这里写一篇博客跟大家一起探讨一下this的用法和指向性问题. 1定义 thi ...

  2. Javascript中setTimeout()的用法详解

    1.SetTimeOut()       1.1 SetTimeOut()语法例子       1.2 用SetTimeOut()执行Function       1.3 SetTimeout()语法 ...

  3. c++中vector的用法详解

    c++中vector的用法详解 vector(向量): C++中的一种数据结构,确切的说是一个类.它相当于一个动态的数组,当程序员无法知道自己需要的数组的规模多大时,用其来解决问题可以达到最大节约空间 ...

  4. javascript 中合并排序算法 详解

    javascript 中合并排序算法 详解 我会通过程序的执行过程来给大家合并排序是如何排序的...  合并排序代码如下: <script type="text/javascript& ...

  5. javascript中的this作用域详解

    javascript中的this作用域详解 Javascript中this的指向一直是困扰我很久的问题,在使用中出错的机率也非常大.在面向对象语言中,它代表了当前对象的一个引用,而在js中却经常让我觉 ...

  6. css3中user-select的用法详解

    css3中user-select的用法详解 user-select属性是css3新增的属性,用于设置用户是否能够选中文本.可用于除替换元素外的所有元素,以下是user-select的主要用法和注意事项 ...

  7. C#中string.format用法详解

    C#中string.format用法详解 本文实例总结了C#中string.format用法.分享给大家供大家参考.具体分析如下: String.Format 方法的几种定义: String.Form ...

  8. javascript中=、==、===区别详解

    javascript中=.==.===区别详解今天在项目开发过中发现在一个小问题.在判断n==""结果当n=0时 n==""结果也返回了true.虽然是个小问题 ...

  9. php中setcookie函数用法详解(转)

    php中setcookie函数用法详解:        php手册中对setcookie函数讲解的不是很清楚,下面是我做的一些整理,欢迎提出意见.        语法:        bool set ...

随机推荐

  1. 刷机无法连接4g

    只显示2g,gsm only 无法修改,本人刷cm13和lineageOs都遇到过这样的情况,可能与手机有关xt1570(moto x style),特在此分享,希望有用 1.首先在设置中将sim卡网 ...

  2. 最新windows 0day漏洞利用

    利用视屏:https://v.qq.com/iframe/player.html?vid=g0393qtgvj0&tiny=0&auto=0 使用方法 环境搭建 注意,必须安装32位p ...

  3. memcached分布式缓存

    1.memcached分布式简介 memcached虽然称为“分布式”缓存服务器,但服务器端并没有“分布式”功能.Memcache集群主机不能够相互通信传输数据,它的“分布式”是基于客户端的程序逻辑算 ...

  4. C#图解教程-方法参数笔记(上)

    一晃大学四年要过去了,期间乱点了很多技能点, 导致每一项技能都只是处于入门阶段.为了将C#作为我的主要技能,准备恶补相关姿势(知识),通过各种技术论坛的推荐,找到了<C#图解教程>这本书. ...

  5. 111_climbing-stairs

    /*@Copyright:LintCode@Author:   Monster__li@Problem:  http://www.lintcode.com/problem/climbing-stair ...

  6. Unity粒子系统

    最近比较清闲,就重新看了一遍例子系统,感觉能把效果做的炫酷对于初学者来说并不是一件容易的事,但是回头想想,最重要的原因可能还是没有把Particle Systems组件研究透吧,温故而知新,一起复习一 ...

  7. 三步快速解决dll冲突问题

    最近在推广应用我们的分布式服务网关(Web Api):业务组大部分对外的业务逻辑以HSF服务或者自定义扩展插件的方式,注册并发布到分布式服务网关中,统一对外提供WebApi服务.临时介绍下我们的分布式 ...

  8. 简单的后台数据和前台数据交互.net

    最近忙着做POS项目,心血来来潮写了点小项目. 更具要求是随机显示数据并且产生的数据是可以控制的.前台交互显示能够倒叙,切每次只显示一条,页面不能超过20条超过的部分做删除. 我先展示一下前台的代码, ...

  9. WebService学习--股票走势图+天气预报实现

        互联网上面有很多的免费webService服务,我们可以调用这些免费的WebService服务,将一些其他网站的内容信息集成到我们的Web应用中显示,下面就以获取股票数据和天气预报为例进行学习 ...

  10. Akka(1):Actor - 靠消息驱动的运算器

    Akka是由各种角色和功能的Actor组成的,工作的主要原理是把一项大的计算任务分割成小环节,再按各环节的要求构建相应功能的Actor,然后把各环节的运算托付给相应的Actor去独立完成.Akka是个 ...