Javascript中this的用法详解

前段时间面试的时候使用了this,面试官说自家的明白有一点点偏差,回来看了下书和有个别博客,做了点测量试验,开掘本身的知道的确有误

Javascript中this的用法详解,javascriptthis

上7个月面试的时候利用了this,面试官说自家的精晓有点偏差,回来看了下书和部分博客,做了点测量检验,开掘自个儿的驾驭的确有误

1.全局变量

应该是最常用的呢,函数中调用二个this,这里实在便是全局变量

var value="0"; function mei(){ 
 var value="1"; 
 console.log(this.value); //0  console.log(value);   //1 } 
mei();

输出0正是因为this指向的是全局

2.构造函数

那是自个儿比较熟识的用法,构造函数中用this,new三个新的靶子后this就本着了这一个新的对象

var value="window"; function mei(){ 
 this.value=1; 
 this.show=function(){ 
  console.log(this.value) 
 } 
} var m=new mei(); 
console.log(m.value);  //1 m.show();        //1

能够看来输出的是1而并不是window,可知由于构造函数,这里的this已经指向新的靶子了而不是全局变量

3.call和apply

直白借用作者的call和apply的博客中的例子

 var p="456"; 
 function f1(){ 
  this.p="123"; 
 } 
 function f2() { 
  console.log(this.p); 
 } 
 f2();       //456  f2.call(f1());  //123  f2.apply(f1());  //123

先是行输出456很好驾驭,this指向全局,前面包车型大巴123是因为运用了call或然apply后,f第22中学的this指向了f1,而f第11中学的p为123,具体表达直接戳那篇博文

4.函数看作有些对象的法子调用(作者阴差阳错的地点)

即时让笔者写二个目的有多少个格局,作者脑子一抽定义了个全局变量,然后在目的的法子里用this调用,面试官问笔者那一个this是怎样?小编说应该是window,因为这种方式自身用的少,以为唯有new也许call才会变动this的对准,他就说邪乎,让自个儿回去自身看看,今后试了试,作者还真是错了,贴代码

var value="father"; function mei(){} 
mei.value="child"; 
mei.get=function(){console.log(this.value)}; 
mei.show=function(){console.log(value)}; 
mei.get();   //child mei.show();  //father

是因为get是作为mei的方法调用的,由此这里的this指向了mei.value所以输出child

有关father我是这么敞亮的,show指向的函数是概念在全局情状下的,由于效果域链,在show中从不找到value,于是就去定义他的条件中找,那就找到了大局的value,假若这里有掌握错误的话希望有意中人可以提出来!

Javascript中this的用法详解。(转发微信上见到的很棒的一篇有关this的写法,分享给我们
http://mp.weixin.qq.com/s/ksqtCd8ouxU-cVc\_HnA4Aw)
也足以看阮一峰的那篇:
http://www.ruanyifeng.com/blog/2010/04/using\_this\_keyword\_in\_javascript.html
再有51博客上观望的很详细的讲解:
http://weizhan.51cto.com/article/view/58eb2924f2dd872e48200541
信任这几篇我们看看应该会有更浓厚的敞亮。
您大概遇见过那样的 JS 面试题:

大家在写js时,非常是用到回调函数时,平日会发觉this指代的指标总是恐怕脱离本身的思绪而产生退换。面向对象语言的特点告诉大家this始终代表它的调用者,而在js中回调函数中内部的this默许指向全局情状即最后上下文,所以重重时候大家不作this对象的宣示绑定,就能发出指向错误,找不到大家想要的值。

1.全局变量

javascript中this的用法,此处this指什?

$(“:text”) 获取多个相配input
blur注册事件时,会枚举各种input

$(this)枚举到的input
 

var obj = {
  foo: function(){
    console.log(this)
  }
}

var bar = obj.foo
obj.foo() // 打印出的 this 是 obj
bar() // 打印出的 this 是 window
  • 函数评释式,未有return三个目的,此时函数内的this也正是大局window

应当是最常用的呢,函数中调用一个this,这里其实就是全局变量

JavaScript脚本中的this用法详细申明?

this语句用于引用当前目的,并得以引用当前目的相应的属性。this语句的行使限制必须局限于函数范围内惑它的调用函数范围内。语法位:this[.属性]
一旦未包罗属性参数,则传递当前指标。不过为了赢得八个结果,提出为语句附上有效的习性。
例如: 简写啊
<function abc(name)
{
alert(“欢迎”+name);
}
<input type=”t1″ name=”t1″ size=20>
<input type=”button” value=”单击”
onclick=”abc(this.form.t1.value)”>
如若您在文本框内写上“123” 那样就能弹出对话框 “招待123”。
 

前些时间面试的时候使用了this,面试官说自身的知情有一点偏差,回来看了下书和有些博客,做了点测量试验…

请解释末了两行函数的值怎么区别。

var value="0"; function mei(){ 
 var value="1"; 
 console.log(this.value); //0  console.log(value);   //1 } 
mei();

——-

function test(){
    this.a = 1;
    console.log(a);
}
test(); //1
console.log(a);  //1
console.log(this.a); //1
console.log(window.a); //1

//局部变量
function test(){
    var a = 1;
    console.log(a);  //1
    console.log(this.a); //undefined
}
test();

输出0正是因为this指向的是全局

初学者关于 this 的通晓一向很模糊。明日那篇小说将在二次讲掌握了。

  • 用作对象方法调用,this指代上司对象

2.构造函数

同时那么些解释,你在别的地方看不到。看懂那篇文章,全部有关 this
的面试题,都以小菜。

那是小编比较熟稔的用法,构造函数中用this,new贰个新的对象后this就针对了那几个新的指标

函数调用

function test(){
    console.log(this.x);
}
var o = {};
o.x = 1;
o.m = test;
o.m(); // 1
var value="window"; function mei(){ 
 this.value=1; 
 this.show=function(){ 
  console.log(this.value) 
 } 
} var m=new mei(); 
console.log(m.value);  //1 m.show();        //1

率先须要从函数的调用开头讲起。

  • 用作构造函数调用,this指代new出的靶子。构造函数一般首字母大写,须要用new来声称对象,分歧普通function

能够看到输出的是1而并不是window,可知由于构造函数,这里的this已经针对新的对象了实际不是全局变量

JS(ES5)里面有二种函数调用情势:

3.call和apply

func(p1, p2)
obj.child.method(p1, p2)
func.call(context, p1, p2) // 先不讲 apply
var x = 2;  
function Test() {     
    this.x = 1;  //为了表明这时this不是全局对象
}  
var o = new Test();  
console.log(o.x); // 1
console.log(this.x); //2

直白借用本人的call和apply的博客中的例子

貌似,初学者都明白前三种样式,况且感到前二种情势「优于」第三种格局。

  • 函数有return对象的时候,this指向构造函数对象自小编。return再次来到多少个值,通过对象的天性访谈。

相关文章