js中this的指向问题

this 指的是当前对象。
如果在全局范围内使用 this,则指向当前页面 window;
如果在函数中使用this,则 this 指向什么是根据当前函数在什么对象上调用所决定的,意思就是函数中的 this 是在调用时候决定的,而不是函数定义时。

我们可以使用 call 和 apply 改变函数中 this 的具体指向。

function foo() {
    console.log(this.frute);
}
// 定义一个全局变量,等同于window.frute = "banana";
var frute = "banana";
// 此时相当于 window 调用foo函数,所以foo中的this指向window;
foo();          //   "banana"
window.foo()    //   "banana"
 
var obj = {
    frute : "apple",
    foo : foo    
};
// 此时相当于 obj 调用foo函数,所以foo中的this指向 obj;
obj.foo();  // "apple"

apply 和 call 可以用来改变this的指向,如下:

function foo(){
      console.log(this.frute);
}
// 定义一个全局变量,等同于window.frute = "banana";
var frute = "banana";
var obj = {
      frute : "apple"
};    
foo.apply(window);  // "banana";
foo.call(obj);      // "apple";

在JavaScript中,函数也是对象,为函数定义属性,属性也可为函数。

function foo(){
    if(this === window){
         console.log("this is window");
    }   
};
// 函数foo也是对象,可以为对象定义属性,然后属性为函数
foo.boo = function(){
    if(this === foo){
         console.log("this is foo");       
    }else if(this === window){
         console.log("this is window");
    }
};
// 等价于 window.foo();
foo();  // "this is window";
// 可以看到函数中this的指向调用函数的对象
foo.boo();  // "this is foo";
// 可以使用call改变函数中this指向
foo.boo.apply(window); // "this is window";

对象中嵌套函数的this指向,不是当前对象,而是window。

var name = "window";
var obj = {
    name: "obj",
    getName: function(){
        console.log(this.name);
        return function() {
            console.log(this.name);
        } 
    }
}
obj.getName()();  // "obj"  "window"

有三种方法可以改变 return 函数内部this的指向问题。

  1. bind() 方法
var name = "window";
var obj = {
    name: "obj",
    getName: function(){
        console.log(this.name);
        return function() {
            console.log(this.name);
        }.bind(this);
    }
}
obj.getName()();  // "obj"  "obj"
  1. that
var name = "window";
var obj = {
    name: "obj",
    getName: function(){
        var that = this;
        console.log(this.name);
        return function() {
            console.log(that.name);
        }
    }
}
obj.getName()();  // "obj"  "obj"
  1. ES6的箭头函数
var name = "window";
var obj = {
    name: "obj",
    getName: function(){
        console.log(this.name);
        return () => {
            console.log(this.name);
        }
    }
}
obj.getName()();  // "obj"  "obj"
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1.概念 在JavaScript中,this 是指当前函数中正在执行的上下文环境,因为这门语言拥有四种不同的函数调...
    BluesCurry阅读 1,149评论 0 2
  • 在js中从上下文角度看this指向 话不多说先放码 请先写出各个函数调用之后的console输出 嗯。。。最后我会...
    当时_寻常阅读 164评论 0 0
  • 刚刚学习js的朋友可能和我一样,看到代码中的this总是一脸懵逼,不知道this到底指向谁。经过一段时间的了解,我...
    爆裂边缘阅读 564评论 0 5
  • this是Javascript语言的一个关键字它代表函数运行时,自动生成的一个内部对象,只能在函数内部使用,下面分...
    CHEN_Erhui阅读 295评论 0 0
  • 函数和对象 1、函数 1.1 函数概述 函数对于任何一门语言来说都是核心的概念。通过函数可以封装任意多条语句,而且...
    道无虚阅读 4,661评论 0 5