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 相关文章推荐
Javascript 异步加载详解(浏览器在javascript的加载方式)
May 20 Javascript
基于jquery实现拆分姓名的方法(纯JS版)
May 08 Javascript
解析Jquery中如何把一段html代码动态写入到DIV中(实例说明)
Jul 09 Javascript
基于jquery的9行js轻松实现tab控件示例
Oct 12 Javascript
javascript搜索框效果实现方法
May 14 Javascript
纯css实现窗户玻璃雨滴逼真效果
Aug 23 Javascript
php利用curl获取远程图片实现方法
Oct 26 Javascript
基于AngularJS+HTML+Groovy实现登录功能
Feb 17 Javascript
JS实现鼠标框选效果完整实例
Jun 20 Javascript
AngularJS中过滤器的使用与自定义实例代码
Sep 17 Javascript
VUE-ElementUI 自定义Loading图操作
Nov 11 Javascript
AJAX学习笔记
May 18 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
php操作sqlserver关于时间日期读取的小小见解
2009/11/29 PHP
zend api扩展的php对象的autoload工具
2011/04/18 PHP
浅析php设计模式之数据对象映射模式
2016/03/03 PHP
js DOM 元素ID就是全局变量
2012/09/20 Javascript
JS中的构造函数详细解析
2014/03/10 Javascript
JavaScript Serializer序列化时间处理示例
2014/07/31 Javascript
node.js中的path.isAbsolute方法使用说明
2014/12/08 Javascript
在for循环中length值是否需要缓存
2015/07/27 Javascript
JavaScript三种绑定事件方式及相互之间的区别分析
2017/01/10 Javascript
jquery实现简单实用的轮播器
2017/05/23 jQuery
angularJs中orderBy筛选以及filter过滤数据的方法
2018/09/30 Javascript
简单说说angular.json文件的使用
2018/10/29 Javascript
JS开发自己的类库实例分析
2019/08/28 Javascript
Python获取apk文件URL地址实例
2013/11/01 Python
python连接池实现示例程序
2013/11/26 Python
在Django中创建第一个静态视图
2015/07/15 Python
简单学习Python time模块
2016/04/29 Python
python实现决策树C4.5算法详解(在ID3基础上改进)
2017/05/31 Python
详解Python3.6的py文件打包生成exe
2018/07/13 Python
不管你的Python报什么错,用这个模块就能正常运行
2018/09/14 Python
pyqt远程批量执行Linux命令程序的方法
2019/02/14 Python
python输入错误后删除的方法
2019/10/12 Python
pygame实现烟雨蒙蒙下彩虹雨
2019/11/11 Python
Python figure参数及subplot子图绘制代码
2020/04/18 Python
利用python下载scihub成文献为PDF操作
2020/07/09 Python
matplotlib 使用 plt.savefig() 输出图片去除旁边的空白区域
2021/01/05 Python
UGG雪地靴荷兰官网:UGG荷兰
2016/09/09 全球购物
全球精选男装和家居用品:Article
2020/04/13 全球购物
一些PHP的面试题
2015/05/06 面试题
财务主管岗位职责
2014/02/28 职场文书
党员一句话承诺大全
2014/03/28 职场文书
2014年六一儿童节演讲稿
2014/05/23 职场文书
标准毕业生自荐信
2014/06/24 职场文书
2014年客服工作总结范文
2014/11/13 职场文书
2014年乡镇妇联工作总结
2014/12/02 职场文书
2016年母亲节寄语
2015/12/04 职场文书