第九课 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)。所有涉及它们的引用,都会沿袭向上查找外层作用域链的方案来处理。