js中的this的指向问题

任何一门语言中，相信this的指向问题都是一个重点，js也不例外。

js中的作用域分为全局作用域和局部作用域，在全局作用域中，this指向的是他的全局对象window，如下

在全局中打印this：console.log(this);

输出：Window {parent: Window, opener: null, top: Window, length: 2, frames: Window, …}

下面看一下this在局部作用域（函数）中的指向

在函数中，this的指向大致分为四种：

一、在普通函数中this指向window：

var name = "张三";
     function f() {
             var name = "李四";
             console.log(this.name);
     }
     f();
输出：张三

匿名函数的this也指向的是window

ar setname = "张三";
function f() {
        (function () {
                var  setname = "小王";
                console.log(this,this.setname);

        })();
}
f();

输出：Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, parent: Window, …}

 "张三"

二、当函数作为方法调用时

var name = "老李";
var obj = {
        name:"小李",
        getName:function () {
                console.log(this.name);
        }
};
obj.getName();
输出:小李

此时getName方法中的this指向的是调用它的对象，即obj，而不是window

三、以构造函数调用

function Person(name) {
        this.name = name;
        this.play =function () {
                console.log(this.name+"正在打篮球");
        }
}
var sub = new Person("科比");
var sub2 = new Person("韦德");
sub.play()
sub2.play()
输出:科比正在打篮球
	韦德正在打篮球

四、在事件函数中的this指向的是当前事件源，也就是DOM对象

var btn =document.querySelector("#btn");
        btn.addEventListener("click",function () {
                console.log(this);
        })

使用call（），apply（），bind（），方法可以强制修改this的指向，call和apply方法修改以后会立即执行，而bind（）方法会返回一个新对象。

总结一下，this永远指向函数运行时所在的上下文对象，而不是函数被创建时所在的上下文对象。

在全局中，this永远指向全局对象window，无论是否是严格模式，
函数上下文中，非严格模式，this指向window，严格模式this指向undefined。

来源：CSDN

作者：ジ明明就

链接：https://blog.csdn.net/woshichoubaguai/article/details/104448689

标签

var