目前为止，重名现象很严重啊。北京有个老王，上海也有个老王，虽然他们都叫老王，但却是两个不同的人，谁又知道哪个才是专门给邻居送惊喜的老王呢。
今天不研究老王，只是说说 this 关键字，看看它到底是谁。
一、this 关键字
this 就是指代一个对象。
随着 this 所在区域的不同（函数使用场景的不同），this 所指代的对象也就不同，那么 this 在该区域（场景）的值会发生变化。
this 是谁，取决于函数的调用方式，那么 this 指代的对象就是：调用函数的那个对象。
二、使用场景
1. 纯粹的函数调用
不论函数是否嵌套，只要是在全局作用域下运行，this 全部指代 window 对象。
- 全局作用域下：this 指代的就是 window 对象
此时相当于在 window 对象上绑定了函数 fn，调用形式相当于window.fn()
function fn() {
console.log(this);
}
fn()
- 内部函数（函数嵌套产生）：this 指代的仍是 window 对象。
function outerFn () {
function fn(){
console.log(this);
}
fn()
}
outerFn()
- 定时器内：this 指代的是 window 对象
document.addEventListener('click', function(e){
setTimeout(function(){
console.log(this);
}, 200);
});
2. DOM对象绑定事件
- 此时 this 指代的是绑定事件的那个元素
document.addEventListener('click', function(e){
console.log(this);
});
3. 作为构造函数调用
- 构造函数内，this 指代的就是实例对象
function City(name){
this.name = name;
}
City.prototype.say = function(){
console.log(this.name);
}
var first = new City('北京');
first.say(); // 北京
构造函数，就是专门用来生成“对象”的函数。构造函数作为模板，配合 new 操作符生成一个新的实例对象。此时 this 指代的就是这个新的实例对象。
4. 作为对象方法调用
- 函数在对象内作为方法时，this 指代的就是该对象
var city = {
name: '北京',
say: function(){
console.log(this);
}
}
city.say(); // Object {name: "北京"}
函数可以作为一个对象的属性，此时该函数被称为该对象的方法。
三、this 的绑定
1. Function.prototype.call()
简单来说，call 方法的作用就是，以指定的 this 值和参数值去调用某个函数。
call 方法接收参数为一个参数列表。第一个参数就是：希望指定的 this 的值。
如果该参数的值为 null 或 undefined，则表示不需要传入任何参数。
语法：fn.call(thisValue, [param1, param2...])
var city= {
name: '北京'
}
function say(){
return this;
}
say.call(city); // Object {name: "北京"}
还可以这样
var maxValue= Math.max.call(null, 6,3,9,2,1);
console.log(maxValue); // 9
2. Function.prototype.apply()
apply 方法与 call 方法类似。
它俩的区别就是，接收的参数不同，apply 方法接收的参数为一个参数数组。
语法：fn.apply(thisValue, [paramArray])
var city= ['北京', '上海', '天津']
function say(){
return this;
}
say.apply(city); // ["北京", "上海", "天津"]
还可以这样
var arr = [6,3,9,2,1];
var maxValue= Math.max.apply(null, arr);
var index = [].indexOf.apply(arr, [maxValue])
console.log(maxValue, index); // 9 2
3. Function.prototype.bind()
bind 方法与 call 方法和 apply 方法也是类似的。
但 call 和 apply 带有借用的意思，也就是也用某个函数或方法，处理自己的参数。
而 bind 方法，却会创建一个新函数，以指定的 this 值和参数值，去调用这个新函数。
同样会将传入的第一个参数作为指定的 this 值。
语法：fn.bind(thisValue[, arg1[, arg2[, ...]]])
var obj1 = {
name: '小明',
fn: function(){
console.log(this.name)
}
}
var obj2 = {
name: '大刚'
}
var say = obj1.fn.bind(obj2); // bind 绑定 this
say(); // 大刚
------
var print = obj1.fn; // 直接赋值给 print
print(); // window
------
var print = obj1.fn.bind(obj1); // 直接赋值给 print
print(); // 小明
来个小测验
var city= {
name: '北京',
say: function(){
console.log(this);
}
}
以下情况 this 分别代表谁？
city.say(); // city
------
var fn = city.say;
fn(); // window
------
(city.say = city.say)(); // window
网友评论