this

[amandakelake]

深入理解this（有总结和题目）

this的上下文基于函数调用的情况。和函数在哪定义无关，而和函数怎么调用有关

一、全局的this

二、 函数中的this（包括了对象调用和函数调用，最重要的地方在这里）

在一个函数上下文中，this由调用者提供，由调用函数的方式来决定。
如果调用者函数，被某一个对象所拥有，那么该函数在调用时，内部的this指向该对象。
如果函数独立调用，那么该函数内部的this，则指向undefined。
但是在非严格模式中，当this指向undefined时，它会被自动指向全局对象。

function fn() {
    'use strict';
    console.log(this);
}

fn();  // fn是调用者，独立调用,undefined
window.fn(); // window调用，window

'use strict';
var a = 20;
function foo () {
    var a = 1;
    var obj = {
        a: 10,
        c: this.a + 20,
        fn: function () {
            return this.a;
        }
    }
    return obj.c;

}
console.log(window.foo()); //c里面的那个this,这时候因为是window调用，所以指向this,this.a = 20
console.log(foo());    // foo()独立调用，所以是this是undefined，这里要记住，{}并不能形成单独的作用域，并不会产生新的this

在函数执行过程中，this一旦被确定，就不可更改了

var a = 10;
var obj = {
    a: 20
}

function fn () {
    this = obj; // 这句话试图修改this，运行后会报错
    console.log(this.a);
}

fn();

三、 call与apply

作用：自行手动设置this的指向，它们的第一个参数都为this将要指向的对象
它们除了参数略有不同，其功能完全一样

• call以一个一个的形式传递
• apply以数组的形式传递

【Javascript】apply和call的区别 - 笔记 - 前端网（QDFuns）

四、new绑定this

通过new操作符调用构造函数，会经历以下4个阶段。

• 创建一个新的对象；
• 将构造函数的this指向这个新对象；
• 指向构造函数的代码，为这个对象添加属性，方法等；
• 返回新对象。

直接看代码

function Person(name, age) {
    // 这里的this指向了谁?
	  console.log('Person',this);
    this.name = name;
    this.age = age;   
}

Person.prototype.getName = function() {
    // 这里的this又指向了谁？
	console.log('prototype',this);
    return this.name;
}

// 上面的2个this，是同一个吗，他们是否指向了原型对象？

var p1 = new Person('Nick', 20);
p1.getName();

// 先指向new出来的新对象，上面第二步
Person Person {}

// 第三步，指向构造函数的代码，为新对象添加属性和方法
prototype Person {name: "Nick", age: 20}

[zhangenming]

"this的上下文基于函数调用的情况。和函数在哪定义无关，而和函数怎么调用有关..."
箭头函数不符合了吧
恰恰相反和定义位置相关,调用无关

[amandakelake]

@zhangenming 箭头函数没有this 它的this是继承外面的