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 相关文章推荐
js几秒以后倒计时跳转示例
Dec 26 Javascript
js返回上一页并刷新的多种实现方法
Feb 26 Javascript
老生常谈 关于JavaScript的类的继承
Jun 24 Javascript
angularjs实现文字上下无缝滚动特效代码
Sep 04 Javascript
jQuery模拟淘宝购物车功能
Feb 27 Javascript
JavaScript截屏功能的实现代码
Jul 28 Javascript
微信小程序实现手指触摸画板
Jul 09 Javascript
vue实现word,pdf文件的导出功能
Jul 31 Javascript
vue-loader中引入模板预处理器的实现
Sep 04 Javascript
JS数据类型STRING使用实例解析
Dec 18 Javascript
JS Generator 函数的含义与用法实例总结
Apr 08 Javascript
JavaScript代码压缩工具UglifyJS和Google Closure Compiler的基本用法
Apr 13 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
SONY ICF-SW07收音机电路分析
2021/03/02 无线电
ADODB结合SMARTY使用~超级强
2006/11/25 PHP
is_uploaded_file函数引发的不能上传文件问题
2013/10/29 PHP
php配置php-fpm启动参数及配置详解
2013/11/04 PHP
php 流程控制switch的简单实例
2016/06/07 PHP
javascript学习随笔(使用window和frame)的技巧
2007/03/08 Javascript
用javascript实现在小方框中浏览大图的代码
2007/08/14 Javascript
JSON 学习之JSON in JavaScript详细使用说明
2010/02/23 Javascript
JS实现的网页倒计时数字时钟效果
2015/03/02 Javascript
简单介绍JavaScript中字符串创建的基本方法
2015/07/07 Javascript
JS未跨域操作iframe里的DOM
2016/06/01 Javascript
浅谈angularjs $http提交数据探索
2017/01/20 Javascript
jQuery 防止相同的事件快速重复触发方法
2018/02/08 jQuery
vue-loader中引入模板预处理器的实现
2019/09/04 Javascript
构建大型 Vue.js 项目的10条建议(小结)
2019/11/14 Javascript
使用cx_freeze把python打包exe示例
2014/01/24 Python
Python中查看文件名和文件路径
2017/03/31 Python
Python正则表达式知识汇总
2017/09/22 Python
Python检测网络延迟的代码
2018/05/15 Python
使用Numpy读取CSV文件,并进行行列删除的操作方法
2018/07/04 Python
Python操作配置文件ini的三种方法讲解
2019/02/22 Python
Python面向对象之类的封装操作示例
2019/06/08 Python
python处理大日志文件
2019/07/23 Python
python super的使用方法及实例详解
2019/09/25 Python
Python-openCV读RGB通道图实例
2020/01/17 Python
pycharm解决关闭flask后依旧可以访问服务的问题
2020/04/03 Python
2020版Python学习路线图(附学习资料)
2020/09/15 Python
纯CSS3制作的简洁蓝白风格的登录模板(非IE效果更好)
2013/08/11 HTML / CSS
eBay法国购物网站:eBay.fr
2017/10/21 全球购物
工厂实习感言
2014/01/14 职场文书
小学班主任评语大全
2014/04/23 职场文书
2014年学生管理工作总结
2014/12/20 职场文书
订货会邀请函
2015/01/31 职场文书
如何写好开幕词?
2019/06/24 职场文书
创业计划书之韩国烧烤店
2019/09/19 职场文书
使用Python通过企业微信应用给企业成员发消息
2022/04/18 Python