关于 this 的指向问题,为什么这里的 this 指向 window?

推荐关注

› Meteor

› JSLint - a JavaScript code quality tool

› jsFiddle

› D3.js

› WebStorm

推荐书目

› JavaScript 权威指南第 5 版

› Closure: The Definitive Guide

This topic created in 3099 days ago, the information mentioned may be changed or developed.

function person() {
    this.name = 'anna';
    this.printThis = function(){
        console.log(this) // Window 
    };
    this.handle = function(method){
        method();
    };   
} 
var p = new person();
p.handle(p.printThis);

console.log(this)中的 this 不是应该指向 p 吗?

Supplement 1 · Dec 13, 2017

想了想,还是不太明白.
为什么把this.getname赋值给变量c之后, c的this会发生变化呢.
是因为this.getname是一个类的方法,而c是一个函数吗?

function Cat() {
    this.name = 'anna';
    this.getname = function(){
        return this; //Window 
    }
    var c = this.getname;
    console.log(c());
}
new Cat();

Supplement 2 · Dec 13, 2017

this指向调用者,例如下面的return this指向dog. 也许是 c = this.getname时上下文环境发生改变了吧.

function Dog() {
    this.name = 'alice';
    this.getname = function(){
        return this;
    }   
}
var d =new Dog()

function Cat() {
    this.name = 'anna';
    this.getname = function(){
        return this; // Dog {name: "alice", getname: ƒ}
    }
    d.getname = this.getname;
    console.log(d.getname());
}
new Cat();

8 replies

GaryMa

Dec 13, 2017

你这里是 p.printThis,不是 p.printThis(), 相当于在外面有个变量 var fun = p.printThis, 然后将 fun 当做参数传给了 p.handle(), 实际上这个 fun 挂在的对象是最外面的作用域，也就是这里的 window

cont

Dec 13, 2017

关键字：this，上下文
```
我知道的是：this 一般有几种调用场景
var obj = {a: 1, b: function(){console.log(this);}}
1、作为对象调用时，指向该对象 obj.b(); // 指向 obj
2、作为函数调用, var b = obj.b; b(); // 指向全局 window
3、作为构造函数调用 var b = new Fun(); // this 指向当前实例对象
4、作为 call 与 apply 调用 obj.b.apply(object, []); // this 指向当前的 object
```

sensui7

Dec 13, 2017

因为你把 p.printThis 赋值给了 handle 的参数 method，你直接调用的 method，已经没有 receiver 了，就是 window 了，
箭头函数的 this 是基于词法的，不管怎么调用的，它的 this 永远是定义时的 this。

shiny

PRO

Dec 13, 2017

lz 需要一本《 JavaScript 权威指南》补补身体（手动狗头）

Tonni

Dec 13, 2017

this 取决于 call-site，想要解决这个问题可以这么弄：

```
p.handle(p.printThis.bind(p));
```

或者用 ES6 的 Arrow function：

```js
function person() {
this.name = 'anna';
this.printThis = () => {
console.log(this) // Window
};

this.handle = function(method){
method();
};
}
var p = new person();
p.handle(p.printThis);
```

楼主可以看看这个系列的介绍 https://github.com/getify/You-Dont-Know-JS/blob/master/this%20%26%20object%20prototypes/ch1.md

TabGre

Dec 13, 2017 via iPhone

console 是 window.console 调用

enginex

Dec 14, 2017

前端小白，我的理解是 JS 中 this 默认是动态作用域，看运行时上下文，p.handle(p.printThis)中的 p.printThis，实质是作为参数，被外围一个函数调用，属于函数直接调用，而非作为对象的方法调用，故指向 window。如果改成下面这样就 OK：
```js
function person() {
this.name = 'anna';
this.printThis = () => {
console.log(this) // p
};
this.handle = function(method){
method();
};
}
var p = new person();
p.handle(p.printThis);
```
因为箭头函数中 this 是静态作用域，主要看定义时上下文，即外层函数的 this （这里是 p ），所以调用后依旧指向 p

airhunter

Dec 14, 2017

我的理解是，你的匿名函数实际等同于在对象外面。类似如下：
function consolewin(){
console.log(this) // Window
};

function person() {
this.name = 'anna';
this.printThis = consolewin
this.handle = function(method){
method();
};
}
var p = new person();
p.handle(p.printThis);