9-this

第九课 this

一、this基本概念

this是Javascript语言的一个关键字。在JavaScript中，this是动态绑定，或称为运行期绑定的。在不同的情况下，this指向各不相同。但是有一个总的原则，那就是this指的是，调用函数的那个对象。

1.全局范围内

当在全部范围内使用 this，它将会指向全局对象，在浏览器中，window 就是该全局对象。

2.函数调用

this指向全局对象，即windows

var name = 'Jeepeng';
function showName() {
    console.log(this.name);
 }
showName();

3.对象方法调用

在对象方法调用中this指向对象

var person = {
    name: 'Jeepeng',
    showName: function() {
        console.log(this.name);
    }
};
person.showName();

4.构造函数调用

在构造函数内部，this指向新创建的对象。

function Person(name) {
    this.name = name;
}
var person = new Person('Jeepeng');
console.log(person.name);
var person1 = Person(‘Lily’);
// 函数调用，this指向windows

JavaScript 中的构造函数很特殊，如果不使用 new 调用，则和普通函数一样。作为又一项约定俗成的准则，构造函数以大写字母开头，提醒调用者使用正确的方式调用。如果调用正确，this 绑定到新创建的对象上。

二、this可改变（重点）

1.使用apply或call调用

call和apply的作用是改变函数执行时的上下文，即改变函数运行时的this指向。二者的作用完全一样，区别只在于这两个函数接受的参数形式不同。

var person = {
    name: 'Jeepeng',
    showName: function() {
        console.log(this.name);
    }
};
var newPerson = {name: 'Lily'};
person.showName.call(newPerson);

function foo(a, b, c) {}

var bar = {};
foo.apply(bar, [1, 2, 3]);
// 数组将会被扩展，如下所示
foo.call(bar, 1, 2, 3);
// 传递到foo的参数是：a = 1, b = 2, c = 3

当使用 Function.prototype 上的 call 或者 apply 方法时，函数内的 this 将会被 显式设置为函数调用的第一个参数。

2.bind

bind与call很相似，不过bind的返回值是函数

var person = {
    name: 'Jeepeng',
    setName: function (name) {
        this.name = name;
    },
    showName: function() {
        console.log(this.name);
        (function() {
            this.setName('Lily');
        }.bind(this))();
    }
};
person.showName();

3.箭头函数

箭头函数并不绑定 this，arguments，super(ES6)，抑或 new.target(ES6)。所有涉及它们的引用，都会沿袭向上查找外层作用域链的方案来处理。