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 相关文章推荐
Prototype使用指南之base.js
Jan 10 Javascript
JS 建立对象的方法
Apr 21 Javascript
JS中==与===操作符的比较
Mar 21 Javascript
javascript 45种缓动效果 非常酷
Jun 28 Javascript
jQuery(1.6.3) 中css方法对浮动的实现缺陷分析
Sep 09 Javascript
cookie的复制与使用记住用户名实现代码
Nov 04 Javascript
微信小程序 出现错误:{&quot;baseresponse&quot;:{&quot;errcode&quot;:-80002,&quot;errmsg&quot;:&quot;&quot;}}解决办法
Feb 23 Javascript
基于匀速运动的实例讲解(侧边栏,淡入淡出)
Oct 17 Javascript
基于BootStrap的文本编辑器组件Summernote
Oct 27 Javascript
vue给组件传递不同的值方法
Sep 29 Javascript
解决layer.confirm快速点击会重复触发事件的问题
Sep 23 Javascript
vue实现权限控制路由(vue-router 动态添加路由)
Nov 04 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分页示例代码
2007/03/19 PHP
解析使用ThinkPHP应该掌握的调试手段
2013/06/20 PHP
PHP 实现explort() 功能的详解
2013/06/20 PHP
PHP中cookie和session的区别实例分析
2014/08/28 PHP
php定义一个参数带有默认值的函数实例分析
2015/03/16 PHP
PHP中异常处理的一些方法整理
2015/07/03 PHP
php 中奖概率算法实现代码
2017/01/25 PHP
Jquery 基础学习笔记之文档处理
2009/05/29 Javascript
flash遮住div问题的正确解决方法
2014/02/27 Javascript
js实现简单的可切换选项卡效果
2015/04/10 Javascript
在Node.js应用中使用Redis的方法简介
2015/06/24 Javascript
js实现的光标位置工具函数示例
2016/10/03 Javascript
利用JS判断字符串是否含有数字与特殊字符的方法小结
2016/11/25 Javascript
详解vue中使用express+fetch获取本地json文件
2017/10/10 Javascript
9种使用Chrome Firefox 自带调试工具调试javascript技巧
2017/12/22 Javascript
微信小程序progress组件使用详解
2018/01/31 Javascript
Vue2.0用户权限控制解决方案的示例
2018/02/10 Javascript
详解如何在nuxt中添加proxyTable代理
2018/08/10 Javascript
详解Node.js amqplib 连接 Rabbit MQ最佳实践
2019/01/24 Javascript
Vue实现附件上传功能
2020/05/28 Javascript
JS删除对象中某一属性案例详解
2020/09/08 Javascript
Python cookbook(数据结构与算法)通过公共键对字典列表排序算法示例
2018/03/15 Python
python实现自主查询实时天气
2018/06/22 Python
对python opencv 添加文字 cv2.putText 的各参数介绍
2018/12/05 Python
python实现生成字符串大小写字母和数字的各种组合
2019/01/01 Python
Python Numpy计算各类距离的方法
2019/07/05 Python
一篇文章弄懂Python中的可迭代对象、迭代器和生成器
2019/08/12 Python
5 分钟读懂Python 中的 Hook 钩子函数
2020/12/09 Python
全球知名的婚恋交友网站:Match.com
2017/01/05 全球购物
维氏瑞士军刀英国网站:Victorinox英国
2019/07/04 全球购物
前台接待员岗位职责
2014/01/02 职场文书
百年校庆节目主持词
2014/03/27 职场文书
我的小天地教学反思
2014/04/30 职场文书
党支部综合考察材料
2014/05/19 职场文书
新郎婚礼致辞
2015/07/27 职场文书
2016年三八红旗手先进事迹材料
2016/02/26 职场文书