js中this的用法实例解析,js中this对象用法解析

作者: 韦德国际1946国际网址  发布:2019-06-02

this对象是在函数运营时,基于函数的实施意况绑定的。

js中this对象用法深入分析,jsthis对象用法

this对象是在函数运维时,基于函数的实践情形绑定的。

实际那句话的九华山真面目就是,什么人调用了函数,this就针对何人

切实的来说,通常有以下三种状态:

大局函数

在大局意况中,this指向Window

//例子1
 function A() {
 console.log(this)
 }
 A();//Window

上边的例子很简短,函数A在大局情形中施行,也正是大局对象Window调用了函数。此时this指向Window

对象方法

作为目的方法调用时,this指向调用该办法的靶子

//例子2
var b = {
 getThis:function(){
  console.log(this)
 }
}
b.getThis()//b

到这里大家举的例证都相比较简单易懂,接下去来三个有趣的:

//例子3
 var c = {
 getFunc:function(){
  return function(){
  console.log(this)
  }
 }
 }
 var cFun = c.getFunc()
 cFun()//Window

其1例子和前1个例证不平等,运营c.getFunc()时,首先重临的是多少个无名氏函数,咱们将以此函数赋值给cFun,接着在全局意况中调用了cFun(),所以此时this指向的要么Window。

万一我们终将要让此处再次来到的是c对象啊?在起头大家说过,this对象是在函数实行时规定的,在例子叁中,实践c.getFunc()时,this对象指向的依然c,所以大家只要维持住这些this就好了,对地点的代码稍微退换:

//例子4
 var c = {
 getFunc:function(){
  var that = this //在这里保留住this
  return function(){
  console.log(that)
  }
 }
 }
 var cFun = c.getFunc()
 cFun()//c

那也正是我们平常能够在有的代码中来看var self = this或许var that = this之类的来头了。

call和apply

那会儿this对象一般指向函数中钦点的this值(注意这里的一般二字,考试要考的)

call和apply算是沉滓泛起,但要么有个别介绍下,怕新校友只怕没接触过(其实是为了凑点字数),拿call来讲,语法是这样的

fun.call(thisArg, arg1, arg2, ...)

以此艺术怎么用吧,看下边包车型地铁例证:

//例子5
var d = {
 getThis:function(){
  console.log(this)
 }
}
var e = {
 name:'e'//(给e写个`name`属性只是因为觉得孤零零的太难看了~~)
}
d.getThis.call(e)//e

在此地我们就能够看看call函数的意趣了:钦命贰个指标o1去调用任何对象o2的章程,此时this对象指向o一

好了,那为何前边大家说一般呢?因为,这里的thisArg是足以钦点为null和undefined的。请看:

//例子6
var d = {
 getThis:function(){
  console.log(this)
 }
}
 d.getThis.call(null)//Window
 d.getThis.call(undefined)//Window

那会儿的this指向全局对象Window

箭头函数

es6中的箭头函数今后也用的相比频繁,可是有个须要留意的点是:

函数体内的this对象,正是概念时所在的对象,而不是运用时所在的指标。

实则出现这种景况的根本原因是:箭头函数未有this对象,所以箭头函数的this正是外围代码的this

//例子7
 var f = {
  getThis:()=>{
   console.log(this)
  }
 }
 f.getThis()//Window

js中this的用法实例解析,js中this对象用法解析。以此事例和前边例子2是主导雷同的,只是把常备函数改写成箭头函数,不过此时的this对象已经针对了外围的Window。

设想到那点只怕倒霉领会,大家再看多少个例证:

//例子8
 var g = {
 getThis:function(){
  return function(){console.log(this)}
 }
 }
 var h = {
 getThis:function(){
  return ()=> console.log(this)
 }
 }
 g.getThis()()//Window
 h.getThis()()//h

其壹例子里,g的getThis写法就和事先的事例三等同,由于函数在大局情形中运转,所以那时候this指向Window;h的getThis使用了箭头函数,所以this指向了外围代码块的this所以,此时this指向的是h。

总结

相似意况下this对象指向调用函数的目的,全局处境中推行函数this对象指向Window

在call和apply函数中this指向内定的靶子,假使钦定的对为undefined或然null,那么this对象指向Window

在箭头函数中,this对象等同于外层代码块的this

接下来仍然是历次都同样的最后,假使剧情有荒唐的地点应接提议;假如对您有辅助,迎接点赞和收藏,感激你对帮客之家的辅助。

this对象是在函数运转时,基于函数的实行情形绑定的。 其实那句话的敬亭山真面目就是,什么人调用了函数,thi...

本文实例分析了js中this的用法。分享给大家供我们参谋。具体深入分析如下:

js中this的用法实例剖析

韦德国际1946国际网址, 实例壹:第3种调用this的主意——以函数方式调用。它表示全局对象window

 代码如下:

