美文网首页
JavaScript中this的用法

JavaScript中this的用法

作者: stoneBar | 来源:发表于2016-12-20 20:26 被阅读0次

今天去面试,再次被面试官要求解释一下this的用法。但是很遗憾,我对this的理解只局限与把它当成全局变量。因此,回来之后,决定亡羊补牢,搞清楚this的用法。
1.全局代码中的this

alert(this); //window

2.普通函数中的this

function test(){ this.x = 2; }; test(); alert(x); //全局变量x=2

这里this指向了全局对象,即window。在严格模式中,则是undefined。
为了证明是全局变量的x,将代码更改如下:

var x = 1; funcion test(){ alert(this.x) ; } test(); alert(x); //全局变量x=1

3.作为对象的方法调用

var name = "clever coder"; var person = { name : "foocoder", hello : function(sth){ console.log(this.name + " says " + sth); } } person.hello("hello world");

输出 foocoder says hello world。this指向person对象,即当前对象。
4.对于对象方法的内部函数

var name = "clever coder"; var person = { name : "foocoder", hello : function(sth){ var sayhello = function(sth) { console.log(this.name + " says " + sth); }; sayhello(sth); } } person.hello("hello world");//clever coder says hello world

在内部函数中,this没有按预想的绑定到外层函数对象上,而是绑定到了全局对象。这里普遍被认为是JavaScript语言的设计错误,因为没有人想让内部函数中的this指向全局对象。一般的处理方式是将this作为变量保存下来,一般约定为that或者self:

var name = "clever coder"; var person = { name : "foocoder", hello : function(sth){ var that = this; var sayhello = function(sth) { console.log(that.name + " says " + sth); }; sayhello(sth); } } person.hello("hello world");//foocoder says hello world

5.对于构造函数中的this
所谓构造函数,就是通过这个函数生成一个新对象(object)。这时,this就是指这个新对象。

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

运行结果为1。为了表明这时this不是全局对象,对代码做一些改变:

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

运行结果为2,表明全局变量x的值根本没变。
5.apply的应用
apply()是函数对象的一个方法,它的作用是改变函数的调用对象,它的第一个参数就表示改变后的调用这个函数的对象。因此,this指的就是这第一个参数。

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

apply()的参数为空时,默认调用全局对象。因此,这时的运行结果为0,证明this指的是全局对象。
如果把最后一行代码修改为

o.m.apply(o); //1

运行结果就变成了1,证明了这时this代表的是对象o。

参考文档:
阮一峰 Javascript的this用法
详解JavaScript中的this

相关文章

  • JavaScript中this用法

    this this是 JavaScript 语言的一个关键字。 它是函数运行时,在函数体内部自动生成的一个对象,只...

  • JavaScript中的this用法

    this在全局中调用时指向的是全局对象。this在函数中调用时指向调用函数的对象,调用函数的在不同情况下有 thi...

  • Javascript中this的用法

    我们在写js时,特别是用到回调函数时,经常会发现this指代的对象总是可能脱离自己的思路而发生改变。面向对象语言的...

  • javascript中的this用法

    前言 this是Javascript语言的一个关键字。它代表函数运行时,自动生成的一个内部对象,只能在函数内部使用...

  • JavaScript中this的用法

    今天去面试,再次被面试官要求解释一下this的用法。但是很遗憾,我对this的理解只局限与把它当成全局变量。因此,...

  • JavaScript中this的用法

    this是 JavaScript 语言的一个关键字。 它是函数运行时,在函数体内部自动生成的一个对象,只能在函数体...

  • JavaScript中forEach的用法相关

    JavaScript中forEach的用法相关 首先说下JavaScript的forEach的标准格式。为数组中的...

  • JavaScript学习(2)call&apply&am

    javascript学习(2)call&apply&bind&eval用法 在javascript中存在这样几种特...

  • JS中this的用法详解

    关键词:JavaScript this 前言 本文总结了几类JavaScript中,this的用法,同大家一起分...

  • 理解Promise in JavaScript

    Promise是JavaScript中的一个核心概念,初学JavaScript,对Promise的概念和用法都比较...

网友评论

      本文标题:JavaScript中this的用法

      本文链接:https://www.haomeiwen.com/subject/iglrsttx.html