再一次商讨javascript中的this

JavaScript
是一种脚本语言,因而被众几个人认为是回顾命理术数的。但是事态恰恰相反,JavaScript
援救函数式编制程序、闭包、基于原型的接轨等高端效能。本文仅采撷当中的一例:JavaScript
中的 this
关键字,深入显出的解析其在不一样情状下的意思,形成这种情况的原故以及 Dojo
等 JavaScript 工具中提供的绑定 this 的办法。能够这样说,精确明白了
JavaScript 中的 this 关键字,才算迈入了 JavaScript 那门语言的妙方。

this,this,再一次钻探javascript中的this,超周详(特出),javascriptthis

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(); 

再一次商讨javascript中的this。推断上边弹出什么,是否和”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’对象调用的,及时你嵌套1000层,调用种种函数的都以’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’分别表示神马

关于js中this那几个东西,比相当多淫解释过了,看起来好高级的模范,不造你看懂了木有?

this是Javascript语言的四个要害字。正确通晓了 JavaScript 中的 this
关键字,才算迈入了 JavaScript 那门语言的路子。

 至于js中this那几个东西,繁多淫解释过了,看起来好高档的范例,不明白你看懂了木有?

您可能感兴趣的小说:

  • Javascript this关键字采纳深入分析
  • js报错 Object doesn”t support this property or method的原故解析
  • javascript中onclick(this)用法介绍
  • js绑定事件this指向产生变动的主题素材化解形式
  • js中的this关键字详解
  • JS中的this变量的接纳介绍
  • javascript中的self和this用法小结
  • Javascript学习笔记之 函数篇(二) : this 的专业体制
  • 深远明白Javascript中this的效率域
  • javascript中的this详解
  • JS函数this的用法实例剖判
  • 浅谈javascript中this在事变中的应用

JavaScript
是一种脚本语言,由此被过三人认为是大约易学的。但是事态恰恰相反…

先引用比较高档的,“汤姆小叔“ 的, yes
this  

this 不是变量,不是性质,无法为其赋值,它一直对准调用它的对象。
比如记住最关键的一条就可以“它平昔对准调用它的靶子”
,所以找到调用this的对象,就驾驭this到底指向什么人了

先援用相比高等的,脚本之家里 的, yes
this 

好了,上边加上鄙人相比较挫的分解

它象征函数运维时,自动生成的贰个里面临象,只能在函数内部使用。
上面分八种情景,详细座谈this的用法。
场馆一:纯粹的函数调用
这是函数的最常见用法,属于全局性调用,由此this就意味着全局对象Global。

好了,上面加上鄙人比较挫的表达

 

function test(){
    this.x = 1;
    alert(this.x);
  }
test(); // 1

var test = function(){
  alert(this === window);
 }
test(); //true

论点: this 不是变量,不是性质,不可能为其赋值,它一贯对准调用它的靶子

论点: this 不是变量,不是性质,不可能为其赋值,它始终本着调用它的指标

纯粹的函数调用也许有以为上就像是复杂的:

认为还TM神舞了,只要记住最关键的一条就可以 ”它始终本着调用它的对象“
,所以找到调用this的目的,就领会this到底指向什么人了

 

var test = function(){
  var innerTest = function(){
   alert(this === test);
  }
  innerTest();
 }
test();

1、

感觉还TM太虚了,只要记住最注重的一条就能够 ”它从来对准调用它的靶子
,所以找到调用this的靶子,就领会this到底指向什么人了

您不会感觉弹出”true”吧,不是依照上边的冲突’innerTest’是被’test’调用的,然后’this’就对准’test’吗?
额,错就错在是什么人调用的’innerTest’,
其实这种函数都是’window’对象调用的,即便你嵌套一千层,调用各类函数的都以’window’对象,奉上下边这段代码为证

alert(this); 

1、

var test = function(){
     var innerTest = function(){
           alert(this === window);  //true
           var innerTest1 = function(){
                  alert(this === window);  //true
            }
           innerTest1();
     }
     innerTest(); 
}
test();

瞅瞅,弹出来的是么子,要么是”object window“ ,要么 “object”
总来说之就对象了,是特别目的啊?

alert(this);

场地二:作为对象方法的调用
函数还是可以当做有个别对象的办法调用,那时this就指这些上面对象。

alert(this === window); 

瞅瞅,弹出来的是么子,要么是”object window“ ,要么 “object”
同理可得就对象了,是十一分指标呢?

function test(){
    alert(this.x);
  }
var obj = {};
obj.x = 1;
obj.m = test; //作为对象的方法调用
obj.m(); //1

结果为’true’ 所以了,以往调用它的指标是window了

 

