this,this,再次讨论javascript中的this,超全面(经典)


Posted in Javascript onJanuary 05, 2016

JavaScript 是一种脚本语言,因此被很多人认为是简单易学的。然而情况恰恰相反,JavaScript 支持函数式编程、闭包、基于原型的继承等高级功能。本文仅采撷其中的一例:JavaScript 中的 this 关键字,深入浅出的分析其在不同情况下的含义,形成这种情况的原因以及 Dojo 等 JavaScript 工具中提供的绑定 this 的方法。可以这样说,正确掌握了 JavaScript 中的 this 关键字,才算迈入了 JavaScript 这门语言的门槛。

 至于js中this这个东西,好多淫解释过了,看起来好高端的样子,不晓得你看懂了木有?

先引用比较高端的,三水点靠木里 的, yes this 

好了,下面加上鄙人比较挫的解释

论点: this 不是变量,不是属性,不能为其赋值,它始终指向调用它的对象

感觉还TM太虚了,只要记住最重要的一条即可 ”它始终指向调用它的对象“ ,所以找到调用this的对象,就知道this到底指向谁了

1、

alert(this);

瞅瞅,弹出来的是么子,要么是”object window“ ,要么 "object" 总之就对象了,是那个对象呢?

alert(this === window);

结果为'true' 所以了,现在调用它的对象是window了

2、

var test = function(){
  alert(this);
}
test();

猜猜上面弹出什么,是不是和"alert(this)" 这句一样的

var test = function(){
  alert(this === window);
 }
test();

运行上面的代码,是不是弹出了'true' ?

事情就这样完了?

要这么简单的话,何必那么多人都去论述这个鸟了?

3、

再来

var test = function(){
  alert(this === window);
 }
new test();

哎哎,这次咋成'false'呢?

记住”this 始终指向调用它的对象“,第”1、“处调用该段代码的直接对象是全局对象,即"window" ;第”2、“处虽然是函数,但是调用其的仍然是”window“(不要弄混了,函数虽然是对象,但是调用它的是另一个对象);第”3、“处,使用了”new“ 这时其实已经发生变化了,这是一个构造函数,构造函数创建时创建了一个新的空的对象,即”new test()“创建了一个新的对象,然后再由这个对象指向函数"test"中的代码,因此此时this不在是window对象,而是该构造函数创建的新对象。

4、

var test ={
  'a':1,
  'b':function(){
   alert(this === test)
  }
 }
test.b();

有了上面的论点,这下一下子清楚了吧!

5、

var test ={
  'a':1,
  'b':function(){
   alert(this === test)
  }
 }
var test1 = test;
test1.b();

so, 你不会认为结果为"false"吧,错了,虽然'test1'的值为'test'  但是'test1'不还是'test'对象么,它有新产生对象,你暂且理解为引用的了,两个都指向一个对象,奉上下面一段代码为证

var test ={
  'a':1,
  'b':function(){
   alert(this === test)
  }
 }
var test1 = test;
test.a = 2;
alert(test1.a);

如果弹出了”1“,你来骂我

6、再整个复杂的

var test ={
  'a':1,
  'b':{
   'b1':function(){
    alert(this === test);
   }
  }
 }
test.b.b1();

这是"true"还是"false"呢?

按照上面的理论,这时"this"不再直接被'test'调用了,而是被'test.b' 调用, 奉上下面一段代码为证

var test ={
  'a':1,
  'b':{
   'b1':function(){
    alert(this === test.b);
   }
  }
 }
test.b.b1();

 7、好再整个复杂点的

var test = function(){
  var innerTest = function(){
   alert(this === test);
  }
  innerTest();
 }
test();

你不会认为弹出"true"吧,不是按照上面的理论'innerTest'是被'test'调用的,然后'this'就指向'test'吗?
额,错就错在是谁调用的'innerTest', 其实这种函数都是'window'对象调用的,及时你嵌套一千层,调用各个函数的都是'window'对象,奉上下面这段代码为证

var test = function(){
  var innerTest = function(){
   alert(this === window);
   var innerTest1 = function(){
    alert(this === window);
   }
   innerTest1();
  }
  innerTest();
 }
test();

8、再来一段特殊的

var test = function(){
  alert(this === window);
 }
var test1 = {
}
test.apply(test1);

这个我觉得大家都不会猜错,该函数的作用就是”调用一个对象的一个方法,以另一个对象替换当前对象“ 所以了'window' 对象已经被替代为'test1',自然为'false'了,奉上如下代码以为证明

var test = function(){
  alert(this === test1);
 }
 var test1 = {
  }
test.apply(test1);

 那么诸如'call'之类的也就相似了

9、再来一个原型的继承,区别于字面量的继承

