再次讨论javascript 中的this
原文: http://www.jb51.net/article/77519.htm
核心总结:
1.不论函数在哪里被调用,只要没有指定调用方,则this都指向window。指定了调用方,就指向调用方。(参考:http://www.cnblogs.com/liuyongjia/p/7661382.html)
2.作为构造函数中调用,this指向新生成的对象。
分析一下:setTimeout和setInterval
bind的作用就是给函数一个指定的thisArg,经常使用bind的地方就是setTimeout和setInterval了。为什么呢?
setTimeout和setInterval都有一个特点,它会将回调函数的作用域转移到window上面。其实结合我们上面说的,很容易知道为什么。
以setTimeout为例:翻看MDN下setTimeout的定义,可以发现,setTimeout是把一段callback代码延迟执行。写过callback的同学都知道,callback的代码其实就是占了位,然后去调用一行行的代码,所以,callback中的this也会指向window。
实际开发中,我们不希望this指向window,故而常使用bind来使this指向我们希望的对象。
----------------------------------------------------------------------------------------------------------------------------------------------------------------
ad
这篇文章很好:
关于setInterval和setTImeout中的this指向问题
前些天在练习写一个小例子的时候用到了定时器,发现在setInterval和setTimeout中传入函数时,函数中的this会指向window对象,如下例:
var num = 0;
function Obj (){
this.num = 1,
this.getNum = function(){
console.log(this.num);
},
this.getNumLater = function(){
setTimeout(function(){
console.log(this.num);
}, 1000)
}
}
var obj = new Obj;
obj.getNum();//1 打印的是obj.num,值为1
obj.getNumLater()//0 打印的是window.num,值为0
从上述例子中可以看到setTimeout中函数内的this是指向了window对象,这是由于setTimeout()调用的代码运行在与所在函数
完全分离的执行环境上。这会导致这些代码中包含的 this
关键字会指向 window
(或全局
)对象。详细可参考MDN setTimeout
若想要让setTimeout中的this指向正确的值,可以使用以下三种比较常用的方法来使this指向正确的值:
1.将当前对象的this存为一个变量,定时器内的函数利用闭包来访问这个变量,如下:
var num = 0;
function Obj (){
var that = this; //将this存为一个变量,此时的this指向obj
this.num = 1,
this.getNum = function(){
console.log(this.num);
},
this.getNumLater = function(){
setTimeout(function(){
console.log(that.num); //利用闭包访问that,that是一个指向obj的指针
}, 1000)
}
}
var obj = new Obj;
obj.getNum();//1 打印的是obj.num,值为1
obj.getNumLater()//1 打印的是obj.num,值为1
这种方法是将当前对象的引用放在一个变量里,定时器内部的函数来访问到这个变量,自然就可以得到当前的对象。
2.利用bind()方法
var num = 0;
function Obj (){
this.num = 1,
this.getNum = function(){
console.log(this.num);
},
this.getNumLater = function(){
setTimeout(function(){
console.log(this.num);
}.bind(this), 1000) //利用bind()将this绑定到这个函数上
}
}
var obj = new Obj;
obj.getNum();//1 打印的为obj.num,值为1
obj.getNumLater()//1 打印的为obj.num,值为1
bind()方法是在Function.prototype上的一个方法,当被绑定函数执行时,bind方法会创建一个新函数,并将第一个参数作为新函数运行时的this。在这个例子中,在调用setTimeout中的函数时,bind方法创建了一个新的函数,并将this传进新的函数,执行的结果也就是正确的了。关于bind方法可参考 MDN bind
3. 箭头函数
var num = 0;
function Obj (){
this.num = 1,
this.getNum = function(){
console.log(this.num);
},
this.getNumLater = function(){
setTimeout(() => {
console.log(this.num);
}, 1000) //箭头函数中的this总是指向外层调用者,也就是Obj
}
}
var obj = new Obj;
obj.getNum();//1 打印的是obj.num,值为1
obj.getNumLater()//1 打印的是obj.num,值为1
ES6中的箭头函数完全修复了this的指向,this总是指向词法作用域,也就是外层调用者obj,因此利用箭头函数就可以轻松解决这个问题。
以上三种方法都是比较常用的,当然如果使用call或apply方法来代替bind方法,得到的结果也是正确的,但是call方法会在调用之后立即执行,那样也就没有了延时的效果,定时器也就没有用了,所以推荐使用上述方法来将this传进setTimeout和setInterval中。
在JavaScript中,this 的概念比较复杂。在面向对象编程中,this 还是随处可用的。这篇文章介绍了javascript中的this相关知识,对javascript this相关知识感兴趣的朋友一起学习吧
------------------------------------------------------------------------------------------
JavaScript 是一种脚本语言,因此被很多人认为是简单易学的。然而情况恰恰相反,JavaScript 支持函数式编程、闭包、基于原型的继承等高级功能。本文仅采撷其中的一例:JavaScript 中的 this 关键字,深入浅出的分析其在不同情况下的含义,形成这种情况的原因以及 Dojo 等 JavaScript 工具中提供的绑定 this 的方法。可以这样说,正确掌握了 JavaScript 中的 this 关键字,才算迈入了 JavaScript 这门语言的门槛。
至于js中this这个东西,好多淫解释过了,看起来好高端的样子,不晓得你看懂了木有?
先引用比较高端的,脚本之家里 的, yes this
好了,下面加上鄙人比较挫的解释
论点: this 不是变量,不是属性,不能为其赋值,它始终指向调用它的对象
感觉还TM太虚了,只要记住最重要的一条即可 ”它始终指向调用它的对象“ ,所以找到调用this的对象,就知道this到底指向谁了
1、
1
|
alert( this ); |
瞅瞅,弹出来的是么子,要么是”object window“ ,要么 "object" 总之就对象了,是那个对象呢?
1
|
alert( this === window); |
结果为'true' 所以了,现在调用它的对象是window了
2、
1
2
3
4
|
var test = function (){ alert( this ); } test(); |
猜猜上面弹出什么,是不是和"alert(this)" 这句一样的
1
2
3
4
|
var test = function (){ alert( this === window); } test(); |
运行上面的代码,是不是弹出了'true' ?
事情就这样完了?
要这么简单的话,何必那么多人都去论述这个鸟了?
3、
再来
1
2
3
4
|
var test = function (){ alert( this === window); } new test(); |
哎哎,这次咋成'false'呢?
记住”this 始终指向调用它的对象“,第”1、“处调用该段代码的直接对象是全局对象,即"window" ;第”2、“处虽然是函数,但是调用其的仍然是”window“(不要弄混了,函数虽然是对象,但是调用它的是另一个对象);第”3、“处,使用了”new“ 这时其实已经发生变化了,这是一个构造函数,构造函数创建时创建了一个新的空的对象,即”new test()“创建了一个新的对象,然后再由这个对象指向函数"test"中的代码,因此此时this不在是window对象,而是该构造函数创建的新对象。
4、
1
2
3
4
5
6
7
|
var test ={ 'a' :1, 'b' : function (){ alert( this === test) } } test.b(); |
有了上面的论点,这下一下子清楚了吧!
5、
1
2
3
4
5
6
7
8
|
var test ={ 'a' :1, 'b' : function (){ alert( this === test) } } var test1 = test; test1.b(); |
so, 你不会认为结果为"false"吧,错了,虽然'test1'的值为'test' 但是'test1'不还是'test'对象么,它有新产生对象,你暂且理解为引用的了,两个都指向一个对象,奉上下面一段代码为证
1
2
3
4
5
6
7
8
9
|
var test ={ 'a' :1, 'b' : function (){ alert( this === test) } } var test1 = test; test.a = 2; alert(test1.a); |
如果弹出了”1“,你来骂我
6、再整个复杂的
1
2
3
4
5
6
7
8
9
|
var test ={ 'a' :1, 'b' :{ 'b1' : function (){ alert( this === test); } } } test.b.b1(); |
这是"true"还是"false"呢?
按照上面的理论,这时"this"不再直接被'test'调用了,而是被'test.b' 调用, 奉上下面一段代码为证
1
2
3
4
5
6
7
8
9
|
var test ={ 'a' :1, 'b' :{ 'b1' : function (){ alert( this === test.b); } } } test.b.b1(); |
7、好再整个复杂点的
1
2
3
4
5
6
7
|
var test = function (){ var innerTest = function (){ alert( this === test); } innerTest(); } test(); |
你不会认为弹出"true"吧,不是按照上面的理论'innerTest'是被'test'调用的,然后'this'就指向'test'吗?
额,错就错在是谁调用的'innerTest', 其实这种函数都是'window'对象调用的,及时你嵌套一千层,调用各个函数的都是'window'对象,奉上下面这段代码为证
1
2
3
4
5
6
7
8
9
10
11
|
var test = function (){ var innerTest = function (){ alert( this === window); var innerTest1 = function (){ alert( this === window); } innerTest1(); } innerTest(); } test(); |
8、再来一段特殊的
1
2
3
4
5
6
|
var test = function (){ alert( this === window); } var test1 = { } test.apply(test1); |
这个我觉得大家都不会猜错,该函数的作用就是”调用一个对象的一个方法,以另一个对象替换当前对象“ 所以了'window' 对象已经被替代为'test1',自然为'false'了,奉上如下代码以为证明
1
2
3
4
5
6
|
var test = function (){ alert( this === test1); } var test1 = { } test.apply(test1); |
那么诸如'call'之类的也就相似了
9、再来一个原型的继承,区别于字面量的继承
1
2
3
4
5
6
7
8
9
10
11
|
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'对象了
1
2
3
4
5
6
7
|
<script> var mytest = function (context){ alert(context.getAttribute( 'id' )); alert( this === window); } </script> <div id= "test" onclick= "mytest(this)" >aaaa</div> |
看了上面的应该了解了吧,里面的'this'分别代表神马
再次讨论javascript 中的this的更多相关文章
- this,this,再次讨论javascript中的this,超全面
至于js中this这个东西,好多淫解释过了,看起来好高端的样子,不造你看懂了木有? 先引用比较高端的,“汤姆大叔“ 的,yes this 好了,下面加上鄙人比较挫的解释 论点: this 不是变量,不 ...
- JavaScript从初见到热恋之深度讨论JavaScript中的面向对象。
JavaScript中的面向对象.面向对象的三个基本特征:封装.继承.多态. 1.封装 js的封装如下 定义Person类 function Person(name,age,sex) { this.n ...
- 再次学习javascript中的參数传递
javascript中的全部函数的參数传递都是依照值传递的,做了以下測试: function addTen(num){ num +=10; return num; } var count = ...
- 通过代数,数字,欧几里得平面和分形讨论JavaScript中的函数式编程
本文是对函数式编程范式的系列文章从而拉开了与以下延续一个. 介绍 在JavaScript中,函数只是对象.因此,可以构造函数,作为参数传递,从函数返回或分配给变量.因此,JavaScript具有一流的 ...
- 再次理解javascript中的事件
一.事件流的概念 + 事件流描述的是从页面中接收事件的顺序. 二.事件捕获和事件冒泡 + 事件冒泡接收事件的顺序:
- javascript 中加’var‘和不加'var'的区别,你真的懂吗?
没看之前千万别说我是标题党,这个问题真的有好多淫都不懂!!! 大家都看了很多文章,都说避免隐式声明全局变量,就是说声明变量前必须加'var',那加了'var'和不加'var'到底有啥区别呢? 先来看一 ...
- javascript中加var和不加var的区别
Javascript是遵循ECMAScript标准下的一个产物,自然ECMAScript的标准其要遵循. 先来看下var关键字的定义和用法 var 语句用于声明变量. JavaScript 变量的创建 ...
- JavaScript中的内存泄漏以及如何处理
随着现在的编程语言功能越来越成熟.复杂,内存管理也容易被大家忽略.本文将会讨论JavaScript中的内存泄漏以及如何处理,方便大家在使用JavaScript编码时,更好的应对内存泄漏带来的问题. 概 ...
- javascript中的Array对象 —— 数组的合并、转换、迭代、排序、堆栈
Array 是javascript中经常用到的数据类型.javascript 的数组其他语言中数组的最大的区别是其每个数组项都可以保存任何类型的数据.本文主要讨论javascript中数组的声明.转换 ...
随机推荐
- 377 Combination Sum IV 组合之和 IV
Given an integer array with all positive numbers and no duplicates, find the number of possible comb ...
- 前端面试题HTML
浏览器页面有哪三层构成,分别是什么,作用是什么?
- (2)左右值初探与auto类型说明符
这篇文章的起因是下面这两段代码,出自<C++ primer 5th>中文版P62页: auto &h =42;//错误,不能为非常量引用绑定字面值 const auto & ...
- Android Retrofit+Rxjava2问题小记
网络请求有个问题就是取消操作. 在Rxjava1中,调用subscribe之后会返回Subscription,然后利用CompositeSubscription进行统一管理. 在Rxjava2中,调用 ...
- Pro ASP.NET Core MVC 6th 第三章
第三章 MVC 模式,项目和约定 在深入了解ASP.NET Core MVC的细节之前,我想确保您熟悉MVC设计模式背后的思路以及将其转换为ASP.NET Core MVC项目的方式. 您可能已经了解 ...
- 360 你妈妈知道你跟Python存在兼容问题吗?
最近在用Python2.7.6版本开发的的过程中发现了一个问题 提示:UnicodeDecodeError:'ascii' codec can't decode bytes 0xb0 刚开始以为是编码 ...
- Markdown(github)语法
<< 访问 Wow!Ubuntu NOTE: This is Simplelified Chinese Edition Document of Markdown Syntax. If yo ...
- 6.11 将分割数据转换为多值IN列表
问题 已经有了分隔数据,想要将其转换为WHERE子句IN列表中的项目.考虑下面的字符串: 7654,7698,7782,7788 要将该字符串用在WHERE子句中,但是下面的SQL语句是错误的,因为E ...
- 使用Way.EntityDB进行Entity Framework Core数据库建模
Way.EntityDB是一个基于EF Core的数据层框架,它取消了EF Core的Migration机制,因为Migration并不是通用的,比如说sql server生成的migration,如 ...
- vue+axios上传文件
单独上传文件: <input class="file" name="file" type="file" accept="im ...