下边包车型地铁您不会感到结果为”false”吧!,’test1’和’test’
两个都指向四个指标,所以是true。关键记住”this 始终对准调用它的指标“。

2、

alert(this === window);
var test ={
  'a':1,
  'b':function(){
   alert(this === test)
  }
 }
var test1 = test;
test1.b();  //true
var test = function(){
  alert(this);
}
test(); 

结果为’true’ 所以了,以后调用它的指标是window了

下面是 “true” 还是 “false” 呢?

估算上边弹出如何,是还是不是和”alert(this)” 那句一样的

 

var test ={
     'a':1,
     'b':{
           'b1':function(){
           alert(this === test);
         }
     }
 }
test.b.b1();
var test = function(){
  alert(this === window);
 }
test(); 

2、

按部就班下面的反驳,那时 “this” 不再直接被 ‘test’ 调用了,而是被 ‘test.b’
调用, 奉上上面一段代码为证:

运营方面包车型大巴代码,是否弹出了’true’ ?

var test = function(){
        alert(this);
}
test();
var test ={
     'a':1,
     'b':{
             'b1':function(){
             alert(this === test.b);
          }
     }
 }
test.b.b1();  //true

事情就这么完了?

估摸上边弹出如何,是否和”alert(this)” 这句同样的

处境三 作为构造函数调用
所谓构造函数,便是经过这几个函数生成三个新对象(object)。那时,this就指那些新目的。

要那样轻巧的话,何必那么五人都去论述那几个鸟了?

 

function test(){
 this.x = 1;
}
var o = new test();
alert(o.x); // 1

3、

var test = function(){
        alert(this === window);
    }

test();

上面构造函数”new
test()“创制了三个新的空对象,然后再由那几个目的指向函数”test”中的代码,由此此时this不在是window对象,而是该构造函数创建的新对象

再来

运作方面包车型的士代码,是否弹出了’true’ ?

var test = function(){
  alert(this === window);
 }
new test();  //false
var test = function(){
  alert(this === window);
 }
new test(); 

 

情况四 apply调用

哎哎,本次咋成’false’呢?

事务就这么完了?

apply()是函数对象的贰个主意,它的职能是改造函数的调用对象,它的首先个参数就象征改造后的调用那一个函数的指标。因而,this指的正是那第多个参数。

切记”this
始终本着调用它的靶子“,第”1、“处调用该段代码的一向目的是大局对象,即”window”
;第”2、“处纵然是函数,不过调用其的照样是”window“(不要弄混了,函数固然是目的,不过调用它的是另二个对象);第”3、“处,使用了”new“
那时其实早已发生变化了,那是三个构造函数,构造函数成立时创建了二个新的空的对象,即”new
test()“创设了一个新的指标,然后再由这么些指标指向函数”test”中的代码,因而此时this不在是window对象,而是该构造函数创制的新目的。

要如此轻易的话,何必那么四个人都去论述这一个鸟了?

var x = 0;
  function test(){
    alert(this.x);
  }
var o={};
o.x = 1;
o.m = test;
o.m.apply(); //0

4、

 

apply()的参数为空时,暗许调用全局对象。由此,那时的运营结果为0,注解this指的是全局对象。
假若把最终一行代码修改为: o.m.apply(o); //1
运行结果就成为了1,阐明了那儿this代表的是对象o。
再来一段:

var test ={
  'a':1,
  'b':function(){
   alert(this === test)
  }
 }
test.b(); 

3、

var test = function(){
  alert(this === window);
 }
var test1 = {
}
test.apply(test1); //false

有了地点的论点,那下一下子亮堂了吧!

再来

apply作用正是”调用三个对象的三个艺术,以另二个目的替换当前指标“
所以了’window’
对象已经被代表为’test1’,自然为’false’了,奉上如下代码以为注明:

5、

var test = function(){
        alert(this === window);
    }

new test();
var test = function(){
     alert(this === test1);
 }
 var test1 = {
  }
test.apply(test1);  //true
var test ={
  'a':1,
  'b':function(){
   alert(this === test)
  }
 }
var test1 = test;
test1.b(); 

哎哎,这一次咋成’false’呢?

so, 你不会认为结果为”false”吧,错了,即使’test1’的值为’test’ 
可是’test1’不仍旧’test’对象么,它有新产生对象,你权且知道为引用的了,四个都针对三个对象,奉上下边一段代码为证

记住”this
始终本着调用它的指标
“,第”1、“处调用该段代码的直白指标是全局对象,即”window”
;第”2、“处固然是函数,可是调用其的依旧是”window“(不要弄混了,函数尽管是目的,不过调用它的是另一个指标);第”3、“处,使用了”new“
那时其实早已发生变化了,那是一个构造函数,构造函数创立时创建了贰个新的空的对象,即”new
test()“创设了三个新的目的,然后再由这一个目的指向函数”test”中的代码,由此此时this不在是window对象,而是该构造函数创建的新目的。