<script type="text/javascript">
function t(){
 alert(this);//这里this表示window对象。
}
t();
</script>

实例二:第二种调用this的方式——以目的属性的样式调用。它代表该对象。实例中onclick为p成分对象的特性

代码如下:

<html>
<head>
<script type="text/javascript">
function t(){
 alert(this);
 this.style.background = 'green';
}
window.onload = function(){
 document.getElementById('eng').onclick = t;
}
</script>
</head>
<body>
<p id="eng">abcd</p>
</body>
</html>

实例叁:第三种调用this的秘籍——以构造器的章程调用。

代码如下:

<script type="text/javascript">
function dog(){
 this.legs = 4;
 this.bark = function(){
  alert("汪汪...");
 }
}
var wangcai = new dog();//成立对象的格局。new 函数名();
wangcai.bark();
</script>

说明:
(1)要是一向调用dog()函数,而不是以创设对象的主意调用,则一定于第三种调用了,即this代表着全局对象window。
(二)js中并未有类的概念,可是有指标的定义;
(三)对象的开创能够行使var = objName{name:'abc',age:40}这种方法开创,也足以透过构造函数来创立;
(四)什么是构造函数:当二个普普通通函数以“new 函数名()”的措施调用时,此函数就充当构造函数。

 

实例四:第捌种调用this的方法——call和apply情势

代码如下:

<html>
<head>
<script type="text/javascript">
window.onload = function(){
 var d = document.getElementById('hi');
 if(hi.addEventListener){//chrome 和 firefox
  hi.addEventListener('click',function(){alert(this.id)},false);//w3c模型中,this指向DOM对象。this.id结果为hi
 }else{// ie
  hi.attach伊夫nt('onclick',function(){alert(this.id)});//ie八及ie捌以下,这里this指向全局对象window。结果this.id结果为undefined
 }
}
</script>
</head>
<body>
<p id="hi">hello world</p>
</body>
</html>

实例壹:第一种调用this的方式以函数情势调用。它象征全局对象window 代码如下: script type=text/javascript function t(){ ale...

实际上那句话的本色正是,何人调用了函数,this就本着什么人

实例1:第二种调用this的措施——以函数情势调用。它象征全局对象window

连锁小说

有关寻觅:

后天看甚

搜寻技艺库

再次回到首页

  • asp.net模板引擎Razor调用外部方法用法实例
  • ASP.NET中母版页和shtml实例入门
  • ASP.NET中Application全局对象用法实例浅析
  • ASP.NET中Global和URLReWrite用法
  • ASP.NET中ServerPush用法实例深入分析
  • 浅谈JavaScript中的Math.atan()方法的运用

连锁频道: HTML/CSS  HTML5  Javascript  jQuery  AJax教程  前端代码  正则表明式  Flex教程  WEB前端教程  

实际的来讲,经常有以下二种景况:

复制代码 代码如下:

帮客商议

全局函数

<script type="text/javascript">
function t(){
 alert(this);//这里this表示window对象。
}
t();
</script>

在全局景况中,this指向Window

实例贰:第一种调用this的办法——以目的属性的情势调用。它象征该目的。实例中onclick为p成分对象的属性

//例子1
 function A() {
 console.log(this)
 }
 A();//Window

复制代码 代码如下:

上边的例证很简单,函数A在大局蒙受中施行,也正是全局对象Window调用了函数。此时this指向Window

<html>
<head>
<script type="text/javascript">
function t(){
 alert(this);
 this.style.background = 'green';
}
window.onload = function(){
 document.getElementById('eng').onclick = t;
}
</script>
</head>
<body>
<p id="eng">abcd</p>
</body>
</html>

目的方法

实例三:第两种调用this的主意——以构造器的诀窍调用。

作为对象方法调用时,this指向调用该办法的指标

复制代码 代码如下:

//例子2
var b = {
 getThis:function(){
  console.log(this)
 }
}
b.getThis()//b

<script type="text/javascript">
function dog(){
 this.legs = 4;
 this.bark = function(){
  alert("汪汪...");
 }
}
var wangcai = new dog();//创建对象的办法。new 函数名();
wangcai.bark();
</script>

到那边大家举的事例都比较轻易易懂,接下去来3个风趣的:

说明:
(一)假设平素调用dog()函数,而不是以创制对象的格局调用,则一定于第3种调用了,即this代表着全局对象window。
(二)js中尚无类的概念,不过有对象的定义;
(三)对象的创导可以选用var = objName{name:'abc',age:40}这种办法开创,也得以经过构造函数来创设;
(肆)什么是构造函数:当三个日常函数以“new 函数名()”的点子调用时,此函数就担当构造函数。

本文由韦德国际1946发布于韦德国际1946国际网址,转载请注明出处:js中this的用法实例解析,js中this对象用法解析

关键词: