js this详解
2016-03-07 15:42
423 查看
this是js中的一个难点,但同时也是里面非常有价值的东西。
首先必须要说的是,this的指向在函数定义的时候是确定不了的,只有函数执行的时候才能确定this到底指向谁,实际上this的最终指向的是那个调用它的对象。
很明显这个this会指向window,因为this只会出现在5中情况中。
1 在全局中使用 this指向全局对象
2 在函数中使用 this也指向全局对象
3 方法调用 其实就是对象调用方法,方法中的this指向调用它的对象
4 构造函数
当使用new关键字将Test实例化后,this就会指向实例化后的对象---test,然后就和对象调用属性一样了。
5 然后就是经过了call applay bind方法显示的设置了this,如果有不了解的可以看一下这篇文章。
上面这些主要是参加JavaScript私密花园中this的工作原理。
下面来看一些特殊情况
在这里是“DJL箫氏”而不是“风箫”,则说明this总是指向调用它的上一级对象。
当我们将test对象内部的a属性注释掉时,这是就会得到undefined,这就更加能说明,this只能指向调用它的离它最近的一级对象。
在这里this指向的并不是Foo对象而是window对象,如果要得到Foo对象,我们可以加上上面注释的代码。(这里感觉是最诡异的地方)
下面如果碰到return呢,其实原理和上面差不多
//return function b(){}; //undefined
//return 1; //DJL箫氏
//return undefined; //DJL箫氏
//return null; //DJL箫氏
很明显会是undefined,因为你最后返回的对象中没有a这个属性。但是当return的是1、undefined、null时,得到的确是“DJL箫氏”。什么意思呢。
如果返回值是一个对象,那么this指向的就是那个返回的对象,如果返回值不是一个对象那么this还是指向函数的实例。还有一点就是虽然null也是对象,但是在这里this还是指向那个函数的实例,因为null比较特殊。
在这里变量b实际上是一个函数,而调用它的是window对象,所以这个应该是很好理解的。
知识点补充:
1.在严格版中的默认的this不再是window,而是undefined。
2.new操作符会改变函数this的指向问题,虽然我们上面讲解过了,但是并没有深入的讨论这个问题,网上也很少说,所以在这里有必要说一下。
为什么this会指向a?首先new关键字会创建一个空的对象,然后会自动调用一个函数apply方法,将this指向这个空对象,这样的话函数内部的this就会被这个空的对象替代。
3 在对象的字面声明语法中,
附:this中的工作原理
JavaScript中this指针指向的彻底理解
JavaScript中的this陷阱的最全收集--没有之一
首先必须要说的是,this的指向在函数定义的时候是确定不了的,只有函数执行的时候才能确定this到底指向谁,实际上this的最终指向的是那个调用它的对象。
var a="DJL箫氏"; function test(){ alert(this);//window alert(this.a);//DJL箫氏 } test();
很明显这个this会指向window,因为this只会出现在5中情况中。
1 在全局中使用 this指向全局对象
alert(this) //window
2 在函数中使用 this也指向全局对象
function test(){ alert(this);//window } test();
3 方法调用 其实就是对象调用方法,方法中的this指向调用它的对象
var test={ a:"DJL箫氏", demo:function(){ alert(this.a);//DJL箫氏 } } test.demo();
4 构造函数
function Test(){ this.a="DJL箫氏"; } var test= new Test(); alert(test.a);//DJL箫氏
当使用new关键字将Test实例化后,this就会指向实例化后的对象---test,然后就和对象调用属性一样了。
5 然后就是经过了call applay bind方法显示的设置了this,如果有不了解的可以看一下这篇文章。
上面这些主要是参加JavaScript私密花园中this的工作原理。
下面来看一些特殊情况
var a="风箫"; var test={ a:"DJL箫氏", demo:function(){ alert(this.a);//DJL箫氏 } } window.test.demo();
在这里是“DJL箫氏”而不是“风箫”,则说明this总是指向调用它的上一级对象。
var a="风箫"; var test={ //a:"DJL箫氏", demo:function(){ alert(this.a);//undefined } } window.test.demo();
当我们将test对象内部的a属性注释掉时,这是就会得到undefined,这就更加能说明,this只能指向调用它的离它最近的一级对象。
var Foo={}; Foo.method = function() { // var $this=this; function test() { // this 将会被设置为全局对象 alert(this); //alert($this); } test(); } Foo.method();
在这里this指向的并不是Foo对象而是window对象,如果要得到Foo对象,我们可以加上上面注释的代码。(这里感觉是最诡异的地方)
下面如果碰到return呢,其实原理和上面差不多
function Demo(){ this.a="DJL箫氏"; return {};
//return function b(){}; //undefined
//return 1; //DJL箫氏
//return undefined; //DJL箫氏
//return null; //DJL箫氏
} var demo=new Demo(); alert(demo.a);//undefined
很明显会是undefined,因为你最后返回的对象中没有a这个属性。但是当return的是1、undefined、null时,得到的确是“DJL箫氏”。什么意思呢。
如果返回值是一个对象,那么this指向的就是那个返回的对象,如果返回值不是一个对象那么this还是指向函数的实例。还有一点就是虽然null也是对象,但是在这里this还是指向那个函数的实例,因为null比较特殊。
function test(){ this.a="DJL"; return function alert1(){ alert(this); } } var b=new test(); alert(typeof b) //function b(); //window
在这里变量b实际上是一个函数,而调用它的是window对象,所以这个应该是很好理解的。
知识点补充:
1.在严格版中的默认的this不再是window,而是undefined。
2.new操作符会改变函数this的指向问题,虽然我们上面讲解过了,但是并没有深入的讨论这个问题,网上也很少说,所以在这里有必要说一下。
为什么this会指向a?首先new关键字会创建一个空的对象,然后会自动调用一个函数apply方法,将this指向这个空对象,这样的话函数内部的this就会被这个空的对象替代。
function fn(){ this.num = 1; } var a = new fn(); console.log(a.num); //1
3 在对象的字面声明语法中,
this不能用来指向对象本身。 因此
var obj = {me: this}中的
me不会指向
obj,因为
this只可能出现在上述的五种情况中。 这个例子中,如果是在浏览器中运行,
obj.me等于
window对象。
附:this中的工作原理
JavaScript中this指针指向的彻底理解
JavaScript中的this陷阱的最全收集--没有之一
相关文章推荐
- js encodeURI方法认识
- 跟我一起学extjs5(17--Grid金额字段单位MVVM方式的选择)
- JS第七天
- 正则表达式匹配用户密码
- JavaScript学习(零)——JavaScript 入门(转载:非常好,分享给大家)
- js 函数的传值问题
- JavaScript之变量、作用域
- JS代码片段:日期格式化
- IE执行ajax时,返回JSON出现下载时怎么解决,需要配置
- JS中的!=、== 、!==、===的用法和区别。
- javascript操作cookie
- 通过本地加载ga.js文件提高Google Anlytics性能
- JavaScript 字符串操作
- JSON数据的格式和解析(使用GSON)入门
- js数组循环遍历数组内所有元素的方法
- JavaScript数组常用操作
- JS的className,字体放大缩小
- 原型与原型链
- Javascript 连续赋值运算
- Zero Clipboard js+swf实现的复制功能使用方法