var test ={
  'a':1,
  'b':function(){
   alert(this === test)
  }
 }
var test1 = test;
test.a = 2;
alert(test1.a); 

 

假使弹出了”1“,你来骂本身

4、

6、再整个复杂的

var test ={
        'a':1,
        'b':function(){
            alert(this === test)
        }
    }

test.b();
var test ={
  'a':1,
  'b':{
   'b1':function(){
    alert(this === test);
   }
  }
 }
test.b.b1(); 

有了上边的论点,这下一下子精晓了啊!

这是”true”还是”false”呢?

 

安份守己上面包车型大巴答辩,那时”this”不再直接被’test’调用了,而是被’test.b’ 调用,
奉上上面一段代码为证

5、

var test ={
  'a':1,
  'b':{
   'b1':function(){
    alert(this === test.b);
   }
  }
 }
test.b.b1(); 
var test ={
        'a':1,
        'b':function(){
            alert(this === test)
        }
    }

var test1 = test;
test1.b();

 7、好再整个复杂点的

so, 你不会感到结果为”false”吧,错了,固然’test1’的值为’test’
 不过’test1’不照旧’test’对象么,它有新爆发对象,你暂时知道为援引的了,多少个都指向七个指标,奉上上面一段代码为证

var test = function(){
  var innerTest = function(){
   alert(this === test);
  }
  innerTest();
 }
test(); 
var test ={
        'a':1,
        'b':function(){
            alert(this === test)
        }
    }

var test1 = test;
test.a = 2;
alert(test1.a);

您不会以为弹出”true”吧,不是遵从上面包车型大巴辩驳’innerTest’是被’test’调用的,然后’this’就本着’test’吗?
额,错就错在是什么人调用的’innerTest’,
其实这种函数都以’window’对象调用的,及时你嵌套1000层,调用各种函数的都以’window’对象,奉上上面这段代码为证

假设弹出了”1“,你来骂我

var test = function(){
  var innerTest = function(){
   alert(this === window);
   var innerTest1 = function(){
    alert(this === window);
   }
   innerTest1();
  }
  innerTest();
 }
test(); 

 

8、再来一段特殊的

6、再整个复杂的

var test = function(){
  alert(this === window);
 }
var test1 = {
}
test.apply(test1); 
var test ={
        'a':1,
        'b':{
            'b1':function(){
                alert(this === test);
            }
        }
    }
test.b.b1();

本条作者觉着大家都不会猜错,该函数的效果与利益正是”调用二个目的的贰个办法,以另三个对象替换当前指标“
所以了’window’
对象已经被取而代之为’test1’,自然为’false’了,奉上如下代码认为表明

这是”true”还是”false”呢?

var test = function(){
  alert(this === test1);
 }
 var test1 = {
  }
test.apply(test1); 

遵照上边包车型大巴辩白,那时”this”不再直接被’test’调用了,而是被’test.b’ 调用,
奉上下边一段代码为证

 那么诸如’call’之类的也就相似了

var test ={
        'a':1,
        'b':{
            'b1':function(){
                alert(this === test.b);
            }
        }
    }
test.b.b1();

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(); 

7、好再整个复杂点的

10、还剩余些什么了,大概正是’dom’对象了

var test = function(){
        var innerTest = function(){
            alert(this === test);
        }
        innerTest();
    }
test();
<script>
  var mytest = function(context){
   alert(context.getAttribute('id'));
   alert(this === window);
  }
 </script>
 <div id="test" onclick="mytest(this)">aaaa</div> 

你不会认为弹出”true”吧,不是依据地点的争辩’innerTest’是被’test’调用的,然后’this’就本着’test’吗?

看了地点的应当精通了呢,里面包车型地铁’this’分别表示神马

额,错就错在是何人调用的’innerTest’,
其实这种函数都以’window’对象调用的,及时你嵌套1000层,调用各种函数的都以’window’对象,奉上上边这段代码为证

你也许感兴趣的小说:

  • js中的this关键字详解
  • javascript this用法小结
  • JS中的this变量的使用介绍
  • javascript中this的两种用法
  • 改动javascript函数内部this指针指向的两种办法
  • JS中改造this指向的秘技(call和apply、bind)
  • JS函数this的用法实例深入分析
  • Javascript对象中有关setTimeout和setInterval的this介绍
  • Javascript this指针
  • js原生态函数中使用jQuery中的
    $(this)无效的化解办法
  • JavaScript中this关键字用法实例分析
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’分别表示神马

澳门葡京 , 

好了,鄙人才疏学浅,近期就造那点,有不足之处,接待补足!

 

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

*
*
Website