普通函数中this总是代表着它的直接调用者
箭头函数中this默认指向该函数所在的作用域指向的对象
在线调试
具体情况来看:
(1) 由new创建的被调用函数
这种情况下js会创建出一个新对象,被调用函数中的this指向的就是这个新创建的函数。
function ConstructorExample() {
console.log(this);
this.value = 10;
console.log(this);
}
new ConstructorExample();
(2) 通过apply、call或者bind的方式触发的函数
这种情况下,函数中的this指向传入函数的第一个参数。
function fn()
{
console.log(this);
}
var obj = { value: 5 };
var boundFn = fn.bind(obj);
boundFn();
fn.call(obj);
fn.apply(obj);
(3) 一个函数是某个对象的方法,并且对象使用句点符号触发函数
这种情况下,this指向的就是该函数作为那个对象的属性的对象,也就是,this指向句点左边的对象。
var obj = {
value: 5,
printThis: function() {
console.log(this);
}
};
obj.printThis();
(4)引用式的调用
它将自动隐式编程全局对象的属性——window,即这种情况下,this指代window。
var obj = {
value: 'hi',
printThis: function() {
console.log(this);
}
};
var print = obj.printThis;
print();
严格模式下,是undefined。
(5) 构造函数
this 执行当前类的实例
class obj {
value;
constructor() {
this.value = 5;
console.log(this);
}
}
var a = new obj();
(6)箭头函数
因为箭头函数没有this,所以在箭头函数里面的this是它外层作用域里面的非箭头函数的this。
const obj= value => {
console.log(this);
}
obj();
var A = {
name: 'A',
sayHello: function(){
var s = () => console.log(this)
return s
}
}
var sayHello = A.sayHello();
sayHello();
测试题一:
var obj = {
value: 'hi',
printThis: function() {
console.log(this);
}
};
var print = obj.printThis;
obj.printThis();
print();
会打印出什么?
测试题二:
var obj1 = {
value: 'hi',
print: function() {
console.log(this);
},
};
new obj1.print();
会打印出什么?
测试题三
const obj = {
num: 10,
hello: function () {
console.log(this);
setTimeout(() =>{
console.log(this);
});
}
}
obj.hello();
会打印出什么?
额外说一下call\apply\bind
这三个函数的存在意义是什么?就是改变函数运行时的this指向。
call、apply与bind的差别
call和apply改变了函数的this上下文后便执行该函数,而bind则是返回改变了上下文后的一个函数。
call、apply的区别
他们俩之间的差别在于参数的区别,call和aplly的第一个参数都是要改变上下文的对象,而call从第二个参数开始以参数列表的形式展现,apply则是把除了改变上下文对象的参数放在一个数组里面作为它的第二个参数。
实际应用:
- 求数组中的最大和最小值
var arr = [34,5,3,6,54,6,-67,5,7,6,-8,687];
Math.max.apply(Math, arr);
Math.max.call(Math, 34,5,3,6,54,6,-67,5,7,6,-8,687);
Math.min.apply(Math, arr);
Math.min.call(Math, 34,5,3,6,54,6,-67,5,7,6,-8,687);