var test = function(){
 }
 var my = function(){
  this.a = function(){
   alert(this === mytest2);
  }
 }
 var mytest = new my();
 test.prototype = mytest;
 var mytest2 = new test();
 mytest2.a();

10、还剩下些什么了,可能就是'dom'对象了

<script>
  var mytest = function(context){
   alert(context.getAttribute('id'));
   alert(this === window);
  }
 </script>
 <div id="test" onclick="mytest(this)">aaaa</div>

看了上面的应该了解了吧,里面的'this'分别代表神马

Javascript 相关文章推荐
JQuery,Extjs,YUI,Prototype,Dojo 等JS框架的区别和应用场景简述
Apr 15 Javascript
理解Javascript_06_理解对象的创建过程
Oct 15 Javascript
javascript:void(0)的问题使用探讨
Apr 10 Javascript
js 实现的可折叠留言板(附源码下载)
Jul 01 Javascript
js和jquery实现监听键盘事件示例代码
Jun 24 Javascript
js密码强度实时检测代码
Mar 02 Javascript
利用jsonp跨域调用百度js实现搜索框智能提示
Aug 24 Javascript
Javascript将图片的绝对路径转换为base64编码的方法
Jan 11 Javascript
vue cli升级webapck4总结
Apr 04 Javascript
js删除对象/数组中null、undefined、空对象及空数组方法示例
Nov 14 Javascript
javascript实现鼠标点击生成文字特效
Dec 24 Javascript
JS FormData对象使用方法实例详解
Feb 12 Javascript
基于javascript实现图片预加载
Jan 05 #Javascript
JavaScript、tab切换完整版(自动切换、鼠标移入停止、移开运行)
Jan 05 #Javascript
javascript设置和获取cookie的方法实例详解
Jan 05 #Javascript
javascript简单比较日期大小的方法
Jan 05 #Javascript
js与jQuery实现checkbox复选框全选/全不选的方法
Jan 05 #Javascript
简述jQuery ajax的执行顺序
Jan 05 #Javascript
JavaScript类型系统之正则表达式
Jan 05 #Javascript
You might like
短波的认识
2021/03/01 无线电
php入门学习知识点七 PHP函数的基本应用
2011/07/14 PHP
编译php 5.2.14+fpm+memcached(具体操作详解)
2013/06/18 PHP
PHP获取php,mysql,apche的版本信息示例代码
2014/01/16 PHP
PHP中使用GD库绘制折线图 折线统计图的绘制方法
2015/11/09 PHP
PHP入门教程之字符串处理技巧总结(转换,过滤,解析,查找,截取,替换等)
2016/09/11 PHP
thinkPHP实现基于ajax的评论回复功能
2018/06/22 PHP
不用ajax实现点击文字即可编辑的方法
2007/12/16 Javascript
基于JQUERY的两个ListBox子项互相调整的实现代码
2011/05/07 Javascript
jQuery随手笔记之常用的jQuery操作DOM事件
2015/11/29 Javascript
解决angular的$http.post()提交数据时后台接收不到参数值问题的方法
2015/12/10 Javascript
js实现弹窗暗层效果
2017/01/16 Javascript
BootStrap table删除指定行的注意事项(笔记整理)
2017/02/05 Javascript
jquery将标签元素的高设为屏幕的百分比
2017/04/19 jQuery
JS使用正则表达式找出最长连续子串长度
2017/10/26 Javascript
jQuery简单实现向列表动态添加新元素的方法示例
2017/12/25 jQuery
node打造微信个人号机器人的方法示例
2018/04/26 Javascript
利用angular自动编译andriod APK的绕坑经历分享
2019/03/08 Javascript
node使用request请求的方法
2019/12/20 Javascript
[01:09:50]VP vs Pain 2018国际邀请赛小组赛BO2 第二场
2018/08/20 DOTA
python3实现windows下同名进程监控
2018/06/21 Python
Python使用一行代码获取上个月是几月
2018/08/30 Python
Pycharm 设置默认头的图文教程
2019/01/17 Python
pandas实现将dataframe满足某一条件的值选出
2019/06/12 Python
python与C、C++混编的四种方式(小结)
2019/07/15 Python
Python pip 安装与使用(安装、更新、删除)
2019/10/06 Python
Python try except finally资源回收的实现
2021/01/25 Python
小学三年级数学教学反思
2014/01/31 职场文书
采购主管岗位职责
2014/02/01 职场文书
骨干教师考核方案
2014/05/09 职场文书
关于保护环境的建议书
2014/05/13 职场文书
大学生入党积极分子自我评价
2014/09/20 职场文书
自愿离婚协议书2015
2015/01/26 职场文书
小学教师自我评价
2015/03/04 职场文书
学习弘扬焦裕禄精神心得体会
2016/01/23 职场文书
一文了解MySQL二级索引的查询过程
2022/02/24 MySQL