JS this指向问题

javascript中几种this指向问题

首先必须要说的是，this 永远指向函数运行时所在的对象，而不是函数被创建时所在的对象。
（1）、作为函数名调用
函数作为全局对象调用，this指向全局对象

function a(){
    var author = "lry";
    console.log(this.author); //undefined
    console.log(this); //Window
}
a(); //其实这是相当于 window.a()

（2）、作为方法调用
函数作为对象中的一个属性，成为该对象的一个方法，this指向该对象

var o = {
    author:"lry",
    fn:function(){
        console.log(this.author);  //lry
    }
}
o.fn(); //this => o

（3）、使用构造函数调用
使用new调用的函数，则其中this将会被绑定到那个新构造的对象。（首先new关键字会创建一个空的对象，然后会自动调用一个函数方法(apply...)，将this指向这个空对象，这样的话函数内部的this就会被这个空的对象替代）

function Fn() {
    this.author = "lry"
}
var o = new Fn();
console.log(o.author); //lry

（4）、apply或call调用
自行改变this指向，函数this指向apply或call方法调用时的第一个参数

var o = {
    author:"lry",
    fn:function(){
        console.log(this.author); //lry
    }
}
var b = o.fn;
b.call(o); //或者 b.apply(o)

补充：
this的最终指向的是那个调用它的对象（大多数可以这么理解，但并不是准确的）

var o = {
    a:10,
    b:{
        a:20,
        fn:function(){
            console.log(this.a); //20
        }
    }
}
o.b.fn();

这里的this为什么不是指向o？如果按照上面的理论，最终this指向的是调用它的对象，因为 如果一个函数中包含多个对象，尽管这个函数是被最外层的对象所调用，this指向的也只是它上一级的对象。看下面例子：虽然对象b中没有属性a，但this仍然指向的是它的上一级对象b

var o = {
    a:10,
    b:{
        //a:20,
        fn:function(){
            console.log(this.a); //undefined
        }
    }
}
o.b.fn();

特殊情况：

var o = {
    a:10,
    b:{
        a:20,
        fn:function(){
            console.log(this.a); //undefined
            console.log(this); //window
        }
    }
}
var c = o.b.fn;
c();

这是的this指向的是window...为什么呢？如果你还没缓过神来的话，那你可能没有理解this指向的永远是最后调用它的对象。

来源：https://www.cnblogs.com/suixinYB/p/10423453.html

作者：随心一笔

posted @ 2019-09-02 10:10 Mr_R 阅读(187) 评论(0) 编辑收藏举报

Mr_R

JS this指向问题

javascript中几种this指向问题

公告