JavaScript中return的用法详解
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规律与练习
示例代码：
<!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：通过对象.函数名()调用的：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的用法详解的更多相关文章
- JavaScript中this的用法详解
JavaScript中this的用法详解 最近,跟身边学前端的朋友了解,有很多人对函数中的this的用法和指向问题比较模糊,这里写一篇博客跟大家一起探讨一下this的用法和指向性问题. 1定义 thi ...
- Javascript中setTimeout()的用法详解
1.SetTimeOut() 1.1 SetTimeOut()语法例子 1.2 用SetTimeOut()执行Function 1.3 SetTimeout()语法 ...
- c++中vector的用法详解
c++中vector的用法详解 vector(向量): C++中的一种数据结构,确切的说是一个类.它相当于一个动态的数组,当程序员无法知道自己需要的数组的规模多大时,用其来解决问题可以达到最大节约空间 ...
- javascript 中合并排序算法 详解
javascript 中合并排序算法 详解 我会通过程序的执行过程来给大家合并排序是如何排序的... 合并排序代码如下: <script type="text/javascript& ...
- javascript中的this作用域详解
javascript中的this作用域详解 Javascript中this的指向一直是困扰我很久的问题,在使用中出错的机率也非常大.在面向对象语言中,它代表了当前对象的一个引用,而在js中却经常让我觉 ...
- css3中user-select的用法详解
css3中user-select的用法详解 user-select属性是css3新增的属性,用于设置用户是否能够选中文本.可用于除替换元素外的所有元素,以下是user-select的主要用法和注意事项 ...
- C#中string.format用法详解
C#中string.format用法详解 本文实例总结了C#中string.format用法.分享给大家供大家参考.具体分析如下: String.Format 方法的几种定义: String.Form ...
- javascript中=、==、===区别详解
javascript中=.==.===区别详解今天在项目开发过中发现在一个小问题.在判断n==""结果当n=0时 n==""结果也返回了true.虽然是个小问题 ...
- php中setcookie函数用法详解(转)
php中setcookie函数用法详解: php手册中对setcookie函数讲解的不是很清楚,下面是我做的一些整理,欢迎提出意见. 语法: bool set ...
随机推荐
- 20分钟快速了解Redis
Redis可以说是目前最火爆的NoSQL数据库! 过去几年,Memcached很盛行,现在有很多公司已将Memcached替换成了Redis.当然,很多人替换并不清楚为什么,只是感觉不想让主流抛弃,这 ...
- C++实现的控制台-贪吃蛇
周六终于可以抽出一整段时间了 想了想就写个贪吃蛇吧 第一次写 差不多下了140行 也不算太多吧 以后ACM比赛是在做不来就自己打个贪吃蛇玩 ps:本来想写个项目的 但是为了方便你们阅读 就写在 ...
- JavaEE开发之SpringMVC中的路由配置及参数传递详解
在之前我们使用Swift的Perfect框架来开发服务端程序时,聊到了Perfect中的路由配置.而在SpringMVC中的路由配置与其也是大同小异的.说到路由,其实就是将URL映射到Java的具体类 ...
- 前端随手优化不完全篇-SEO篇
一代码优化概述 关于代码优化的知识是纯理论的知识,学习的很枯燥.在学到CSS时,不免遇到CSS+div进行代码优化的知 识,因此在网上看了一些关于这方面的知识,简单的整合一下,梳理自己所了解的代码优化 ...
- C# 类型转换is和as 以及性能陷阱
1.在C#2.0之前,as只能用于引用类型.而在C#2.0之后,它也可以用于可空类型.其结果为可空类型的某个值---空值或者一个有意义的值.示例: static void Main(string ...
- 现有‘abcdefghijkl’12个字符，将其所有的排列按字典序进行排序，给出任意一组排列，说出这租排列在所有排列中是第几小的
题目: 现有‘abcdefghijkl’12个字符,将其所有的排列按字典序进行排序,给出任意一组排列,说出这租排列在所有排列中是第几小的 据说这道题是百度校招的一道算法题,反正我觉得我在学校的时候很可 ...
- POJ 1743 不可重叠的最长重复子串
原问题,其实是找最长的相似子串,所谓相似就是一个子串每个值加上一个偏移值可以得到另一个子串. 我们先求原数组的差值数组,对新数组求后缀数组,二分答案,判定是否有某个Height数组中的sa最小值与最大 ...
- bzoj4826 [Hnoi2017]影魔
Description 影魔,奈文摩尔,据说有着一个诗人的灵魂.事实上,他吞噬的诗人灵魂早已成千上万.千百年来,他收集了各式各样的灵魂,包括诗人.牧师.帝王.乞丐.奴隶.罪人,当然,还有英雄.每一个灵 ...
- 给自己的QQ群开启腾讯官方的群聊机器人
看到腾讯有个机器人还不错 能聊天 能唱歌 方法:1.点击链接填写https://wj.qq.com/s/946969/64ac 群聊机器人内测邀请.按照提示填就行了 2.然后就是开启机器人了 http ...
- Composer 中国全量镜像（二）
一.查看当前镜像地址 在命令行输入如下命令,即可查看镜像地址: $ composer config -g repo.packagist {"type":"composer ...