JS之this应用详解

目录

1、 this作为全局变量
2、 作为对象方法的调用
3、 作为构造函数调用
4、 apply调用

this是Javascript语言的一个关键字。它代表函数运行时，自动生成的一个内部对象，只能在函数内部使用.随着函数使用场合的不同，this的值会发生变化。但是有一个总的原则，那就是this指的是，调用函数的那个对象。

1、 this作为全局变量

var name = "The Window";
var object = {
　　　　name : "My Object",
　　　　getNameFunc : function(){
　　　　　　return function(){
　　　　　　　　return this.name;
　　　　　　};
　　　　}
};
console.log(object.getNameFunc()()); //The Window

2、 作为对象方法的调用

函数还可以作为某个对象的方法调用，这时this就指这个上级对象。

function test2(){
    console.log("x的值",this.x);
　　}
　　var o = {};
　　o.x = 1;
　　o.m = test2;
　　o.m(); // 1

当方法在某个对象的内部时，此时this就指的是此方法的上级对象，由此可知最外层方法的上级对象是window全局对象

 3、 作为构造函数调用

所谓构造函数，就是通过这个函数生成一个新对象（object）。这时，this就指这个新对象。

function test3(){
　　　　this.x = 1;
　　}
　　var o = new test3();
　　console.log("x的值",o.x);// 1

 4、 apply调用

apply()是函数对象的一个方法，它的作用是改变函数的调用对象，它的第一个参数就表示改变后的调用这个函数的对象。因此，this指的就是这第一个参数。

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

apply()的参数为空时，默认调用全局对象。因此，这时的运行结果为0，证明this指的是全局对象。

如果把最后一行代码修改为o.m.apply(o); //1

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

注：在通常的函数调用中，this是由激活上下文代码的调用者来提供的，即调用函数的父上下文(parent context )。this取决于调用函数的方式。

为了在任何情况下准确无误的确定this值，有必要理解和记住这重要的一点。正是调用函数的方式影响了调用的上下文中的this值，没有别的什么（我们可以在一些文章，甚至是在关于javascript的书籍中看到，它们声称：“this值取决于函数如何定义，如果它是全局函数，this设置为全局对象，如果函数是一个对象的方法，this将总是指向这个对象。–这绝对不正确”）。继续我们的话题，可以看到，即使是正常的全局函数也会被调用方式的不同形式激活，这些不同的调用方式导致了不同的this值。

function foo() {
  alert(this);
}
 
foo(); // global
 
alert(foo === foo.prototype.constructor); // true
 
// 但是同一个function的不同的调用表达式，this是不同的
 
foo.prototype.constructor(); // foo.prototype

有可能作为一些对象定义的方法来调用函数，但是this将不会设置为这个对象。

var foo = {
  bar: function () {
    alert(this);
    alert(this === foo);
  }
};
 
foo.bar(); // foo, true
 
var exampleFunc = foo.bar;
 
alert(exampleFunc === foo.bar); // true
 
// 再一次，同一个function的不同的调用表达式，this是不同的
 
exampleFunc(); // global, false

参考地址：

深入理解JavaScript系列（13）：This? Yes,this!

Javascript的this用法

+

(^_^)打赏作者喝个咖啡(^_^)

作者：风雨后见彩虹

如果觉得文章写得不错或对您有用，请随意打赏。点击文章右下角“喜欢”二字，您的支持是我最大的鼓励

打赏支持

我要收藏

返回顶部

跳到底部