（JavaScript） this的用法

vpants 发布于2019-08-19 18:21 / 1430人阅读

摘要：一全局范围全局范围中的将会指向全局对象，即。三作为对象的方法调用指向对象，即当前对象。四作为构造函数函数内部的指向创建的对象。八一个常见的坑事件绑定中回调函数的。如果中有使用，指向，即使的形式是，其中的依然指向，可用的方法解决这个问题。

一、全局范围

this // window

全局范围中的this将会指向全局对象，即window。

二、普通函数调用

function foo(x) {
  this.x = x;
}
foo(3);
(x /* or this.x */); // 3

this指向全局对象，即window。严格模式时，为undefined。

三、作为对象的方法调用

var name = "foo";  
var person = {  
  name : "bar",  
  hello : function(sth){  
    console.log(this.name + " says " + sth);  
    }  
}  
person.hello("hello"); // bar says hello

this指向person对象，即当前对象。

四、作为构造函数

var foo = new Bar(name) {
  this.name = name;
  this.age = 28;
}

函数内部的this指向创建的对象。

五、闭包（内部函数）

var name = "foo";  
var person = {  
  name : "bar",  
  hello : function(sth){  
    var sayhello = function(sth) {
      console.log(this.name + " says " + sth);
    };
    sayhello(sth)  
  }  
}  
person.hello("hello"); // foo says hello

this.name为foo，所以this指向全局变量，即window。所以，一般将this作为变量保存下来。代码如下：

var name = "foo";  
var person = {  
  name : "bar",  
  hello : function(sth){  
    var self = this;
    var sayhello = function(sth) {
      console.log(self.name + " says " + sth);
    };
    sayhello(sth)  
  }  
}  
person.hello("hello"); // bar says hello

六、使用call与apply设置this

fun.apply(thisArg, [argsArray])
fun.call(thisArg[, arg1[, arg2[, ...]]])

函数绑定到thisArg这个对象上使用，this就指向thisArg。

七、总结

当函数作为对象的方法调用时，this指向该对象。

当函数作为淡出函数调用时，this指向全局对象（严格模式时，为undefined）。

构造函数中的this指向新创建的对象。

嵌套函数中的this不会继承上层函数的this，如果需要，可以用一个变量保存上层函数的this。

一句话总结：如果在函数中使用了this，只有在该函数直接被某对象调用时，该this才指向该对象。

八、一个常见的坑

事件绑定中回调函数的this。

addEventListener(elem, func, false);

如果func中有使用this，this指向elem，即使func的形式是obj.func，其中的this依然指向elem，可用var self = this;的方法解决这个问题。

参考：谈谈Javascript的this指针（作者：Aaron）

海外云主机私有云 this的用法 javascript的this this用法 javaScript中的this

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/79497.html

快速理解JavaScript中this的用法与陷阱

摘要：赫敏第三行的是在最外层执行，也就是在全局对象下。而在对象下声明了属性，就相当于罗恩，输出的当然就是罗恩。之所以写这篇文章，是为了我下一篇文章做铺垫快速理解中和的用法敬请期待 this是 JS 这门语言的魅力之一——灵活方便又难以捉摸，即使是有经验的程序员，如果不仔细也有可能搞错，关于this的用法也成为许多公司的经典面试题。如果你写过 Java ，你可能接触过this——一般指向当前...

Kylin_Mountain 2019-08-19 17:48 评论0 收藏0
关于javascript中的bind、call、apply等函数的用法

摘要：其实它们都很简单，但是在处理一些与相关的函数的时候，用来改变函数中的指向，却是必不可少的工具，所以必须掌握好它们的用法。关于javascript中的bind、call、apply等函数的用法我GitHub上的菜鸟仓库地址：点击跳转查看其他相关文章文章在我的博客上的地址：点击跳转前面的文章已经说到this的指向了，那么这篇文章就要说一说和this相关的三个...

lordharrd 2019-08-22 10:53 评论0 收藏0
JavaScript 函数作用域、执行环境(this)、call、apply、bind 的用法

摘要：什么是函数的作用域函数作用域在中，作用域为可访问变量，对象，函数的集合。函数作用域作用域在函数内修改。与函数又有什么关系呢对象是在运行时基于函数的执行环境绑定的。什么是函数的作用域函数作用域：在 JavaScript 中，作用域为可访问变量，对象，函数的集合。JavaScript 函数作用域: 作用域在函数内修改。 this 与函数又有什么关系呢？ this对象是在运行时基于函数的...

1fe1se 2019-08-26 13:47 评论0 收藏0
JavaScript prototype原型用法

摘要：使用原型属性属性允许您向对象构造函数添加新属性属性还允许您向对象构造函数添加新方法更好的原型对象的教程 JavaScript对象原型所有JavaScript对象都从原型继承属性和方法。 js JavaScript 对象 function Person(first, last, age, eye) { this.firstName = fi...

siberiawolf 2019-08-26 10:20 评论0 收藏0
Javascript的this用法

摘要：不过，匿名函数的执行环境具有全局性，因此其通常指向。可行原因是这里的赋值实际上把匿名函数当作表达式处理了，表达式后面可以加括号。 this是Javascript语言的一个关键字。它代表函数运行时，自动生成的一个内部对象，只能在函数内部使用。比如，　　function test(){　　　　this.x = 1;　　}随着函数使用场合的不同，this的值会发生变化。有一个总的原则，那就是...

ad6623 2019-08-19 18:19 评论0 收藏0